Tips to Increase Usability on Web and Native Apps
I’m going to start off this post by saying that native apps have many, many advantages to them (greater stability, performance, security, integration with existing features on the phone, and more!). Web apps too, have their own advantages; the ‘better’ one depends on the task.
What characteristics would improve your app’s usability?
1. Make sure your layout is responsive.
1. Make sure your layout is responsive.
This is especially important if you are creating a web app, or a native Android app.
Web apps: Responsive layouts are crucial for web apps. Not only will your app be viewable on a multitude of different desktop resolutions, but users will be using your app on their smartphones as well (read: the user experience should be similar on all desktops, as well as all Apple, Android, Blackberry, and Windows smartphones and tablets). A recommended approach is to make your website dynamic.
Native apps: I specified the importance of a responsive layout for Android apps because unlike Apple’s iPhones and iPads, Android devices do not have specific screen dimensions. To give you an idea, there are 4 common screen density-independent pixel (dp) resolutions (1 dp = 1.5 px), extra large, large, normal, and small. Within each dp, are different screen widths. For instance, there are 3 common sizes for 320dp screens (240×320, 320×480, 480×800). In short, for your native app to have high usability, it will need to fit on many different screen sizes.
2. Screen real estate is valuable, so while you should keep your screens uncluttered, you should also provide easy navigational tools.
With screens shrinking in size (and then increasing, due to an increased adoption of tablets and larger smartphones), screen real estate is important. Keeping your apps uncluttered will help users accomplish the task quickly. However, in the case that the app is not simple enough in nature to adopt a minimalist design, easy navigational tools should be provided (drop-down menus, slide in menus, etc). See Occam’s Razor in UI Design: Minimizing Complexity for more about uncluttering your interfaces.
3. Don’t break out of patterns.
If a usability pattern has been established (whether it is by apps in general, or within your own app), don’t break out of it. For instance, if most of your screens had a search button in the top-right corner, all future search buttons should also be in the top-right corner. An example of a general pattern to not break is to make sure things that aren’t buttons shouldn’t look like buttons.
4. Minimize guessing.
Guessing is frustrating, time-consuming, and makes it difficult to learn how to use your UI. To minimize it, always provide feedback. If your app is loading, provide a visual spinner. If there is an error that is stopping your app from running, inform your user about what they could do to help (e.g. turn on wifi). Mokhov (2011) recommends guiding the user towards their next steps by making those areas more prominent (e.g. larger button).
5. It’s annoying to type for too long on a smartphone, so make sure users only type if they have to.
Keyboards on smartphones are small. Keyboards on any touchscreen lack tactile feedback (a slight phone vibration per tap just doesn’t do), so minimize the amount of typing users must do. For instance, sign up forms should only ask for required information, which usually brings it down to around 4 fields ([user]name, email, birthday, password).
References
Apache 2.0 (2012, Dec). Supporting multiple screens. Retrieved from http://developer.android.com/guide/practices/screens_support.html
Hacker, W. (2012). Boost your mobile e-commerce sales with mobile design patterns. Retrieved from http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/
Mokhov, O. (2011). 10 essential web application usability guidelines. Retrieved from http://speckyboy.com/2011/03/31/10-essential-web-application-usability-guidelines/
Webcredible. (n.d.). 7 usability guidelines for websites on mobile devices. Retrieved from http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml
Read More
7 Latest Trends in Mobile UI – Be Bold, Be Accessible
BOLD Elements
The latest aesthetic trend is to be bold. Strong graphics and strong colours attract and maintain interest. Be bold, but also be minimalistic.
Figure 1
Large Pictures
Visuals. Users are moving towards visual content (think Pinterest, tumblr), so the demand for large, good quality pictures are on the rise. This is made possible with the development of increasingly higher resolution screens of newer Apple and other smartphone devices. Figure 1 shows how important large, good quality photos are to an app’s first impression.
Blocks of Colour
Always think bold. Figure 1 shows how bold colours can not only make content visually pleasing, but how it can be an organizational tool as well.
Figure 2
Flat Shapes/Icons
Current trends favour simplicity. Shapes and icons are solid in colour, and within an icon, as few colours as possible are used. Figure 2 shows white icons on maroon circles (2 colours, simple shapes).
Organization
With a move towards simplicity and a demand for more content, organization becomes tricky. Here are some recent methods.
Alternating Sides
Figure 2 is a great illustration of alternating the alignment of mobile content. That is, the first item is aligned to the left, the second aligned to the right, the third to the left, and so forth. It breaks up the content and makes it look more interesting at a glance.
Grid-View
The trend towards visuals provides a great opportunity to be creative with arranging thumbnails. Figure 1 shows the grid-view method (Pulse, Brit+Co, for instance).
Functionality
Mobile means small screen real-estate. Functionality as well as aesthetics is still as important as ever.
Scroll-to-Load
Apps are opting to use the scroll-to-load model, as opposed to linking to a multitude of pages. That is, you don’t click to load more content, it loads as you scroll down. Examples include tumblr, Facebook, and Pinterest.
Figure 3
Pop-up Scrollable Drop-downs
An elegant solution to solving the problem of lengthy menus on a small screen is to have a menu of determined size pop-up. Within the menu, its contents can scroll upon a swipe gesture.
Stock Photos
http://burtn.deviantart.com/art/Mountain-Lakeside-Background-326440440
http://dariuszsankowski.deviantart.com/art/kiwi-35821160
http://busangane.deviantart.com/art/wild-strawberries-326613099
http://miguel2010.deviantart.com/art/Fruit-Bowl-325718364
http://kennedystockphotos.deviantart.com/art/FREESTOCK-SWEETS-326924217
http://mendekua.deviantart.com/art/Choco-1-325685221
http://moonberry.deviantart.com/art/wedding-cake-3-33482849
http://starz7369.deviantart.com/art/I-Love-Chocolate-1-28931797
http://dominikaaniola.deviantart.com/art/Mystic-woods-145283836
Read More3 Creative and Innovative Approaches to Navigation in Mobile Apps
-
Side Panel Menu
Source: Android//UI PatternsThis approach to navigation is a new trend originating from the Facebook app. Upon clicking on an icon, the current page automatically slides to the right, revealing a menu located vertically on the left side. Other apps that now use this approach is Spotify, Evernote, and Google Plus.
-
Expanding Circular Menu
Source: SoftonicCurrently only in the Path mobile app, this menu has an elegant design. It is located where thumbs can easily access it, and upon tap, the animation of menu items expanding outward is not only pleasing to look at, but the red plus sign also rotates to be come a red ‘X’ – immediately informing the user that tapping it again would close the menu.
-
Scroll Bar Information
Source: The Next WebJust a neat little feature from Path – while you are scrolling, a small tool-tip hovers beside the scroll bar so that users will know at a glance, where in the timeline they are currently viewing.
References
Lehtimäki, J. (2012, June 10). Emerging UI pattern – Side navigation. Retrieved from http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html .
The Benefits of Outsourcing Mobile App Development to a Development Firm
Mobile Development Expertise
Mobile development firms make and submit apps every day. They are constantly developing complex mobile applications. Therefore they are experts in:
- Intuitive User Interface(UI)/User Experience(UX) Design
- Data Mining and Data Capture
- iOS App Store/Google Play/Blackberry AppWorld/Windows Phone MarketPlace submission
- Mobile Testing and Deployment
- Native and web based programming
Taking on the above tasks involves an incredible amount of expert knowledge and costly mistakes may occur if organizations are not properly prepared. Each app store has strict user interface guidelines that must be followed in order for an app to be accepted to app stores. A worst case scenario could result in costly redesign of the application for all of the selected operating systems.
Data mining and data capture is one of the most beneficial features of mobile applications. Therefore it is imperative to collect and store data properly in order to receive an optimal return on investment.
Fragmentation
The mobile environment is extremely fragmented mainly due to the advent of Android, an open source operating system that the majority of device manufacturers have implemented. Mobile fragmentation has led to users with multiple screen resolutions, which has resulted in extensive testing required prior to deployment.
This image is just a few of the devices we use for testing…and it was taken about 4 month’s ago
Mobile App Development is NOT EASY
The bottom line is that mobile app development is not easy. Certain properties relate to web design and development, but native mobile app development is essentially software development, combined with intuitive design methods.
If you are interested in more information about mobile app development I encourage you to call me @ 905-526-0386 ext 550 or email me Drew@floatpoint.com to discuss how we can help meet your mobile goals and objectives.
Read MoreColour and Mobile GUI
A couple of months ago, we posted an infographic introducing you to the psychological effects of colour. Colour can greatly impact not only the look and feel of your mobile app, but also how the users may behave.
Red
Represents: Ambition, vitality, passion, strength, anger (therefore, use in moderation)
Application: Referees favoured athletes who wore red (they were asked to judge identical tapes of athletes differing in only colour of attire).
Mobile: Use in moderation to highlight important items that must be seen.
Pink
Represents: Emotionally soothing and calming, femininity, softness, health, innocence; alleviates feelings of irritation, loneliness
Application: A university football coach painted the visitor’s lockers pink to reduce aggression (O’Reily, 2012)
Mobile: Use for apps that need to be gentle or relaxing (e.g. mHealth apps that might hold stressful information)
Orange
Represents: Joy, fun, value, discounts; stimulates mind to find interests, increases craving for food
Application: ING Direct uses orange to remind you of reduced fees, McDonald’s uses a red-orange to boost appetite
Mobile: Great for food-related apps (recipes, shopping lists, etc.), mCommerce apps
Yellow
Represents: Wisdom, joy, happiness, creativity, intelligence; encourages optimism and self-confidence; fatiguing to the eye
Application:
Mobile: Use on apps that require creative thought (e.g. drawing apps, note-taking apps), but use conservatively because it may cause eye-strain
Green
Represents: Relaxation, balance, self-respect, well-being, learning, growth
Application: Blackfriars Bridge in England, once painted green, saw a significant reduction in suicides.
Mobile: Safe colour to use for if you can’t decide on a theme. Also good to use on apps that promote learning (e.g. trivia apps).
Blue
Represents: Calm and relaxation, night, protection, creativity, clarity, trust, memory, depression (for dark blue; use in moderation); suppresses appetite
Application: Operating rooms choose a pale blue for their sheets and gowns to promote calm and relaxation.
Mobile: Use for apps that need to promote feelings of calm and relaxation, perhaps in conjunction with pink (e.g. mHealth apps, weight loss apps); use also for apps requiring user trust (e.g. mCommerce apps)
Brown
Represents: Honesty, dependability, stability, comfort; alleviates insecurities
Application: The UPS logo sports brown to remind customers of their dependability.
Mobile: mCommerce apps, and apps selling a service
Black
Represents: Comfort, protection, silence, mystery, authority, luxury, power
Application: Think Apple products.
Mobile: Use on apps with a more serious tone, and to indicate luxury.
White
Represents: Peace, comfort, purity, truthfulness, lightness
Application: Airplanes are painted white because “It soothes the concern we all secretly harbour that a machine that size can’t possibly become airborne.” (O’Reily, 2012)
Mobile: Use white on complicated mobile apps to make it appear less cluttered.
References
Psychology-101. (2012, February 22). Color psychology – How colors affect our moods and emotions? Retrieved from http://www.psychology-101.com/2012/03/color-psychology-how-colors-affect-our.html
O’Reily, T. (2012, May 5). Colour schemes: How colours make us buy. http://www.cbc.ca/undertheinfluence/season-1/2012/05/05/colour-schemes-how-colours-make-us-buy-1/
The 5 Gestalt Principles to Making Mobile App UI Intuitive
The Gestalt Principles of Perception attempts to explain the way in which humans perceive items as a single structured unit rather than a sum of each individual part. These principles can be used in making mobile application user-interfaces more intuitive. Let’s explore these principles.
-
The Law of Proximity
Objects that appear close together in space will be perceived as one group. Consider the textbook example below:
The rectangles appear as if there are three groups of three; within each group, the rectangles are very close to each other. How can we apply this to mobile applications? Well, in organizing items that contribute to the same task. Take a look at the example provided by Soegaard (n.d.):
By using the Law of Proximity, the radio buttons are arranged more closely to P2P Search than to Web Search. This makes it easily understood they are sub-functions only under P2P Search. With the many functions and sub-functions in mobile applications, the Law of Proximity can be used to make navigation intuitive. -
The Law of Similarity
Objects that look alike will be perceived as one group. Consider the textbook example below:
-
The Law of Figure-Ground
The Law of Figure-Ground is a little more complicated. Before describing it, consider this famous illusion:
The Law of Figure-Ground posits that some objects will capture more attention and therefore ‘stand out’ from the background. Graphic Designers often play with the Law of Figure-Ground to make logos more rich (e.g. FedEx, Tostitos). In mobile though, we can use this law to help lead the user through the user-interface, inadvertently making it easier to figure out. -
The Law of Symmetry
The Law of Symmetry states that we perceive objects as symmetrical around their centres. This means that if we see unconnected items that are symmetrical, we would likely perceive them as one object. In mobile, this law can be useful in organizing elements on a small screen. Here’s a textbook example of the law of symmetry (Soegaard, n.d.)
-
The Law of Closure
Lastly, the Law of Closure says that humans will perceive incomplete objects as complete (i.e. as one closed object) – given the correct circumstance. Consider this example below (Soegaard, n.d.):
Although there are 24 ‘unrelated’ shapes, we not only perceive these shapes as groups of threes, but we also perceive a single, complete, cube. This law is similar to the Law of Symmetry, except the Law of Closure does not require symmetry. Again, in mobile, this law will be useful in the organization of UI elements, while maintaining aesthetics.
References
Soegaard, M. (n.d.). Gestalt principles of form perception. Retrieved from http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
Read MoreDo you need a Consultation?
