User Experience Design in context of Graphic Design

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.

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.

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.

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.

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.