Tips to Increase Usability on Web and Native Apps

Posted by Afrisa Yeung on Jan 2, 2013 in UI/UX | 0 comments

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.

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

Posted by Afrisa Yeung on Sep 21, 2012 in Mobile Industry Trends, UI/UX | 0 comments

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 More

3 Creative and Innovative Approaches to Navigation in Mobile Apps

Posted by Afrisa Yeung on Sep 20, 2012 in UI/UX, Uncategorized | 0 comments

1. Side Panel Menu

   
   Source: Android//UI Patterns

   This 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.

2. Expanding Circular Menu

   
   Source: Softonic

   Currently 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.

3. Scroll Bar Information

   
   Source: The Next Web

   Just 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 .

Read More

Colour and Mobile GUI

Posted by Afrisa Yeung on Sep 12, 2012 in UI/UX, Uncategorized | 0 comments

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/

Read More

The 5 Gestalt Principles to Making Mobile App UI Intuitive

Posted by Afrisa Yeung on Aug 16, 2012 in UI/UX | 0 comments

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.

1. 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.

2. The Law of Similarity

   Objects that look alike will be perceived as one group. Consider the textbook example below:

    Although the shapes are of equal dimensions and proximity, our understanding of their similarities and differences cause us to perceive them as 4 groups of three, alternating between circles and squares. To apply this to mobile applications, we can for instance, take advantage of this Law to organize information so that it is more accessible. Here’s an example from Opera (Soegaard, n.d.):
   Opera groups functions by using different background colours. By colouring say, ‘Fonts and colors’, ‘Page style’, and ‘Multimedia with a light-gray colour, it is immediately perceived as one group of options. This can be used to organize any amount of information in mobile apps.

3. 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.

4. 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.)

   

5. 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 More