Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
0 likes1,442 views
This white paper outlines five common mistakes to avoid when creating user interfaces for mobile devices, highlighting challenges distinct from desktop development. Key mistakes include poor data structuring, ineffective navigation, lack of screen resolution optimization, overloading hardware resources, and ignoring device-specific features. By addressing these mistakes, developers can create more effective and user-friendly mobile applications.
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
- 1. Handbook and Tips: Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Abstract: When creating a mobile user interface, developers inevitably face a number of challenges. Most of them are caused by the difference in developing user interfaces for mobile and desktop applications. This white paper will explain how to create an effective user interface for mobile devices and avoid the most common mistakes. By Michael Fedotov, Alex Khizhnyak, Renat Khasanshyn Altoros Systems, Inc. October 15, 2008
- 2. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 2 of 12 Table of Contents 1. Executive Summary 3 2. Mistake #1: Poor Data Structuring and Ineffective Usage of Space 3 3. Mistake #2: Ineffective Navigation 6 4. Mistake #3: No Screen Resolution Optimization 8 5. Mistake #4: Overloading Mobile Hardware Resources 10 6. Mistake #5: Ignoring the Specific Technical Features of Mobile Devices 10 7. Short Summary 11 8. About the Authors 12 Altoros Systems, Inc.
- 3. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 3 of 12 1. Executive Summary Every mobile application developer inevitably faces a number of serious challenges. Most challenges are caused by the drastic difference between developing user interfaces (UI) for mobile and for desktop applications, which is why even experience with one does not guarantee avoiding mistakes with another. The main factors that influence these challenges are the natural limits of mobile hardware resources, smaller screen resolutions, and so on. Typically, mistakes that developers make when creating mobile UIs are of the kind that is a lot easier to prevent than to fix post factum, since in practice ‘fixing’ them means rewriting certain fragments of the interface entirely. This white paper identifies the five mistakes most commonly made by mobile UI developers. The research was created as the result of trial and error during several years of mobile application development at Altoros Systems, a global service provider specializing in mobile development for software companies and interactive agencies. This white paper will explain how to avoid the most common mistakes, and how to ultimately create an effective user interface. 2. Mistake #1: Poor Data Structuring and Ineffective Usage of Space Creating effective user interfaces is only one half of a developer’s work. In fact, it is the most crucial part of the work “Poor user that has to be carried out before development proper, in the interface design stage of business analysis and designing the UI. Remember can hardly be that poor user interface design can hardly be compensated for compensated for by by developer effort. developer effort.” 2.1 Control positions and names Data fields and other controls should be thoughtfully structured; their positions on the screen have to be defined at this early stage, so as to avoid difficulties in the process of development. Texts and captions also have to be well thought out, aspiring to as much brevity as possible. For example, Full Name is preferable to User Full Name because it is shorter and, therefore, saves considerable screen space. Also, think about acronyms that could be used instead of full words, but remember to keep them intuitive. 2.2 Using icons Using intuitive icons is another good way to save screen space. Not only is an icon smaller than a text inscription, it can also be more informative, as long as it is really intuitive (and achieving Altoros Systems, Inc.
- 4. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 4 of 12 that requires effort). Icons should be implemented in several sizes (16x16, 32x32, 48x48, 64x64) and two color modes (16 colors and 16-bit color) to ensure that they look sharp on all screens. The small size of icons, however, is not a reason to cram the screen with them. Per- screen quantity regulations (see below) apply to icons just as much as any other controls. 2.3 Grouping items into tabs Grouping controls into tabs is also something to think over carefully. Grouping should have clear and logical criteria, so that users have no problem finding what they are looking for, and do not find themselves in the disconcerting position of having to repeatedly fill in consecutive fields that have little or no relationship between with one another (putting a University Major field right after a First Name field, for example). Figure 2.1. Field distribution between tabs Source: Altoros Systems, Inc. For mobile devices, distributing controls between tabs adequately is especially important, as controls distribution is the ultimate way out of the scarce screen space problem. 2.4 Using screen space efficiently It is important to make use of the whole screen space. Literally, “Grouping related you should try to use every pixel. This means no unnecessary menu items into graphics, borders, etc. On the other hand, overloading the sub-menus can screen with controls is also something to avoid. Not only does it help save space cause difficulties with the perception of the screen contents by considerably.” users, it also makes navigation inconvenient. Altoros Systems, Inc.
- 5. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 5 of 12 2.5 Allowed numbers of controls and recommended sizes Ten is considered the upper limit of controls that can be displayed on the screen at the same time. If there are 11 or more controls, we recommend reducing the number of controls per screen. It is a good idea to put no more than three controls in a row and a maximum of two multiline blocks on a page. Typically you want to avoid putting scrollbars on data control groups. If there are more than three tabs, using multi-tab navigation is recommended. The name of a control that cannot have a label on it, such as an input field, should be put to the left of the control and aligned right. We suggest that the distance between a control and its name is 5 pixels. 2.6 Menus and sub-menus Grouping related menu items into sub-menus can help save space considerably and create a more convenient user interface. On the other hand, it is important to keep this within reasonable limits: make sure your navigation does not get cumbersome due to numerous nested sub- menus. We recommend that every menu contain no more than seven items. We suggest that the height of every single item is 30 pixels. Figure 2.2. Menus Source: Altoros Systems, Inc. 2.7 Zoning To achieve maximum efficiency of screen space usage, zoning is a good approach. Divide the screen into several areas of fixed height and assign a specific function to each of them. In one of our projects, for example, we zoned the screen (of 320x240 resolution) like this: Altoros Systems, Inc.
- 6. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 6 of 12 Figure 2.3. Zoning Source: Altoros Systems, Inc. All of the zones had fixed height. We used Zone A for the Windows Navigation Panel. Zone B was used to display the data control group. The functioning of Zone C depended on the mode that was used: In what we called the TabNavigation mode, Zone C was where tabs were displayed. In the MultiTabNavigation mode, it displayed tabs and additional buttons. In the ButtonNavigation mode, buttons were displayed in Zone C. Finally, zone D was used for displaying application control buttons in different modes. 3. Mistake #2: Ineffective Navigation There are three main means of navigation: using the “There can be keyboard, stylus, or fingers. nothing worse about a UI than if it One of the fundamental principles of building a mobile user causes a user to interface is to minimize switching. Ideally, a user should be make several able to stick to just one method of navigation all the time. attempts to hit a Using a stylus is not recommended, since taking out the button.” stylus and putting it back, is not always convenient. Many mobile devices do not have keyboards—on the other hand, Altoros Systems, Inc.
- 7. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 7 of 12 not all of them support touch navigation, either. Thus, if your mobile application is not oriented to a specific group of devices or intended for special usage that sets its own requirements to the user interface, it is a good idea to enable the support of both keyboard and touch navigation. At the same time, a user should be able to stick to one way of navigation without having to switch to another. Just as crucial as that, is to make sure that the size of controls is adequate for touch navigation. There can be nothing worse about a UI than if it causes a user to make several attempts to hit a button. Research shows that on a 2" QVGA screen 29 pixels is the smallest height and width for a button to be easy to hit. Also, never forget about the distance between controls: it should be there to prevent mis-hits. Avoid creating large gaps, however: we recommend that spacing between controls does not exceed 10 pixels. If your application has a menu, the menu should be assigned to the right soft key. The left soft key is typically for quick (common) actions, such as New. If a second menu is used, it can be assigned to the left soft key. Gesture navigation is a technology that any mobile application could benefit from, provided the implementation is smart enough. Messages from gesture navigation should be processed on the top level and forwarded using the cascade mode to lower levels (parent to child). Figure 3.1. Night mode Source: Altoros Systems, Inc. Another thing that is worth considering, is implementing a night mode. Color perception is greatly dependent on light conditions; when there is little light, the human eye perceives dim colors better. In night mode, therefore, the gamma should be dimmer, which enables the user to work comfortably during nighttime. Altoros Systems, Inc.
- 8. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 8 of 12 4. Mistake #3: No Screen Resolution Optimization There are several standards of screen resolution for mobile devices. Usually, an application developer would want to support as many devices with a compatible operation system as possible, and to do so, the developer has to optimize their application for all standard screen resolutions. It is advised that any mobile application supports these resolutions: 240x320, 320x240, 240x240, 320x320, 480x640, 640x480, and 480x480. Unless the specifications of the project require something different, we recommend the creation of layouts for QVGA screens that would be supported on VGA devices. A layout initially created for a QVGA resolution should work on VGA resolutions; a layout initially created for a VGA resolution is not guaranteed to work on QVGA resolutions. When we used zoning (see chapter 2) for one of our applications that supported QVGA, zone B was sized 240x240. If running on a device with a 240x240 px screen (and using zoning), zone C was hidden in our applications, as well as the navigation panels. They opened and were available for work upon clicking and holding. Figure 4.1. Zoning in 240x240 resolution Source: Altoros Systems, Inc. For devices with high screen resolutions (such as 800x600 and higher), we recommend creating a different user interface, based on the same design elements as the smaller version, but making use of the large screen space such devices have to offer. High screen resolution means more space to display information, which is a considerable advantage over smaller resolutions. The number of controls that can be put on the screen increases, but in no way does this enable a developer to overload the screen with controls. The number of controls is still limited for high resolution screens; the limit is just different. Altoros Systems, Inc.
- 9. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 9 of 12 Figure 4.2. User interface design on a high-resolution screen Source: Altoros Systems, Inc. Control layouts should be anchored and resized/moved when the window is resized. That will allow using one application for both QVGA and VGA-type resolutions. Most UI-friendly applications support portrait, landscape, and square screen modes. This will enable the application to run and will make it more convenient to use on mobile devices with screens of all types. If target devices are likely to be used in different orientations (landscape and portrait), it is wise to consider implementing dynamic changing of the view. Surely there are some obstacles to it, such as the necessity to rearrange the controls, treat scrollable elements, etc., but, if the implementation is done carefully, it can be quite a clever stroke. Altoros Systems, Inc.
- 10. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 10 of 12 5. Mistake #4: Overloading Mobile Hardware Resources The scantiness of hardware resources affects mobile application development considerably. In fact, effective use of hardware resources becomes one of the primary goals of a developer. This means that one should not get overenthusiastic about adding animations, rounded corners, and other decorative features to the application. In fact, we recommend avoiding them completely. Customers pay—first and foremost—for functionality and efficiency. The customer can hardly consider an application effective if it does not run smoothly because it is packed with visual effects. With the right approach, it is absolutely possible to create an efficient and nice looking mobile application without resource-consuming visual effects. Another example: there are no mobile devices whose screens can display more than 65,536 colors. This means that storing pictures with the color depth of 24 or 32 bit is pointless. All it “If a modeless accomplishes is the consumption of more resources. window loses focus For a mobile application to run smoothly, it is important that the to another window, balance between caching and calculating on request is there is no maintained. The former consumes RAM; the latter, CPU opportunity for the resources—and in mobile devices both are quite limited. If user to retrieve it.” your mobile application is relatively resource-consuming, the only way to optimize its performance is to find and maintain the balance between CPU and RAM usage. 6. Mistake #5: Ignoring the Specific Technical Features of Mobile Devices A mobile application developer has to keep in mind that different models of mobile devices, as well as different versions of operating systems, have their own specific features. Ironically, although the aim of a developer is to make his or her project as universal as possible, to achieve that he or she has to keep in mind the peculiar features of the different systems the application may be run on. More precisely, the developer must not just keep them in mind, but optimize the product, so that the difference between models does not become a hassle to the application functioning on any compatible device. Internet connection. For example, a mobile application can connect to the Internet in a variety of ways: via Wi-Fi, Bluetooth, GPRS, ActiveSync, etc. A mobile application developer should provide for all of these, instead of implementing just one means of connection. Modal and modeless forms. Another thing to be aware of is that if a modeless window of a mobile application loses focus to another window, there is no opportunity for the user to retrieve it. Therefore, a mobile application absolutely should use modal forms for the main application form, messages, and every form that has input controls, in order to exclude the risk of focus being lost. An application can use modeless forms, however, but either all these modeless forms have to be moved to the top when the main form is Altoros Systems, Inc.
- 11. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 11 of 12 activated, or a form management subsystem should be implemented, in which all modeless forms are children of the main form or its children. Operating systems. Ideally, a mobile application for an operating system of a certain version should work on all devices supporting this operating system, as long as the application is not intended to be used on mobile devices of a specific model. Most popular mobile applications for Windows “One should not get support the following operating systems: Windows overenthusiastic about Mobile 5.x, Windows Mobile 6.x, and Windows CE adding animations, 5.x. Testing them on a wide range of devices is rounded corners, and recommended to ensure their maximum other decorative workability on different types of mobile devices. features.” 7. Short Summary To recap, the five most typical mistakes that mobile application user interface developers make are: 1) Not giving enough consideration to the structure of a user interface before actually starting to develop it; creating a structure that is initially ineffective owing to unwise space usage (putting too many controls on the screen or leaving too much empty space) and poor logic in distributing controls between tabs. 2) Creating navigation that is inconvenient or ineffective (i.e. requires switching between means of control, such as keyboard, stylus, and touch screen); making controls too small or too closely spaced to each other to hit easily when using finger navigation. 3) Ignoring the fact that a user might run the application on a device with a screen resolution different than the one on the developer’s device, and, therefore, not optimizing the application for different resolutions and orientations (portrait, landscape, square screen mode); not implementing support for devices with big resolutions. 4) Overusing the mobile devices’ hardware resources by not regulating the balance between caching and calculating on-demand, implementing unnecessary design elements, etc. 5) Not ensuring the application’s compatibility with the maximum number of mobile devices possible; ignoring specific features of different devices. Avoiding and fixing the foregoing mistakes can be a very hard thing to do, sometimes it is practically unfeasible. Looking out for them, however, is imperative for every mobile application developer who wants his or her UI to be truly user-friendly and convenient. Otherwise, developers risk ending up with a user interface adopting poorly. Altoros Systems, Inc.
- 12. Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices Page 12 of 12 8. About the Authors Michael Fedotov is Technology Evangelist at Altoros Systems, Inc. and has been working as a freelance journalist for a number of IT-related periodicals since 2003, covering next to all aspects of IT, and specifically software developments, in an abundance of articles. He has taken part in several scientific conferences and provided service for many more participants creating and holding their presentations. He also has experience working as an interpreter and presently is studying Japanese. Alex Khizhnyak is Chief Evangelist at Altoros Systems, Inc. and co-founder of the Belarus Java User Group. Since 1998, he has gained experience as an author, editor, media specialist, event manager, conference speaker, and blogger. So far, his educational background combines IT, programming, economics, and journalism. Renat Khasanshyn is the founder and CEO of Altoros Systems, Inc. Mr. Khasanshyn speaks frequently at a wide range of events, and most recently was selected as a finalist for the 2007 Emerging Executive of the Year award by the Massachusetts Technology Leadership Council. Prior to founding Altoros Systems, Mr. Khasanshyn was VP of Engineering for Tampa-based insurance company, PriMed, Inc. Mr. Khasanshyn is a co-founder of the Belarus Java User Group and studied Engineering at the Belarusian State Technical University. Altoros Systems, Inc. is a global software delivery acceleration specialist that provides focused outsourced software product engineering, independent Quality Assurance, and testing services to software organizations and information-driven enterprises. Founded in 2001 and headquartered in Sunnyvale, California, Altoros has representative offices in Western Massachusetts and Norway. It manages a software development center in Eastern Europe out of its offices in Minsk, Belarus. For more information, please visit www.altoros.com . Altoros Systems, Inc.