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

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

Occam’s Razor in UI Design: Minimizing Complexity

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

“With every improvement to our design, the design itself should become more invisible.”
– Jared M. Spool, CEO and Founding Principal, User Interface Engineering

1. Minimize visual noise
   Removing items unecessary to the main purpose will reduce perceived clutter, boosting usability. Less distractions mean the interface will be less confusing and easier to navigate.
2. Hide complex elements you can’t get rid of
   Complex elements vital to the mobile app can be hidden to minimize visual noise and to maximize screen real estate. A great example would be Facebook’s mobile app wherein the menu slides in from the left upon clicking a small button on the top-left corner of the screen.
   
   Source: Inside Facebook
3. Use patterns to flatten out the learning curve
   Reusing patterns users learnt from past experiences (e.g. the concept of ‘windows’ in using Microsoft’s operating systems”) will flatten out the curve because most of the learning had already been done. Further, using patterns within a mobile app has the same effect — users only need to figure things out once.
4. Use visual hierarchy to help your user maintain their bearings
   As mobile screen real estate is valuable, using a visual hierarchy will help them maintain their bearings. Visual elements such as colours and font weights and sizes should be strategically used.

References

• Clark, T. B. (2009, October 8). Minimizing complexity in user interfaces. Retrieved from http://www.innovativeinteractivity.com/2009/10/08/minimizing-complexity-in-user-interfaces/
• Sollenberger, K. (2009, August 17). 10 User interface design fundamentals. Retrieved from http://thinkvitamin.com/design/10-user-interface-design-fundamentals/
• Tate, T. (2009, August 15). Minimizing complexity in user interfaces. Retrieved from http://www.boxesandarrows.com/idea/view/40601
• Tate, T. (2009, October 7). Minimizing complexity in user interfaces. Retrieved from http://uxdesign.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/

Read More