Welcome to the Tap-and-Go World

Since the beginning of Industrial revolution, which started in the early XX-th century each forthcoming decade can be associated with specific “technological addictions”.

The twenty-tens are marked with the raise of social networks and an epidemic use of mobile devices (those who have 4” – 10”(14”!) screen sizes). These small gadgets have lodged so tightly into our lives that we can’t even spend even a day without going online or posting new photos, of what we’ve ate, to Instagram. Web designers make their devilish job creating user interfaces that day after day beсome more convenient for us, and we ‘bog down into that mire’ deeper and deeper…

That was just a lyrical digression about mobile device popularity in the modern society. You may have absolutely diverse ideas considering these points, and you are welcome to express your thoughts in the comments section.

What does it mean to design for touch? This is a whole bunch of difficulties every interface designer faces. The major one is the size of a click zone. Since we all have different palms our finger thickness also differs. For those who have big fingers small touch zones can be really challenge to click.


People interact with mobile apps differently from websites or desktop software. Mobile apps rarely have the undivided attention of a user and most interactions use text input, which is not as precise as we might like. For this purpose there were created styluses that help us navigate easily without hitting two buttons with one tap.

Bring your creation to Google Play. This is the best place to find out whether you’ve succeeded in creating usable design or not. Google store repletes with hundreds of thousands of applications still the ones that are free are among most popular.

Principles of a good touch interface design

1. Focus on the user
Target your audience (age, skill level, disabilities, etc.), test on real users (make an alpha release of your app).

2. Make the right things visible
The most common operation should be visible immediately, reserve menu buttons for secondary functions.

3. Show proper feedback
The action effects should be clear and visible so that the user will understand that the button was pressed because its color changed.

4. Be predictable
Show information that user expects to see as a confirmation to his actions, even a vibro-response will work. Use proper affordances – if something is clickable make sure that it looks in a corresponding way.

5. Be fault-tolerant
Disable UI elements when it is appropriate, use as few modal dialogues as it is possible – sometimes they are very obtrusive.


6. Limit number of choices
The choices should be limited to the most necessary amount. An overflow of choices will only confuse user.

7. Use single click interfaces that dragging,scrolling and double clicking
Keep everything simple. A single-click interface is the easiest to use. More advanced interaction can be used for more advanced actions but still needs to be avoided if possible.

8. Minimize text entry
Look at the keyboard shown above, even if these buttons are wide enough this keyboard is not that convenient to use. Mobile devices have overall slower text entry possibilities. This directs to recommend minimizing text entry and try alternate solutions.

9. Avoid putting interaction targets on hard to reach areas of the screen
The opposite bottom and top corner and the nearest bottom corner are the least comfortable to reach. For example avoid placing targets in the left top and bottom and right bottom corner when using the right hand only

10. Always allow the user to backtrack and proceed in a clear manner
Make it clear how the user can backtrack to make changes and proceed to another part.

***

Touch devices have to balance portability and usability. With the display being the primary interface for the device, this is going to be one of the most important features that will determine much of the rest of the tablet. Because of this, consumers must learn a good amount about the screens to make an informed buying decision. Below are some of the things to consider when creating touch interfaces.

Devices and Displays

The number of screen options (1.8″ up to 14″- Acer ICONIA-6120) is not that wide comparing to the amount of resolutions. The table below shows how many options there exist for the designer.

Be flexible, stretch and compress your layouts to accommodate various heights and widths. On larger devices, take advantage of extra screen space. Create compound views that combine multiple views to reveal more content and ease navigation. Provide resources for different screen densities (DPI) to ensure that your app looks great on any device. So where do you begin when designing for multiple screens? One approach is to work in the base standard (medium size, MDPI) and scale it up or down for the other buckets. Another approach is to start with the device with the largest screen size, and then scale down and figure out the UI compromises you’ll need to make on smaller screens.

Although the system performs scaling and resizing to make your application work on different screens, you should make the effort to optimize your application for different screen sizes and densities. In doing so, you maximize the user experience for all devices and your users believe that your application was actually designed for their devices—rather than simply stretched to fit the screen on their devices.

Typography

The design language should rely on traditional typographic tools such as scale, space, rhythm, and alignment with an underlying grid. Successful deployment of these tools is essential to help users quickly understand a screen of information. To support such use of typography, use fonts that fit the most the requirements of UI and high-resolution screens. You can use following guide to pick the corresponding font for your mobile interface.

Type colors

Do not forget to have primary and secondary color schemes. They are very helpful especially from the point of view of readability. The higher contrast between the colors the easier it is for user with vision disorders to read your message.

Scaling
Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too many different sizes in the same UI can be messy. Give users the possibility to scale fonts manually, this will allow user to adjust the app to his eyes and needs.

Colors

Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast between visual components. Note that red and green may be indistinguishable to color-blind users.

When designing an app you should pay much attention to the color palette as visual presentation makes the greatest impression on the user.

Iconography

An icon is a graphic that takes up a small portion of screen space and provides a quick and intuitive representation of an action, status, or an app.

When speaking about the minimum target size major developers have their own insights on this feature: Apple recommends a minimum target size of 44x44px. Microsoft suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia suggest that the target size should be no smaller than 28x28px (these values are true for MDPI screen, for higher resolutions the size of an icon needs to be increased accordingly). Still these sizes will not fit all users, as it was said earlier we’ve got different fingers and for smallest areas the best solution is a stylus.

For many interfaces the only solution was to increase whitespaces, but it not always a good option, just think about it: you have a screen that is 3” wide and you need to make the touch area’s size wide enough that even the thickest finger will not miss…unfortunately this is not an option. Designers rely on the grid the number of set sizes that were chosen by the trial and error method.

Launcher

The launcher icon is the visual representation of your app on the Home or All Apps screen. Since user can change the Home screen’s wallpaper, make sure that your launcher icon is clearly visible no matter how bright or dark wallpaper is.

Action Bar

Action bar icons are graphic buttons that represent the most important actions people can take within your app. Each one should employ a simple metaphor representing a single concept that most people can grasp at a glance.

***

Still, when designing a touch interface there are hundreds of other things to be considered. In this blog post we’ve covered a tiny bit of them, though we tried to pick only the most important ones. Each of the elements mentioned above has to be paid great attention because overall usability of an interface or an app depends much on the ability of these components to deliver a pleasant experience for the user.

The guidelines are a good support to avoid pitfalls, but to create successful design it is still important to test it on the actual end-users and take their knowledge and expectations into account, that’s why don’t forget to engage your friends into the testing process, that will be not only fun but a useful experience for you as a designer.

Comments are closed.