E-learning application - a new challenge
The challenge of this week is based on designing a new e-learning app to be launched on both Android and iOS.
My user persona is Alicia, of 31 years old and she working as international Buyer at Mango.
Alicia needs an e-learning application that can help her learn everything she needs. The application I have in mind should be fully customizable according to Alicia's needs.
Alicia is an iOS user, so I will design the application based on the iOS templates first and then adapt it for Android.
Native mobile applications for iOS and Android have special operating system-specific features. Guidelines by Apple and Google recommend to use platform-standard navigation controls whenever possible: page controls, tab bars, segmented controls, table views, collection views, and split views. Users are familiar with how these controls typically work on each platform, so if you use the standard controls, your users will intuitively know how to get around your app.Ā
Below are some of the templates I plan to use.
1. Full-Screen Navigation
This navigation approach usually devotes the home page exclusively to navigation. Users incrementally tap or swipe to reveal additional menu options as they scroll up and down.Ā
When to use:Ā This pattern works well in task-based and direction-based websites and apps, especially when users tend to limit themselves to only one branch of the navigation hierarchy during a single session. Funnelling users from broad overview pages to detail pages helps them to home in on what theyāre looking for and to focus on content within an individual section.
Pros: The full-screen navigation pattern is best for achieving simplicity and coherence. You can organize large chunks of information in a coherent manner and reveal information without overwhelming the user; once the user makes their decision about where to go, then you can dedicate the entire screen space to content.
Cons: Prime real estate will be wasted on chrome. You wonāt be able to display any content except the navigation options.
Tips: Use a hamburger menu to hide secondary functionality and keep the focus on the main experience.
2. Moving between states / screens
Moving backward and forward between screens is a common action users take on apps.
The approach on iOS every screen of the app must have a button in the top left corner.
Apple also includes a left-to-right swiping gesture in applications to go to the previous screen. This gesture works in almost all apps.
3. App navigation patterns
Appleās guidelines recommended putting global navigation in a tab bar. The tab bar appears at the bottom of the app screen and provides the ability to quickly switch between main sections of an app.
Usually, the tab bar contains no more than five destinations.
San Francisco is the system typeface in iOS.
Eventually, when it comes time to design the buttons, I will try to shift my thinking to eliminate the concepts of "iOS" and "Android" design patterns, and simply think of our users as "smartphone users", or simply as human beings using a palm-sized touchscreen device.
The buttons will be finger-sized.
The checkbox (called a switch in iOS) will simply look and behave like a checkbox.
I will sketch all these ideas and try to test if they are the best option to develop a new user-friendly app.
I know they are my first project, and before I get to the final design everything can still change, but I think I found the right way.