The regular use of touchscreen means web design has to adapt. Designers must decide how they adapt their projects to suit users without mouse and keyboard access and although the development of separate mobile interfaces was the initial move, it’s now much more sensible to design responsively.
1. The Touch screen Revolution and Its Impact on UX
With Windows 8, Microsoft brought their desktop user interface in line with their
Windows Phone – making the overall experience more intuitive for touchscreen
users. Apple on the hand have slowly been making chances to OSX, with features
shared between mobile and desktop operating features. A touchscreen Mac may
not exist yet but the touchscreen revolution is definitely upon us.
The regular use of touchscreen means web design has to adapt. Designers must
decide how they adapt their projects to suit users without mouse and keyboard
access and although the development of separate mobile interfaces was the initial
move, it’s now much more sensible to design responsively.
2. Mobile Focused or Responsive Design
Many designers choose to create secondary websites or even apps
specifically designed for touchscreen users. This gives the designer the
chance to focus specifically on individual types of user in turn. One
problem with a separate website is that a URL redirection is necessary and
there’s more scope for error.
The major problem however that the mobile version is a watered down
version of the desktop website. Features are missing and options are
reduced. This doesn’t have to be the case. Responsive design provides the
same quality experience across all platforms.
3. Design Differences
The basic design differences between a touchscreen and desktop need to
be understood.
Touchscreens require an upward swipe to scroll down whilst on a desktop
you manually scroll downwards. Buttons need to be designed bigger on
mobile devices as tapping is less accurate than when clicking a mouse.
Users will just be infuriated when they’re trying to press in too small an
activation space. Mobile touchscreens also have no cursor so pinpointing
is harder – further highlighting the need for larger ‘touchable’ areas.
4. Screen Orientation and Aspect Ratio
There is no standard screen size any more. The range of different screen sizes is
vast and standardised resolutions are no longer clear cut. Mobile screens are
even more complex with the ability to flip from portrait to landscape whilst in
use.
This issue is solved by liquid layouts. This type of layout self adjusts to any
resolution or orientation. Liquid layouts can also be designed to change
significantly when viewed via mobile devices to put control and user-friendliness
at the heart of the design.
Horizontal Scrolling
The traditional scroll runs from top to bottom but Apple and the Amazon Kindle
brought horizontal scrolling into the picture. It’s an essential element of many
mobile apps and is the only way to mimic the true experience of reading a book
via an e-reading device.
Some sites may choose to add buttons to appear as if the action isn’t horizontal
scrolling but switching between pages in reality it’s the same design element
with just an additional button coded in.
5. Which interface is right?
Not every user interface is suitable for every type of website. Before starting
any project web design professionals need to ask:
• Who is the target audience?
• What is being ‘sold’?
• What impression does the client want to give?
You also need to keep in mind the demographic of users. It’s not all 18-25 year
old but it is more likely younger users will access the site via their mobile
device. For an effective user interface you’ve got to offer your users simplicity.
Big buttons may not be the most attractive idea but they are usually necessary
for successful mobile design. Below are some key features of a successful
mobile user interface.
6. Radial Menus
Using a radial or pie menu is a great example of intuitive design. It makes access
to the inner pages needed much easier for mobile users who can easily get lost in
endless submenus and drop-downs as common in desktop design.
Skeuomorphism
Meaning an element which resembles a real life thing (like the folders on your
Desktop) skeuomorphism engenders familiarity. Familiarity adds further
intuitiveness to any user interface. A successful design that incorporates
skeuomorphism means that from a quick glance you’ll understand the purpose of
the page.
Minimalism
Minimalism is one of the simplest and most effective ways of creating an intuitive
and effective mobile-friendly design. Stripped back to just essential elements the
message of website is key and it’s so sparse and simple that it’s easy to use via
smaller screens. Flat design also comes under this umbrella and works on the
assumption that intuition no longer matters. Interfaces and their uses are now so
obvious and commonly used that a user interface no longer needs to guide the
user, it can simply be a tool.
7. Touchscreen technology cannot be ignored and the development and interest in
flat and responsive design means it can be incorporated without too much
separate work.