3/8/2020
DON’T MAKE ME THINK - REVISITED
1
3/8/2020
LIST MOBILE APPS YOU COMMONLY USE
THE WEB ITSELF KEPT
IMPROVING!
2
3/8/2020
USABILITY WENT MAINSTREAM
FIRST LAW OF USABILITY
3
3/8/2020
FIRST LAW OF USABILITY
• DON’T MAKE ME THINK!
• NOTHING IMPORTANT SHOULD EVER BE
MORE THAN TWO CLICKS AWAY..
• SEE HTTPS://WWW.MEDIAMARKT.NL/
THINGS THAT
MAKE US
THINK
NAMES – XYZ CORP IS HIRING
UNCLICKABLE LINKS OR BUTTONS
4
3/8/2020
THINGS THAT
MAKE US
THINK
BOOKING A FLIGHT
– CHOICES DO NOT MAKE SENSE
TRY WITH THE SITES OF YOUR CHOICE AND
RECORD THE OBSERVATION
THINGS THAT
MAKE US
THINK
BOOKING A FLIGHT
– CHOICES MAKE SENSE
10
5
3/8/2020
USERS SHOULDN’T SPEND THEIR TIME THINKING ABOUT
11
HOW WE REALLY USE THE WEB
• WE DON’T READ PAGES
• WE SCAN THEM
12
6
3/8/2020
WHY DO WE
SCAN?
13
14
7
3/8/2020
WE DON’T MAKE OPTIONAL CHOICES. WE SATISFICE.
• WE DON’T MAKE OPTIMAL
CHOICES
• WE SATISFICE WITH THE FIRST
REASONABLE OPTION
• WEIGHING AND ASSESSING ALL
OPTIONS DEPENDS ON
AVAILABILITY OF TIME, HOW
MUCH CONFIDENCE WE HAVE IN
THE SITE AND FRAME OF MIND
• EXAMPLE: GOOGLE SEARCH
15
WE DON’T FIGURE OUT HOW THINGS WORK. WE
MUDDLE THROUGH.
• FACED WITH ANY SORT OF TECHNOLOGY, VERY FEW PEOPLE TAKE THE TIME TO READ INSTRUCTIONS.
• INSTEAD, WE FORGE AHEAD AND MUDDLE THROUGH TRYING TO FIND OUR WAY.
• FOR MOST OF US, IT DOESN’T MATTER TO US WHETHER WE UNDERSTAND HOW THINGS WORK, AS
LONG AS WE CAN USE THEM.
• IF WE FIND SOMETHING THAT WORKS, WE STICK TO IT. WE’LL USE A BETTER WAY IF WE STUMBLE
ACROSS ONE, BUT WE SELDOM LOOK FOR ONE.
• IF USERS “GET IT”, THEY’LL FEEL SMARTER AND MORE IN CONTROL & THEY’LL COME BACK OVER AND
OVER.
16
8
3/8/2020
DESIGN FOR SCANNING, NOT READING
17
INNOVATE WHEN
YOU KNOW YOU
HAVE A BETTER IDEA
TAKE ADVANTAGE OF
CONVENTIONS
WHEN YOU DON’T
18
9
3/8/2020
CREATE EFFECTIVE VISUAL HIERARCHIES
MORE IMPORTANT -> MORE PROMINENT VISUAL NESTING TO SHOW PARTS OF
RELATED LOGICALLY -> RELATED VISUALLY
19
CREATE
EFFECTIVE
VISUAL
HIERARCHIES
NEWS PAPER
EXAMPLE
20
10
3/8/2020
CREATE EFFECTIVE VISUAL HIERARCHIES
FLAWED VISUAL HIERARCHY PROPER VISUAL HIERARCHY
PUT THE HEADING
WHERE IT BELONGS TO
MAKE THE
RELATIONSHIP CLEARER
21
FORMAT
TEXT TO
SUPPORT
SCANNING
22
11
3/8/2020
HEADINGS – USE LOT OF THEM!
FLOATING HEADINGS -
BAD
BAD – SIMILAR VISUALS
CLOSER TO SECTION
HEADINGS - BETTER
BETTER – DISTINCT VISUALS
23
MINDLESS AND PAINLESS CLICKING
• TWO – THREE CLICKS IS A GOLDEN RULE, BUT..
• USERS DON’T MIND A LOT OF CLICKS AS LONG AS EACH CLICK IS PAINLESS AND THEY HAVE
CONTINUED CONFIDENCE THAT THEY’RE ON THE RIGHT TRACK - FOLLOWING WHAT’S OFTEN
CALLED THE “SCENT OF INFORMATION.”
24
12
3/8/2020
MINDLESS AND PAINLESS CLICKING - EXAMPLES
• SCAN ALL THIS TEXT AND
FIND OUT WHETHER I’M A
SUBSCRIBER BUT NOT A
MEMBER, OR A MEMBER, OR
NEITHER ONE
• THEN DIG UP THE
ACCOUNT NUMBER OR THE
PASSWORD TO DECIDE
WHETHER IT’S WORTH
JOINING
25
MINDLESS AND
PAINLESS CLICKING -
EXAMPLES
26
13
3/8/2020
A sentence should contain no unnecessary
words
OMIT a paragraph no unnecessary sentences
NEEDLESS
WORDS for the same reason that:
a drawing should have no unnecessary
lines
a machine should have no unnecessary
parts
27
Reduces the noise level of page
Makes useful content more prominent OMIT
Makes page shorter allowing more of the page NEEDLESS
to see at a glance
WORDS
Happy talk must die
Instructions must die
28
14
3/8/2020
OMIT
UNNECESSARY
WORDS –
SURVEY EXAMPLE
103 WORDS
29
SURVEY TEXT ANALYSIS
& PRUNING
30
15
3/8/2020
PHYSICAL
WORLD AND
WEB
SUPERMARKET
BROWSING
EXAMPLE ANALOGY
31
PHYSICAL
WORLD AND
WEB BROWSING WEB
EXAMPLE BROWSING
ANALOGY
32
16
3/8/2020
WEB
NAVIGATION
CONVENTIONS
33
PRIMARY NAVIGATION - SITE ID, SECTIONS & SEARCH
34
17
3/8/2020
CONSISTENCY AT SECONDARY,
TERTIARY, QUATERNARY... LEVELS
35
PAGE NAMING
• EVERY PAGE NEEDS A NAME
• NAME NEEDS TO BE IN THE RIGHT PLACE
• NAME NEEDS TO BE PROMINENT
• NAME SHOULD MATCH WHAT IS CLICKED
36
18
3/8/2020
Highlight my current location in
navigation bars, lists or menus
Various ways to make the current
location standout
YOU ARE
HERE
37
YOU ARE HERE -
BREADCRUMBS
38
19
3/8/2020
• TABS ARE SELF-EVIDENT AND DRAW ATTENTION
• TABS ARE HARD TO MISS
• TABS ARE SLICK
TABS
39
TRY THE TRUNK What site is this? (Site ID)
TEST FOR
GOOD WEB What page am I on? (Page name)
NAVIGATION What are the major sections of this site? (Sections)
What are my options at this level? (Local navigation)
Where am I in the scheme of things? (“You are here”
indicators)
How can I search?
40
20
3/8/2020
Choose a page anywhere in the site at
Step 1 random.
Look at it at arm’s length or squint so you
EXERCISE Step 2 can’t really study it closely.
As quickly as possible, try to find and circle each of
these items:
• Site ID
Step 3 •
•
Page name
Sections (Primary navigation)
• Local navigation
• “You are here” indicator(s)
• Search
41
THE THINGS A HOMEPAGE
SHOULD ACCOMMODATE
• CONCRETE NEEDS • ABSTRACT NEEDS
• SITE IDENTITY AND • SHOW ME WHAT I’M
MISSION LOOKING FOR
• SITE HIERARCHY • ..AND WHAT I’M NOT
• SEARCH LOOKING FOR
• TEASES • SHOW ME WHERE TO
START
• CONTENT PROMOS
• ESTABLISH CREDIBILITY
• FEATURE PROMOS
AND TRUST
• TIMELY CONTENT
• DEALS
• SHORTCUTS
• REGISTRATION
42
21
3/8/2020
USUAL CONSTRAINTS FOR THE HOMEPAGE
• EVERYBODY WANTS A PIECE OF IT
– MOST DESIRABLE REAL ESTATE
WITH LIMITED SUPPLY
• TOO MANY COOKS – EVERYBODY
HAS AN OPINION ABOUT IT
• ONE SIZE FITS ALL – HAS TO
APPEAL FOR EVERYONE WHO
VISITS THE SITE
43
HOMEPAGE NEEDS TO ANSWER THE FOUR QUESTIONS
ATTENTION WEB DESIGNERS: YOU HAVE 50 MILLISECONDS TO MAKE A GOOD FIRST IMPRESSION!
44
22
3/8/2020
TOP FOUR
POSSIBLE EXCUSES
FOR NOT SPELLING
OUT THE BIG
PICTURE ON THE
HOME PAGE
45
NOTHING BEATS A GOOD TAGLINE!
• A TAGLINE IS A PITHY PHRASE THAT
CHARACTERIZES THE WHOLE ENTERPRISE
• A GOOD TAGLINE IS CLEAR AND INFORMATIVE
• A GOOD TAGLINE IS JUST LONG ENOUGH
• GOOD TAGLINES CONVEY DIFFERENTIATION
AND A CLEAR BENEFIT
• BAD TAGLINES ARE GENERIC
46
23
3/8/2020
47
WORLD’S FIRST
SMARTPHONE
INVENTED ABOUT 25
YEARS AGO BY IBM
WAS NOT SUCCESSFUL
DUE TO BATTERY ISSUE
48
24
3/8/2020
EARLY TOUCH SCREEN BASED
SMARTPHONE MODELS
• LG PRADA - MAY 2007
• IPHONE 1 - JUNE 2007
49
WORLD’S
SMARTPHONE
OWNERSHIP
• HTTPS://WWW.WEFORUM.ORG/AGENDA/2018/03/REMEMBERING-FIRST-SMARTPHONE-SIMON-IBM/
50
25
3/8/2020
MOBILE WEB SITE DESIGNING
• BASIC PRINCIPLES ARE SAME AS DESKTOP WEB SITES DESIGNING
• BUT ON MOBILE, PEOPLE ARE MOVING FASTER AND READING EVEN LESS ON SMALL SCREENS
• THEY NEED TO TAP MORE TO SEE THE CONTENT
• MOBILE APP AND WEB DESIGN AREAS ARE STILL NOT MATURED
• SOME TRADEOFFS NEED TO BE MADE DUE TO SCREEN LIMITATIONS (AND EARLIER DAYS,
NETWORK LIMITATIONS)
51
SOME BASICS – PRIORITIZATION
THINGS TO BE USES IN A HURRY OR FREQUENTLY SHOULD BE CLOSE AT HAND.
52
26
3/8/2020
ALLOW ZOOMING &
PROVIDE A LINK TO THE FULL SITE
53
QUESTIONS??
54
27
