This is the content of my “Graphic Design in Context of User Experience Design” presentation I had at uni this semester. Any comments will be very appreciated.
Let’s explain the term “user experience” first
“User Experience” means how users feel when using a product, if they like or dislike using it and determines if they will use it again.
What is the aim of UX design?
Donald Norman, author of The Design of Everyday Things, says:
“It doesn’t matter if you used a device hundred times successfully – you will remember the unsuccessful attempt.”
The main goal of UX design is to create product, which users will be able to use successfully with a pleasure – and will keep using it.
How does it relate to Graphic Design?
Let’s start with the User Interface – this is one of the most crutial parts of the product – determines, if the users will understand what the product is for, how to operate it and how to accomplish their tasks when using it.
User Interface is the actual meeting plane of the product’s features with the users‘ needs.
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
says Ben Shneiderman, a professor for Computer Science at the Human-Computer Interaction Laboratory at the University of Maryland.
When users see an interface, they create a “conceptual model” in their mind – they are trying to figure out how the product works, how they shall to operate and accomplish desired task.
For example, what shall they do to write an e-mail on a computer, play a game on a mobile phone or buy a new coffee machine on the ecommerce website.
So the role of User Interface designers is very important. They not only influence the visual part – how the product look – but how users use it and interact with it.
What does make a design successful?
I really like this quote from Steve Jobs:
“People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”
Today, good design is (strangely) often synonym for aesthetics. But it isn’t that simple – good design is mainly about good user experience.
Let’s have a look what iPhone Human Interface Guidelines says:
“Appearance has a strong impact on functionality: An application that appears cluttered or illogical is hard to understand and use.”
Good design isn’t about pixel-pushing, about making logos bigger, changing colours and accidental decisions. Doing design is not painting – design is a result of strategy planning, research and user testing, deep knowledge, experience… of course I can’t forget inspiration, creative process and careful visual communication.
So is UX design just about the user?
It may seem so, but the answer is no. We do not design only to satisfy users’ needs, but to meet strategic plans, needs and goals of our company, our company’s customer, product manufacturer or whoever we work for.
OK, let’s summarize it – what is UX Design about after all?
UX design is not just about aesthetics – it’s about understanding users´ behaviour and needs, though aesthetics is important part of user experience.
UX designers concentrates on creating a product which people will enjoy using, won’t struggle and will use again.
Now let’s have a look at 4 examples, explaining basic principles of user-centered design:
Visibility
Visibility is about what it says – making things visible. It’s about delivering important information in comprehensive, visible and understandable form.
It’s about letting users know what options they have at the moment, where they are in the hierarchy of the navigation and where they can go.
It’s simply about letting the users know the important and relevant information, relating to the task they are performing.
Feedback
Feedback helps users to find out, if their action had desired effect, if the device is working or if something went wrong.
Feedback can provide a number of found items on search, a progress bar showing how long it will take to finish the task or the roll-over state on the button or an e-mail confirming your order.
Affordance
Affordance is a term from psychology of materials and describes, how human brain assigns different attributes to different objects.
For example – wood affords burning, glass affords looking through or breaking, a door-handle affords pulling, button affords pressing, a roller affords rolling.
What it actually means for us? Well the same, what objects afford in real world, they afford in the virtual world on our screens.
Affordances are often used in metaphorical way – to become so called Matephors; and help users to understand how to cope with the device, software or website. A folder is for storing documents, a form is to be filled in, a button to be pressed etc.
Constraints
Constraints forces us to operate the device in a way leading to successful completion of the task.
Constraints can help us to avoid an error, to perform an action when we want and not accidentaly, or to force us to provide correct information.
Constraints may také a form of a forcing action, allowing us to proceed with the task only if we correctly completed the previous step.
Historical and contemporary aspects
Let’s have a look at historical and contemporary confrontation of telephone interface design from UX point of view now.
The history of a telephone dates back to the invention of a Morse telegraph in the first half of the 19th century.
Though the device itself had pretty simple interface, it wasn’t very user friendly. The operator had to translate the message into the Morse code and then operate a bar to send the message to the receiver.
The receiver than on the other end of the line had to intercept the message and translate it back from the Morse code.
So only skilled operators with knowledge of the Morse code were able to successfully send and receive a message.
In 1876, Alexander Graham Bell was awarded a by US Patent and Trademark Office for invention of a telephone – and that was a real breakthrough.
The actual interface of the early telephones was quite complicated – an operator had to use a crank on the side of the telephone to ring the phone on the other end of the line.
The users were forced to hold an earpiece and microphone in both hands, because they were separated.
The evolution of the telephone brought several improvements to the interface:
- a dial
- a “switchhook”, on which an earpiece was hung if not in use – previous phones required the user to operate a separate switch
- and a seamless handset connecting the earpiece and microphone into one
Finally, in the 2nd half of 20th century, with rapid evolution of technology allowing manufacturers to introduce new functions, and with the hot competition, forcing the manufacturers to reduce research, design and development costs, the classic telephone as we knew it changed.
The new phones had couple of things in common – lots of different functions, rows of similar looking buttons and a user manual you had to read and remember, if you want to use all these functions.
Users were forced to create complex conceptual models – which buttons in what order to press to perform a desired action.
Let’s have a look at an example
Doro Congress 205 Business Telephone with LCD Black
This telephone features these functions:
- headset connection with line button
- computer/fax connector and mute button
- 20 direct non-volatile memories
- On-hook dialling with LED indicator
- Speakerphone
- One-touch memory dialling (on/off)
- Message waiting and visual ringing indicator
- Hold, headset and microphone muting have LED indicator
- Time break recall/earth recall
- Adjustable receiver, ringer and speaker volume and ringer pitch
- PBX message waiting
The Amazon.co.uk user “TreeHouseCoach (Oxford)” says in his review:
“The phone has some features (such as ringtones) where the manual doesn’t tell you how to set them. I had to contact their helpline, only to find out that the settings are hidden behind a screwed-on panel.
There are speed dial buttons, but you can see from the picture of the phone that there isn’t a place beside the buttons to write names (they are 5mm apart). This phone seems to me to have poor usability overall. I wouldn’t buy it again. In fact, I’m shopping for a replacement, and I’ve only had this about 2 months.”
What do I think is wrong with this phone’s design from the User Experience point of view?
First, conceptual models
For example, when I use the telephone on my desk at work, and need to transfer the call to one of my colleagues in another office, I need to perform a sequence:
*1 to put the calling person on hold, than press 103# to dial a colleague and finaly *3 to transfer the calling person over.
Would you remember that? I don’t.
Basically, users need to remember which buttons to use in what order. This is a conceptual model.
Users are forced to create such conceptual models for every action they want to perform, for every function they want to use, mainly due to the design of the phone, which is nowhere close to being self-explanatory.
Another problem is lack of constraints
User has no guidance what buttons in what order to press, apart from the user guide.
Errors are common and there is no way how to precede them. And of course, there is no option for “UNDO” either.
And finally, lack of visibility
All buttons are often similar looking, same size. Display is often unused or shows information not relating to desired action.
As you can clearly see, there are several major flaws in the phone’s design.
Now let’s have a look on Apple’s iPhone
iPhone is a sort of phenomenon today. Though it’s just one of the broad range of touch-screen phones with dedicated OS on mobile phone market, couple of years ago iPhone was major breakthrough in the industry.
There are many reasons which makes the iPhone special, but I believe the main one is careful User Experience Design.
What are the iPhone’s features, which I think are crucial?
“Good design is also an act of communication between the designer and the user, except that all the communication has to come about by the appearance of the device itself. The device must explain itself.”
Donald Norman
Metaphors
iPhone’s interface is built around “Metaphors” – a software representation of the object or action in real world.
I mentioned them, when I was speaking about constraints.
For example – a “Folder” on our desktop is a software metaphor for a real folder we use to store documents in.
When a Metaphor is used as a part of the interface, users can easily understand its function.
Metaphors are self-explanatory – a sort of Holy Grail of User Interface.
Users are not forced to create a complicated conceptual model but immediatelly see, what the particular function is for or use their intuition to perform actions in the same way they would perform them in a real world.
Direct Manipulation
“A great user interface follows human interface design principles that are based on the way people—users—think and work, not on the capabilities of the device.”
iPhone OS Reference Library
Users operating a phone with many different buttons are forced to create complicated conceptual models.
They need to understand and remember what particular buttons do, how to get the cursor to the desired location, how to navigate through menu etc.
In contrast, due to its touch-screen and gestures, iPhone users perform actions just with their fingers, without need for creating additional conceptual models.
People feel they control something tangible, not abstract.
Conclusion
I hope you enjoyed the presentation. Now I am going to summarize what I learnt and what I consider the most important rules we, designers, should follow.
Questions we should ask before starting a design project:
- how do we (or the company we work for) want to benefit from the project? What’s the plan and strategy behind? Is it just stand-alone project or part of ongoing ad campaign?
- how our users want and will benefit from the product?
- who actually are the users?
- what are their needs and problems? What do they like and what makes them to struggle?
The most important thing I learnt is that designers should learn – even more – about:
- how people think, behave and interact (to learn more about psychology, human – computer interaction)
- about UX design and Interactive Design methods and process
I believe it’s important to keep in mind major design principles:
- visibility
- affordance
- feedback
- constraints
And of course, prototype and test the design, observe users and when the product is launched, to measure it’s success.
Digg This
Delicious
). But what you get if you touch Jet? Honestly, I was confused at least by the left-hand-side pallete of widgets.
) But no, this is not the subject I want to concentrate on and build my career around.
