Pages

Showing posts with label Post 6: Things considered for UI design & how important the UI design is?. Show all posts
Showing posts with label Post 6: Things considered for UI design & how important the UI design is?. Show all posts

Saturday, February 21, 2015

Mobile User Interface Design

In this post, we are going to see about how the mobile user interface customization plays a vital role in the mobile application development. We are going to see the below mentioned topics.
  • Using the screen real estate efficiently
  • How the user perceives design elements
  • Social aspect of mobile interfaces
  • Accessibility
  • Design patterns
  • Designing for the platforms.
Effective use of Screen real estate
The first step to use the smaller interfaces of mobile devices is to know the context of use. Who the users are, what do they need, why, how, when and where will they access and use information?

Effectively the screen real estate is used by embracing minimalism, maintaining a clear visual hierarchy, and staying focused.


Understanding the mobile application users
While waiting in line at the bank or a restaurant, people pull out their mobile devices to 
entertain themselves and consume another dose of content. The Gestalt principles have had a considerable influence on design, describing how the human mind perceives and organizes visual data. The Gestalt principles refer to theories of visual perception developed by German psychologists in the 1920s. According to these principles, every cognitive stimulus is perceived by users in its simplest form. Key principles include proximity, closure, continuity, figure and ground, and similarity.

- Proximity
Figure 9: Proximity
Users tend to group objects together. Elements placed near each other are perceived in groups. people will see one group of three gears, and one group of two gears. Many smaller parts can form a unified whole. Icons that accomplish similar tasks may be categorically organized with proximity. Place descriptive text next to graphics so that the user can understand the relationship between these graphical and textual objects.

- Closure
Figure 10: Closure
If enough of a shape is available, the missing pieces are completed by the human mind. In perceiving the unenclosed spaces, users complete a pattern by filling in missing information. Figure 10 shows the concept of closure. people recognize a triangle even though the figure is not complete. Harness the closure concept to create icons with a strong primary silhouette, without overloading users. This is how the user correlate the concept.

Continuity
Figure 11: Continuity
The user’s eye will follow a continuously-perceived object. When continuity occurs, users are compelled to follow one object to another because their focus will travel in the direction they are already looking. When people see Figure 11, they perceive the horizontal stroke as distinct from the curled stroke, even though these separate elements overlap. Smooth visual transitions can lead users through a mobile application.

Figure and Ground
Figure 12: Figure & Ground
A figure, such as a letter on a page, is surrounded by white space, or the ground. In Figure 12, the figure is the gear icon, and the ground is the surrounding space. Complex designs can play with the line between “figure” and “ground,” but mobile interfaces speed user frustration with unclear distinctions. Primary controls and main application content should maintain a distinct separation between figure and ground.

Similarity
Figure 13: SImilarity
Similar elements are grouped in a semi-automated manner, according to the strong visual perception of color, form, size, and other attributes as seen in figure 13. In identifying similarity, dissimilar objects become emphasized. Strict visual grids confuse users by linking unrelated items within the view port. The layout should encourage the proper grouping of objects and ideas.

After these, we directly go to the accessibility requirements of the mobile user interface.
An application should be easier for users to use with poor or diminished vision, limited dexterity, or any cognitive impairment. Considering the accessibility as a way to reach
more users, standard defining of five checkpoints for mobile accessibility:

1. Overall Behavior: Independent of specific device features, the guidelines for a general
mobile experience.
2. Navigation and Links: The ease of user interaction with hyperlinks on the mobile device
interfaces.
3. Page Layout and Content: How content is designed on each page, and how chunks of content are laid out for accessible consumption.
4. Page Definition: Defining content areas for mobile device interpretation.
5. User Input: Considerations of available mobile device input methods.

Also, hearing, vision, speech, dexterity, cognition, error protection, correction, navigation, controls, etc to be considered for the development of user interface.

In the following posts, let us see in detail about various platforms for which the mobile applications are to be developed.