Top

The Basics of Touchscreen Interfaces and Screendesign

Designers have been faced with some of the most difficult tasks to achieve beauty in aesthetics merged with pragmatism. Interfaces should be designed to work quickly and efficiently – but they should also captivate and charm the people using them. It requires fine balance and a sense of creative ingenuity to craft exceptional interfaces.

featured touch screen display technology

In this post I’d like to express a few components critical to designing for touch-based devices. Screendesign isn’t a new concept but it has been revolutionized through advancing technology. These advances focus on screen size, pixel density, and open source development. Once you can understand the fundamentals of touchscreen design new projects can be viewed from above-the-board without getting bogged down into details.

Designing for All Ages

When building any product it’s vital that you spend time analyzing the target audience. Who would most likely be using the application? This question breaks into a number of genre-specific categories such as interests, gender, tech-knowledge, and certainly age.

kids computer touchscreen keyboards photo

Designing an interface which supports all age groups is easier than you might expect. This is especially true on touchscreens because toddlers and young children can behave a little more intuitively. This opens the door to very simplistic navigation and UI style which triggers a natural sense of connection.

The demographic you shouldn’t be too concerned with is teenagers up into early 30s adults. Most of those people already know a lot about technology, and even if they don’t it shouldn’t take long to learn. So good touchscreen design requires bridging the gap between the very young and middle-aged/elderly – both groups that don’t always know a lot about touchscreen devices.

One of the absolute best methods to learn is by studying what others have done. I’ve learned so much just by analyzing what other successful designers have created. Plus you don’t even need to pay for each application if you can find screenshots online.

Smartphones vs Tablets

Notably there is a large discrepancy between smartphones and tablet devices. Most app designers who have the production capacity will release support for all devices and operating systems(Android+iOS). Tablets offer a much larger screen and also more control for movement.

But how can you manage the differences when designing for touchscreen interfaces? Well to get started you have to pick one or the other. I find that it’s easiest to start with smartphones and build from there. Also keep in mind that each device can have a portrait or landscape view depending on how the phone is held. But not every application needs to support both views – each project will have different needs to be met.

android tablet smart device technology

Things get tricky when you start to expand interfaces for tablet devices. The screen resolutions are similar for iPads but not always for Android tablets. So as a designer you really need to be flexible and willing to change things up as needed.

Ultimately there is very little difference in the way of interactivity. All the same touch-based commands are received in the same order. You just need to design interfaces which are flexible and easy to establish across a broad spectrum of screen dimensions.

Screendesign Overview

The subject of screendesign is very large but makes more sense in the context of touchscreen interfaces. When designing for a screen you need to have a different approach compared to print. These two mediums can be broken down further into specific screen interfaces(websites, mobile apps, desktop software) or print media(CD labels, book covers, magazine ads).

Design is a very broad term but it encompasses many similar facets. In screendesign these facets are limited to whatever makes the most sense in context of the user experience. Or another way of phrasing this is how does the design best-suit the content?

iphone smartphone touch screen photo

Unlike print design, screens are meant for interaction. Screendesign is based on creating interfaces that can withstand mouse clicks and finger taps. Menus should animate, buttons should be clickable, and content should be readable. When discussing touchscreen interfaces we get a little more detailed, but still follow similar rules.

Avoid elements that appear too small for interaction. Keep important pieces of content above-the-fold even on smaller devices. This may be easier designing a mobile app but even responsive websites can accommodate to various screen sizes. The key is to incessantly remind yourself why you’re designing each interface – not just for the theme, graphics, or design style, but for the user.

Mockups & Wireframing

When just starting a new project I’d recommend picking up some wireframing tools and sketching out concepts. These could be on paper or in a program such as Adobe Photoshop. The end goal would be recreating the interface in a very simplistic manner. Touchscreen interfaces can be labeled for the effects and transitions which occur during certain interactions(swipe, tap, etc).

The best part about wireframing is that you can get ideas down rapidly. This step might take a while but you can put down 5-10 new ideas with relative speed and efficiency. Then by choosing an idea from the collection, you can expand that design further with more detail.

ibm app wireframe ui sketch mobile app

Traditionally most designers rely on Photoshop to do mockups. However a new contender named Sketch recently entered the marketplace. This is an excellent program if you have the time to learn how Sketch works. All the tools are very similar and design elements in the document are vector-based by default.

As a screendesigner you want to practice the wireframing and mockup stages as often as possible. These should be your bread & butter coming up with new ideas and fleshing those ideas into a preliminary concept. Touch-centric design often requires a little more finesse mapping out individual actions on the screen. But start off getting familiar with the basic steps of design and you won’t be disappointed.

The sooner you can start practicing touchscreen design the faster you’ll see improvement. Just like any other activity, the more hours you log the more you’ll get out of it. I certainly hope these tips can provide a reliable structure for building confidence in your own capabilities. Touchscreen design is very different from other interfaces but most of the rules have stayed the same – just remember to place the user above all else and you’ll stay on the path towards success.

Jake Rocheleau

Jake is a freelance writer and web developer. He writes articles for numerous blogs on freelancing, Wordpress, CSS3, and jQuery. You can find him all throughout Google and follow his tweets @<a href="http://twitter.com/jakerocheleau">jakerocheleau</a>. Connect with Jake on <a href="https://plus.google.com/117805273496374929333/posts">Google +</a>

No Comments

Sorry, the comment form is closed at this time.