Will the iPhone change interface design?
With the iPhone, Apple has brought multitouch technology to the consumer market. Ever since people are dreaming, blogging, predicting, rumoring, announcing and hoping that this technology will soon be used in other devices going from cellphones to mediaplayers to multitouch-tablet-computers and even tables ;-) . It is not unlikely that within a few years a large amount of people will be interacting with websites and applications (even OSs) by touching the screen of a device. Let's think of how this hardware evolution could influence interface design for software and websites.
Interaction design:
The beauty of the iPhone is that the sofware is integrated perfectly with the hardware. Each part of the interface is built to be operated directly with your fingers. This is not the case for all the websites, applications and OSs we use today. In the future both mouse operated computers and touchscreen devices will exist next to each other.
One solution would be to split every application/website into a 'mouse version' and a 'touch version'; designing everything so it fits the interface of the user. Digg must have been (one of) the first website(s) to have a seperate iPhone version of their popular website. The site matches the iPhone's screensize and interface animations. Obviously it would be ideal to have a seperate version of each application/website for each device but we all know that's impossible. Even creating one version for mouse-devices and one for touchscreen-devices will take a lot of effort, money and time but it will produce the best results.
Seperate versions for multitouchscreens will probably first be developed in minisites and small applications where creative use of the multitouch capabilities can draw attention and create buzz. Flash designers must be bursting with ideas for multitouch websites with navigation based on zooming, rotating, pulling, twisting, poking ...
For the majority of websites and applications I think it is more likely that the interfaces will be built to suit all devices. How? Let's highlight some aspects that should be kept in mind when making an interface accessible for touchscreens.
No more rollovers:
Like most touchscreens that are operated without a stylus, the touchscreen used in the iPhone doesn't know where your finger is when you don't make actual contact with the screen. This means interface elements will no longer have an 'over' state. It is no longer possible to 'investigate' if something is clickable by moving the mousepointer over it. Therefore buttons and links must be easy recognisable so you immediately now if something is a link/button or not. Apple likes to make use of rollover effects in their OS (dock, exposé, ..) so they'll have to redesign all that if they are working on a touchscreen-powerbook.
Finger-extentions:
The tip of a mousepointer is one pixel by one. The tip of your finger is way bigger and hides the piece of screen you'r interested in wich makes it unsuited for precision pointing. Apple has solved this in the iPhone by adding a virtual extension to your finger. When you drag your finger over text the textcursor appears in a magnifier above your finger. You can imagine this kind of solutions being usefull in image editing where you often want to make selections on pixel level.
Big buttons with lots of spacing:
Because of the size of your finger it is harder to hit small elements. More spacing between elements reduces the chance that you hit two elements at the same time.
The impact of touchscreens on interface design will depend on the popularity of touchscreen devices. Untill today, none of the manufacturers has actually announced a multitouch tablet, operated without a stylus that runs a regular operating system. Time will tell how we will use computers in 10 years.
regards,
Maarten
Interesting links:
design guides for touchscreens (a bit outdated but still interesting)
Bill Buxton's article on multitouch technology
some technical considerations
edit: two more related articles; why do people build custom iPhone website?
on TUAW
on Ryan Irelan's blog
Interaction design:
The beauty of the iPhone is that the sofware is integrated perfectly with the hardware. Each part of the interface is built to be operated directly with your fingers. This is not the case for all the websites, applications and OSs we use today. In the future both mouse operated computers and touchscreen devices will exist next to each other.
One solution would be to split every application/website into a 'mouse version' and a 'touch version'; designing everything so it fits the interface of the user. Digg must have been (one of) the first website(s) to have a seperate iPhone version of their popular website. The site matches the iPhone's screensize and interface animations. Obviously it would be ideal to have a seperate version of each application/website for each device but we all know that's impossible. Even creating one version for mouse-devices and one for touchscreen-devices will take a lot of effort, money and time but it will produce the best results.
Seperate versions for multitouchscreens will probably first be developed in minisites and small applications where creative use of the multitouch capabilities can draw attention and create buzz. Flash designers must be bursting with ideas for multitouch websites with navigation based on zooming, rotating, pulling, twisting, poking ...
For the majority of websites and applications I think it is more likely that the interfaces will be built to suit all devices. How? Let's highlight some aspects that should be kept in mind when making an interface accessible for touchscreens.
No more rollovers:
Like most touchscreens that are operated without a stylus, the touchscreen used in the iPhone doesn't know where your finger is when you don't make actual contact with the screen. This means interface elements will no longer have an 'over' state. It is no longer possible to 'investigate' if something is clickable by moving the mousepointer over it. Therefore buttons and links must be easy recognisable so you immediately now if something is a link/button or not. Apple likes to make use of rollover effects in their OS (dock, exposé, ..) so they'll have to redesign all that if they are working on a touchscreen-powerbook.
Finger-extentions:
The tip of a mousepointer is one pixel by one. The tip of your finger is way bigger and hides the piece of screen you'r interested in wich makes it unsuited for precision pointing. Apple has solved this in the iPhone by adding a virtual extension to your finger. When you drag your finger over text the textcursor appears in a magnifier above your finger. You can imagine this kind of solutions being usefull in image editing where you often want to make selections on pixel level.
Big buttons with lots of spacing:
Because of the size of your finger it is harder to hit small elements. More spacing between elements reduces the chance that you hit two elements at the same time.
The impact of touchscreens on interface design will depend on the popularity of touchscreen devices. Untill today, none of the manufacturers has actually announced a multitouch tablet, operated without a stylus that runs a regular operating system. Time will tell how we will use computers in 10 years.
regards,
Maarten
Interesting links:
design guides for touchscreens (a bit outdated but still interesting)
Bill Buxton's article on multitouch technology
some technical considerations
edit: two more related articles; why do people build custom iPhone website?
on TUAW
on Ryan Irelan's blog
posted by iNuron at 1:11 PM
0 Comments:
Post a Comment
<< Home