Adult Web Design

UX and Touch Screen

31.10.2013
 
The introduction of Windows 8 saw a massive overhaul of the Windows user interface in line with the Windows Phone interface in order to be more intuitive for people using touch screens, and Apple have subtly been adapting OSX over time, streamlining features that are becoming increasingly shared across their mobile and desktop operating systems. Whilst we have yet to see a touchscreen Mac, it’s obvious that the touch screen revolution is looming upon us with users spending more and more time on their mobile devices than home PCs.
With this in mind and an ever increasing proportion of browsing taking place on smartphones and tablets, websites must decide how they will adapt to people accessing their content without a mouse and keyboard. Whilst the default response to this has often been ‘just make a separate mobile interface!’, a solution that has worked well in the past on smaller mobile devices such as phones, there is very little scope for the middle group occupied by larger phone and tablet displays.
You may be saying to yourself that you go to web pages all the time on your iPad and you don’t like it when they create a specific mobile version that you have to use instead of the full site. After all the iPad and Android tablets can view standard web pages without a problem, there is no need to create a mobile version for them. Or is there?
While the iPad and Android tablets handle full-sized websites with ease, there is one interface aspect that is different: touch screens.
Touch screens may not seem all that different from clicking with a mouse, but there are a lot of things that you just can’t do with a touch screen, or you can’t do easily. And with the growth in the touch screen tablet market growing, if your website doesn’t keep up, it will be left behind.
 
Some Basic Rules
Tapping is not accurate — Unless the customer has the fingers of a toddler, even with the very accurate software controls, it can be hard to tap and be precise.
Gestures are different from taps — In order to scroll a long page on a touch screen, the user swipes one finger up the browser window. This may not seem significant until you realize that browsing with a mouse, you move the mouse down.
Two (and more) finger taps — A user can use multiple finger taps on the device at the same time to control it.
High glare devices — The screens of most touch screen tablets are made out of a sturdy glass. This means that they can be very hard to read, with a lot of glare, in bright light situations. Plus, with all the touching, they get finger prints and smudges on the screen that can affect how your pages look.
On screen keyboard — While some users have a wireless keyboard they connect to their tablets, most tablet users use the on-screen keyboard for data entry. And these can result in some hilarious typos (if you ever see the word “TE” where it should say “the” in my text, you know I was typing on my iPad), as well as being difficult to use.
Because of these features of the device, web designers need to remember some basic design rules for touch screen users:
Don’t place clickable items too close together — There is no hard and fast rule defining how close is too close, but lists of links, especially in a small font size can be very difficult to navigate by clicking (tapping) with a fat finger. It can be annoying to have to zoom in just to try and click a link. This is true for both buttons as well as links.
Hierarchies can be hard to keep open — One popular form of dynamic menu uses JavaScript to open a sub-menu when the user clicks and then hovers the mouse over the sub-menu. These states can be very difficult or impossible to use on touch screens because they either don’t stay open or won’t close.
Move links and clickable areas away from the right edge of the window — Most people are right handed, and tend to scroll on that side of the screen. Since scrolling is done with a gesture, sometimes it is possible to start the swipe on a link by mistake. Users can get annoyed if they wanted to scroll on the page and instead ended up accidentally tapping a link. By moving your links away from the right side, you can help them avoid this.
There is no mouse — And this means that there is no mouse pointer. You should not rely on the mouse pointer changing to help indicate that something is clickable.
Hover states don’t exist — As a corollary to the above, since there is no mouse, there is nothing to hover with. A link is either clicked (tapped) or not on a touch screen device. This means you can’t rely on hover states such as color changes, tool tips, or status bar changes.
Black backgrounds enhance the glare — A site with a black background can be very hard to read on a touch screen device because of the glare. Black makes the fingerprints on the devices show up more clearly, blurring the screen. And the black can turn the screen into a mirror reflecting back the users face often more than the text on the screen.
Long blocks of text in forms are hard to write — While it is possible to write entire novels on an iPad or Android tablet, most people don’t like using the on-screen keyboard for long stretches of text. The more your design can make data entry as short and easy as possible, the better.
 
Focused websites vs. responsive websites
Many websites have created subsidiary sites or apps specifically for touch screen users, to allow them to focus on one type of user at a time. One problem is that since the websites are separate they rely on URL redirection which can often lead to problems such as the user being sent to the wrong site from links, or poor redirection as a result of needing redirection to formatted pages for mobile users.
The biggest problem with separate websites for mobile users however, is that often the mobile version lacks features or information that a desktop user receives; features and interfaces often simplified, buttons enlarged and options reduced. This can be solved through using a ‘responsive’ design. A responsive website is designed to be easily viewed on both platforms without losing quality on either one. This also has the benefit that only one website needs to be designed, rather than two, however this often results in compromises for both platforms.
 
Screen orientation and aspect ratio
With multiple resolutions beyond regular monitor sizes means you can no longer think just in terms of standardized screen resolutions and vertical movement. The rapid changes in the technology market have produced screen sizes that differ from model and manufacturer and with all the rumors about so called smart watches we may start to see screens that are no longer restricted to four borders. Mobile screens add further complexity due to the fact that they can be viewed in both a portrait and landscape mode through rotation.
The answer are liquid layouts which self adjust for any resolution and can adapt for both portrait and landscape viewing. Some websites use a liquid layout that drastically changes the look of the website in order to optimise ease of control and use the full potential of the screen based on it’s orientation.
Whilst mice were specifically designed with scroll wheels for easy vertical scrolling many users are migrating to touchpads and touchscreens, and since Apple have embraced the more innovative form of touch-scrolling which is akin to dragging a page rather than scrolling, the more creative idea of horizontal scrolling may not be out of the question. Most apps use horizontal scrolling as a tool and by far the greatest success in horizontal scrolling is the kindle, so why not implement it into your web UI? Many single page sites have a solely horizontal axis, however they often have to use buttons in order to instigate the scrolling as users may not understand the non-standard format.
Horizontal scrolling may be similar to vertical scrolling in design terms, however the usage of both may open up the possibility of dual-axis scrolling, which may not work in-browser. Many users like to be anchored to an axis, obviously this is usually the x-axis, which is static, so if users get lost on the page they can just scroll up, and be back at the main navigation. On dual-axis sites this may not be as simple, and so navigation may need to be sticky, using a HUD style bar.
 
Basic design differences
There are obvious differences between a touch screen and a desktop that you need to think about when creating your website. On a touch screen you swipe up the page in order to scroll down it, however on a desktop you move your scroll wheel down. Apple have attempted to correct this by consolidating their touch interface technologies into trackpads on both their laptop and desktop Macs, however PC users or even Mac users using conventional scroll wheels or sliders to scroll through web pages are at a disadvantage.
Buttons must be much bigger on mobile devices, as tapping is nowhere near as accurate as clicking with a mouse, there’s nothing more infuriating than trying to click on a link for the next page and accidentally being sent back a page or onto an advert instead. The lack of a cursor also means you cannot have hover states to explain where a link goes, what a word means or even what is clickable.
There is also a difference between accuracy on mobile inputs since touchscreens can have either resistive or capacitive inputs which have varying sensitivities and subsequently accuracy can be lost on resistive touchscreens. Beyond this, designs must incorporate two hugely differing resolutions for mobile devices that have two orientations.
 
Is Your Website Touch Friendly ?
Provide enough room for your visitors’ fingers. 
In order for your users to enjoy a Windows 8 touch experience, you have to make sure you provide enough room for users' fingers. Use no less than 11mm sq. with 2mm of padding around the area.  
 
Avoid placing content behind a hover.
With a regular computer, a person can use his/her mouse to hover over content by pointing without clicking. A tablet or an iPad works differently.  When a person points their finger over content, it will actually click on to the item. 
 
Match your browser with your website.
Arrange your browser for the default touch behaviors that correspond with your website. When someone visits your website from their touch screen device, they will want to pan and zoom. Your browser should be arranged for default touch maneuvers. For example, double-tap-zoom only when double-tap zooming is allowed.
 
Identify input types.
Use HTML5 forms to detect input types (when necessary). This makes a person’s touch experience easier.