Learn Webdesign in under 3 minutes

Website Design in 3 minutes
1

Intended Readers
• UXD’s* , ID’s* , IA’s* and anyone who is involved in the web design
process and who has to pitch the same to his clients.
• People who want to get their websites made by a web design firm –
reading through will make their meeting with the web designer more
effective.
*UXD – User Experience Designer *ID – Interaction Designer
*IA – Information Architect
2
Manuj Dhariwal - Interaction Designer @ CUE

Intent
3
How to convert the client into a UCD*
process evangelist through a short 3
minute story.
To give a better understanding of the web design process:
>>How it should be
And more importantly >>Why it should be the way it is
*UCD : User Centered Design

Have you faced situations like:
You have tackled a complex IA, sorted out the navigation
structure, and then you present the website to the client. And
all he has got to say is “amm could you make that color of
the button more bluish, and maybe change this image”.
Client giving you the look as if you are making a fool of him
when you use terms like card sorting, persona’s, cognitive
walkthroughs……
C: “Why do you need a month, we already gave you the
content.
No-no we don’t need your detailed process , just put the
content in a nice manner for now. Let’s follow the detailed
procedure for phase 2.”
ID : Not knowing exactly how to put the answer to
the question “So what exactly do you do” ; and not
wanting to say “I make websites”.
4
Manuj Dhariwal - Interaction Designer
@ CUE

Talk with your client
• U: “Sir! I think our understanding of - What website design is- does not match,
let me tell you a short (3 minute) story and I am sure after that we both will be on the
same page.”
• C: really ……. Go ahead!
5

Story backdrop
Black – The Story
Grey- For the Designer (U)- checklist
Blue- For the client © to think about/ and take your
help in answering them
• I tell this story through the example of a Company/Client - dailychores.com ( a static
website)
• U have been assigned the job of making the website.
• They have 3 categories of users:
– Primary User - Client ( A person of the level of a CEO in a big organization - wearing a 3 pinned suit and
tie – let us call him Ram)
– Secondary User - Dealer ( A well to do person - A person wearing a Formal full sleeved shirt)
– Secondary User - Employee ( A normal person not earning more than Rs 10,000- A person wearing a
khaki shirt )
6

The Story
• Think of your website as a big exhibition of dailychores.com. A big structure has been
built up for exhibition of dailychores.com.
7

• The words DailyChores written in Big font on the entrance.
8

• Inside there is a big dark alley with many rooms all around.
9

• Many of these rooms even have sub-rooms inside of them , thus making a network of
rooms.
10

• Each of these rooms hold up different type of information in form of posters ,
banners, diagrams inside them.
11

The Green Room
•
Finally at the end of the alley there is a brightly colored green room called as the
“checkout” room or the “contact us” room after which our exhibition ends.
Green Room
12

Visitors
• Now three kind of people will come to your exhibition
1. Mr. Ram – the Client- in a 3pinned suit and tie.
2. Mr. Patel – the Dealer in a Peter England shirt.
3. Hari – the Employee in a khaki shirt.
13

• They have all been given a remote which has a big red button on it. They can press
this red button anytime and vanish from your space.
It can be a information space or a product space ……..
14

• This remote also has a green button on it, which our visitor will press when he is
satisfied & happy and wants to contact you( buy your product)
• Now at this very moment Mr. Ram(client) has come to visit your exhibition.
15
Think: how will they be satisfied
(when their goals are met without undue hassle)
Introduces –user goals

Welcome Home
• The 1st thing he sees on entering your exhibition is the entrance called as the HOME
– He sees the name dailychores written on the top of HOME with a tagline.
– There's also a video being played on a screen telling about dailychores.com
( flash animation/image slideshow…).
16
Think : What story or message would you
like to tell them about dailychores.com

He looks around a bit to figure out:
1. Where all he can go next, or
3. How to get to the place he has in mind.
17
He looks around a bit to figure out:
1. Where all he can go next, or
2. where should he go next from there, or
3. How to get to the place he has in mind.
Think : where would you want
them to go first
Think : what place do they have in their mind,
when they come to see a dailychores exhibition.
Introduces -navigation structure , user’s mental model, user goals

• We want to atleast make sure that he doesn’t press the RED button just after seeing
our homepage for a while.
What can they do
to help me with
my DailyChores
18

Think : what would make them press the red button
19
THINK - HARD

Remember-Remember
20
Always Remember you will not be
there to guide Mr. Ram through
the exhibition. He is on his own in
this big exhibition of yours.
And whenever he cant find his
way around or feels confused –
he will simply press the button.

• Your ideal scenario would be if you are able to walk him through the exhibition as if
you were there present with him, showing him all the information you want to make
sure he sees and finally take him upto the contact desk and leave him happily.
21
Think : how can you walk him through
without being there?
Introduces : Cognitive walkthrough

T H I N
K!
22
Think: How would Mr. Ram generally move
around in such an information space based
on his prior experience.
Contextual enquiry, Task Analysis, match
between system and real world.
Think: What path do we want him to follow
in this space of ours, according to our needs
and his goals.
Can we actually set Mr. Rams path or flow. If
yes , How?
Task Flow
Think: And how can we help Mr.
Ram(without being there) if he takes a wrong
turn, or gets stuck.
Introduces: Error prevention, Help .

• Mr. Ram goes towards the dark alley with many rooms.
23

• Each room has different type of
information inside it
24

• All the rooms are labeled. Now Mr. Ram is standing in front of these different rooms,
he needs to know about a particular information, hidden in one of these rooms, which
room should he open.
25
Which Room should I choose
Which one
should I go
into

• The labels should guide him as to what to expect inside each room.
Think : how can we have a intuitive naming of the rooms, so that Mr. Ram does not
have to check in 10 different rooms before he finds the required information.
• Establishes need for card sorting
26

Inside the Room
27
Imagine Mr. Ram standing in your information space, in one of
the rooms , in front of a poster filled with appropriate content.
Think : How would you want the poster to look like:
filled with heavy
chunks of text
or instead having a
graphical and visual
representation of your
information
instead of listing down
your process why not
have a process diagram

28
For the Content Writer
Keep the image of Mr. Ram standing eye to eye level with your
poster and reading your content, now with this image in mind , go
about writing the content.
What kind of information would he look
for next, what information does he
expect in proximity of this poster.
What information from this poster is
very critical. If Mr. Ram is in this room
just for 30secs, what all would you tell
him.

Its no ordinary Exhibition
I didn’t tell one special feature of this exhibition:
“Going from one room to other just happens by one CLICK”
( you don’t have to walk )What does this imply?
29
The web-world is very fast!

30
Same goes for your pages, people don’t sit and read them, they scan
through them. It’s almost like reading billboards while going in a fast
moving car, you just remember the keywords.*
This CLICK is the reason why
when people can’t make sense out of your information
space they simply CLICK something else , somewhere else
…………they vanish ……
they go away……
Reference : Steve Krugg – Don’t make me think

U DID IT!
• If you were able to bring
Mr. Ram upto the end of
the alley , into our brightly
colored green room,
without him pressing the
red button till then
JOB WELL DONE!
31

• After leaving your exhibition Mr. Ram would have made an impression about you,
based on the experience he had while in your exhibition.
32
So…how was the experience
Think : What kind of adjectives do you want him
to leave with - about you ,about your website.

Cutting down the construction Cost
• Now ,before directly building the actual exhibition in ,one is to one: brick, stone, and
paint and then noticing over a period of time that not many users are reaching the
green room.
• Many of them pres the red button at some point A of your exhibition and exit.
33

Smoothening the edgy surface at point A later can be really costly in terms of
• Already lost users
• Decreased brand value
• The cost of chiseling actual stone
34

Prototyping your way to success
• Will it not be better first to make a rough structure with paper and cardboard and
have some sample visitor(look alike) walk around in it as if it was the real exhibition.
Introduces: Paper prototype ,Wireframes, low and high fidelity prototype
35

• And then based on his experience and observing how he traversed through
our space, we can identify many pain points like point A and smoothen
them out then and there.
Introduces: Usability testing, Think aloud, Walkthrough , Rapid Prototyping
36
“Paper is easier to bend than Stone”

• Repeating this process, removing pain points one by one, we can ensure that
someone of the profile of Mr. Ram will reach up till our green room.
Introduces : benefits of following a iterative process
37

Now we can go ahead
and build the final structure
with all grandeur and have
a successful launch……..
38

…..…The End
Ooops just one last slide remains ………
39
not

Market Strategy
Now this was the case when there was an exhibition of dailychores on a lonely island.
what if there are other similar exhibitions.
It is here where your marketing strategy , branding will help in bringing Mr. Ram to the
doorsteps of your exhibition in a crowd of several others.
40

Notes (12th December 2008)
• So our job is nicely done if Mr. Ram walks through the exhibition as if you are there
with him, and finally presses the green button …………..
• For a ecommerce website pressing the green button means – buying products form
your site
• For a website representing you or your organization it means “if it is able to
represent you , and have the same impression as that of you meeting a prospect client
one on one”.( or even better :P)
41
Can add in Purpose slide
To make the client and the web designer as partners on the project.
To give the client and even us a better understanding of the web design process:
-How it should be
-and more importantly Why it should be the way it is.
To make the client understand -the meaning and the need of processes like card
sorting, persona , cognitive walkthrough that too in their own language………..
It provides a measure by which the client can chart out the progress of their
website construction in a stepwise manner.

Points still left to consider in this PPT
• Sometimes ppl don’t come thru home – they just directly land up thru a link from
other website or google
42

Learn Webdesign in under 3 minutes

Recommended

Recommended

More Related Content

Similar to Learn Webdesign in under 3 minutes

Similar to Learn Webdesign in under 3 minutes (20)

Recently uploaded

Recently uploaded (20)

Learn Webdesign in under 3 minutes