Transcript Designing the User Interface - Northern Illinois University

Designing the
User Experience
“It’s not wise to violate rules until you know
how to observe them.”
T.S. Elliot
“And then you can violate them when you have
good reason to do so, with full understanding
of the consequences.”
P. McIntire
Introduction
• “Style is a simple way of saying
complicated things.” Jean Cocteau,
French poet, novelist, and playwright.
2
Introduction
• Jonathan Ive, Apple designer:
"There is a profound and enduring beauty
in simplicity, in clarity, in efficiency. True
simplicity is derived from so much more
than just the absence of clutter and
ornamentation — it’s about bringing order
to complexity.”
3
Introduction
• If designers do their job properly,
visitors won’t even notice how
successful the designers were – the
design is transparent.
• A good web site is designed to work the
way people think.
4
Introduction
• Two opposing camps in web
construction:
– The Jacob Nielsen usability camp – web
pages should not be pretty, they should be
usable.
– The “web as an experience” camp – web
sites should take advantage of the
uniqueness of the medium, stretch the
limits of the medium, challenge/engage/
mystify/amuse/enthrall the visitor.
5
Introduction
• Both are right, and both are wrong.
• Most of us don’t have the freedom to
design off-the-wall “experience” sites;
we are creating sites for businesses.
• On the other hand, there is no reason
those sites need to be plain vanilla.
• We are going to try to make sites that
are both engaging and usable.
6
Introduction
• If you create a web site, you are indeed
going to be a designer whether you
want to be or not. It’s your choice as to
how good it is going to look.
• Good web sites are:
– Technically solid
– User-friendly
– Aesthetically appealing
– Easy to maintain (flexible, scaleable)
7
Introduction
• This next series of lectures will examine
creating a well-designed user interface
that is aesthetically appealing.
8
Introduction
• Remember, we don’t have complete
control over how our web pages display
on the visitor’s system:
– Colors and fonts display differently on
different browsers, on different monitors,
and on different systems, because of varying
brightness, resolution, and color handling.
– WYSIWYG should be WYSINNWYG (“What
You See is Not Necessarily What You Get”).
9
Introduction
– Computers are usually shipped configured to
a display that is one or more steps down
from what that system is actually capable of
displaying.
• It never even occurs to the majority of users that
they can easily change their display properties.
– Commands that work in one browser don’t
always work in others.
10
Introduction
• These factors make designing a good
web page much more difficult than
designing a good printed page.
– As a developer, you probably have the latest
and greatest monitor, graphics card,
browser, and plug-ins, as well as lots of RAM
and a really fast connection.
– Keep in mind that the majority of visitors
don’t have all that.
11
Introduction
• On the other hand, we have some really
cool tools like animation and “free”
color that we don’t have on a printed
page.
• It’s a fascinating and frustrating tradeoff.
12
Analysis
Analysis Introduction
• Why analysis? To avoid the following
scenarios…
– “Hey, you go ahead and start coding while
I go out and ask the users what they
want.”
– The pilot’s “good news bad news” scenario.
14
Analysis Introduction
• Don’t just sit down and start writing
HTML in order to see progress fast.
• You will end up with a poorly-designed
site that is difficult to navigate.
• Spend the time, effort, and money up
front, to avoid disaster later.
15
Analysis Introduction
•
The first steps of analysis:
1. Identify the purpose of your site.
2. Identify your target audience.
3. Analyze the tasks that will be performed
on the site.
16
Identify the Purpose of the Site
•
There are four basic purposes of web
sites:
– To make money.
– To disseminate information or
opinions.
– As a front end for a business
application.
– To stroke someone’s ego.
17
Identify the Purpose of the Site
• Purpose 1: to make money.
– Most web sites fall under this category.
– The owners of these sites include
corporations, small businesses, dot.coms,
and non-profit organizations.
– B2B (Business to Business) sites fall under
this category.
• This is one of the hottest types of online
business today.
18
Identify the Purpose of the Site
– Visitors’ goals on these sites include:
• Researching products.
• Purchasing products.
• Obtaining service.
19
Identify the Purpose of the Site
– Principles of making money on the web:
• It’s not about art.
• It’s not about ego.
• It can and should be about information.
• It’s mostly about money.
20
Identify the Purpose of the Site
• Purpose 2: to disseminate information
or opinions.
– Types:
• Corporate intranets, for publishing internal
documents.
• Educational institutions, like NIU.
• Odds and ends of other sites: e-zines, health
and hobby sites, fan sites, opinion sites
(religious, political, and social).
21
Identify the Purpose of the Site
– Visitor goals:
• To obtain information.
• To read or express opinions.
22
Identify the Purpose of the Site
– Principles of disseminating information and
opinions on the web:
• It’s not usually about art (unless the topic itself
is art).
• It may or may not be about ego.
– For instance, a political opinion site may very well be
about the ego of the person whose opinions are
displayed.
• It’s mostly about information.
• It’s generally not about money.
23
Identify the Purpose of the Site
• Purpose 3: as a front-end for a business
application.
– Intranets, extranets.
– BUI/Browser User Interface as opposed to
the traditional GUI/Graphic User Interface.
– Visitor goals:
• To get a job done, with maximum efficiency
and speed and minimum training, errors, and
hassle.
24
Identify the Purpose of the Site
• Purpose 4: stroking someone’s ego,
perhaps even your own.
– This includes personal sites, many opinion
sites, and odds and ends of other types.
– Principles of ego-based sites on the web:
• It
• It
• It
• It
can be about art.
can be about information.
is always about ego.
might like to be about money.
25
Identify the Purpose of the Site
• The purpose of your site determines
everything else, including branding:
– Creating individuality and market value
around the concept of a product or
company name.
– Associating a mood, theme, ambiance,
product category with your company name
and product.
26
Identify the Purpose of the Site
• Effective branding: Oreos, Cheerios,
Ben and Jerry’s ice cream, Godiva
chocolate, Nike “swish,” iPod, Jaguar,
Disney’s “mouse ears”, UPS trucks.
• Bad example: Office Depot versus
Office Max (which one do we have in
town?). What about Staples?
• Ideally, visitors would still be able to
guess the name of the site if we
removed the name from the pages.
27
Identify the Purpose of the Site
• Try to find an organizing metaphor
(that lends itself well to a visual
interpretation) for the site, which makes
design easier.
– United Airlines uses a globe.
– A hotel might use a check-in desk,
concierge desk, restaurant, etc.
28
Identify the Target Audience
• You need to have a precise definition of
the target audience, the people you are
trying to lure into your site.
• If your target audience is college
students who are fans of, say,
Red Hot Chili Peppers, the site should
look and function very differently than if
the target audience is wealthy
executives interested in buying luxury
vehicles.
29
Identify the Target Audience
• Let’s look at some potential audiences
for various type of sites…
30
Identify the Target Audience
• Business site visitors
– Current customers
• They could be checking product facts, verifying
an order, checking shipping on an order, or
placing a new order.
31
Identify the Target Audience
– Potential customers
• How did they get to a site?
– From a banner ad or link on another site.
– From a search engine.
– From printed promotional materials that listed the
URL.
• Might want to have a different entrance page
for each arrival method.
• Remember that the whole point is to get
someone to open his or her wallet.
32
Identify the Target Audience
– Investors
• Every element of your site should promote the
idea that the company is profitable and stable.
• There are legal guidelines about what you can
say to potential investors and how you say it.
– Employees
• Example: the sales force might use the web
site as a sales tool, or all employees might
register vacation days through the web page.
• Intranet visitors might be using secure parts of
the site for traditional transaction processing. 33
Identify the Target Audience
• Non-profit site visitors
– Activists and information-seekers
• Give them the information they need to support
the cause.
– Donors
• They need information as well, plus they need
to be convinced that the organization is
legitimate and stable and will use donations
wisely.
34
Identify the Target Audience
• Informational site visitors
– These visitors generally fall into two
categories:
• Internal visitors
• External visitors
35
Identify the Target Audience
– Internal (intranet) visitors, mostly
employees.
• There are often serious security issues here.
– Example: A credit card company, where some
employees have access to all of a credit card holder’s
personal data, while others have access only to
name and address or some other subset of data.
• Intranets generally have access to much higher
bandwidths that do public websites, so
download time is not such a critical issue.
36
Identify the Target Audience
– External visitors – those accessing a public
web site.
• The most important factors are organizing the
information (which might be extensive) so that
even casual visitors can find what they are
seeking and minimizing bandwidth problems.
37
Identify the Target Audience
• Opinion site visitors
– Those accessing the site might support the
opinions presented, might disagree with
those opinions, or might be looking for
information so that they can form an
opinion one way or another.
38
Identify the Target Audience
• Ego site visitors
– The audience for an ego site is usually its
creator and the more tolerant family and
friends of that creator.
– If you are building an ego site, you have at
least the potential of drawing a larger
audience if you make it informational as
well.
39
Identify the Target Audience
• Regardless, create visitor profiles, including:
– Health, age, and gender: implications for font size,
color issues, accessibility
– Education: writing style, complexity
– Language: English only versus alternate versions
– Income level: who wants to or is able to buy what
you are selling?
– Computer experience: tutorials, help files
– Expectations: theme, behavior, visitor interface
structure
– User goals: what do they want to accomplish?
40
Identify the Target Audience
• Create visitor profiles (continued):
– Best Buy trains their new employees to
recognize around eight different “typical”
customers.
• “Jill” – named from the mom on the old Home
Improvement TV series – kids, educational
software, etc.
• Another one is a busy business exec.
• Another one is a young, male technology
addict.
41
Identify the Target Audience
• You also need to identify the kinds of
computer systems your audience will be using
to view your site.
• You will be making design decisions based
upon this knowledge.
– For instance, bandwidth considerations are less of
a concern if all of your visitors are on high-end
systems within a corporate intranet.
– They will be a major concern if some of your
visitors are on low-speed, dial-up lines.
42
Task Analysis
• Identify the tasks the visitors will
attempt to complete, the order in which
those tasks will be executed, and things
that could be done to expedite the
entire process.
• Called a scenario or use case: a set of
possible sequences of interactions
between systems and visitors in a
particular environment and related to a
particular goal.
43
Task Analysis
• Can document this in the form of a flow
diagram for complex tasks.
• Analyze how often and with what
frequency they will perform each task.
– More frequent tasks should take priority.
– Less frequent tasks need more handholding.
44
Task Analysis
• What if the user doesn’t complete the
task?
• What to do if errors?
45
Analysis Summary
• Ask the clients what they need!
• Client survey forms http://www.webredesign.com/chapter3.html
46
Information Architecture
• Categorizing and structuring
information
• Content + Context + Usability
47
Information Architecture
• Well-designed web sites are usually a
hierarchy:
– The home page.
– The main topic pages, just under the home
page.
– The subsidiary pages – any page under a
main topic page or another subsidiary
page.
48
Information Architecture
Penny’s
Home
Home Page
Page
1.
Contact
Main
topic
Info
page
2.
Main
Web topic
101
page
3.
Main topic
page
2.1
Subsidiary
Syllabus
page
2.2
Assignments
Subsidiary
page
3.1
Subsidiary
page
4.
Main
Funnies
topic
page
3.2
Subsidiary
page
5.
Personal
Main
topic
Stuff
page
5.1
Subsidiary
page
Typical links include forward, backward, to home page, to all
main topic pages, and horizontal links between sibling pages.
Information Architecture
• The prior diagram is a good
visualization tool, but a lousy
documentation tool.
• Instead, document the site structure in
a text hierarchy, like on the following
page (the way we require it for the site
plan for this course)…
50
Information Architecture
Home Page
1. Main topic page
2. Main topic page
2.1
2.2
Subsidiary page
Subsidiary page
3. Main topic page
3.1
3.2
Subsidiary page
Subsidiary page
4. Main topic page
5. Main topic page
5.1
Subsidiary page
51
Information Architecture
• Some WYSIWYG editors (like
Dreamweaver) let you create a
hierarchy chart with drag-and-drop, and
you can even name the pages as you
do it so that it creates a skeleton HTML
file for each page.
52
Information Architecture
• You must decide:
– What should go on the home page.
– What should go on the main topic pages
under the home page.
– What should go on subsidiary pages under
the main topic pages.
– The navigational aids needed to get from
one area to another.
53
Information Architecture
• The home page should give an
overview of the navigation of the entire
site.
• You can view the home page as the
equivalent to the cover or table of
contents of a magazine; if viewers don’t
see anything of interest, they won’t
browse any further.
54
Information Architecture
• The home page should convey:
– The purpose of the site – the who, what,
where, and why.
– The content buried within the site.
– How to find that content.
• If it isn’t important, it shouldn’t be on
your home page.
55
Information Architecture
• Each main topic page under the home
page should convey what lies
underneath.
• Subsidiary pages show the actual
content.
56
Information Architecture
• Organizational possibilities:
– By importance or frequency: the most
important or frequent items first.
• On country codes, US sites list USA first.
– By users: employees, clients, investors.
– By topic: products, services, contact
information.
– By task: order product, get technical specs,
contact us.
– By department: Sales, Human Resources,
57
Manufacturing.
Information Architecture
– By product categories: desktop systems,
laptop systems, accessories.
– By alphabet: only if the visitor knows the
name of what he or she is looking for.
– By geography, chronology, or metaphor:
obviously, when appropriate.
– But be careful: bad examples include
professional versus amateur (photo site)
and business versus home (Epson
printers).
58
Information Architecture
• Hybrid sites use a combination of
schemes.
– Can be difficult for visitors to form a
mental model of the site.
– Easier if grouped in separate menus.
59
Information Architecture
• Hierarchies can be broad and shallow,
• Or narrow
and deep.
60
Information Architecture
• Although traditional user interface
design rules called for a maximum of
seven choices on a menu, web usability
studies are showing that visitors prefer
broad and shallow systems instead.
– Visitors want to avoid downloading any
excess pages.
– Smaller top-level menu choices can end up
requiring vague wording, which hides what
the visitor needs.
61
Information Architecture
• Large, complex sites might make use of
multi-level menus; drop down or pop up
sub-menus on click or mouseover of a
top-level menu item.
62
Information Architecture
• Organizing the site files:
– Typically separate folders for at least images,
original images (native PNG and PSD files), CSS,
JavaScript.
• An aside: Do NOT keep your original images (PNG or
PSD) out on our web server – only the optimized gifs,
jpgs, and pngs actually displayed on your site.
– Name all files relatively, then you can port the
entire site unchanged to the server when it is
done.
– Name files by function, not by a style attribute.
• Good: add_button, go_back_button
• Bad: blue_button, 3_d_button
63
Creating a Web Site with Appeal
• Appeal means that visitors enjoy and
become engaged in site.
• The buzzword these days: experience
design: draw the users in, engage them.
• Think of a restaurant in which the food
and the décor and the service are all a
part of the experience, like Olive Garden.
• Or a store like IKEA or Neiman Marcus
64
(again, branding).
Creating a Web Site with Appeal
• Five attributes of a web site with appeal:
– It should look good and be appropriately
designed for its purpose and its audience.
• Professional, or fun, or cutting edge, or…
– The experience must be unique to the
medium.
– It should, if possible, evoke emotion.
– It must be functional: easy to use and
navigate.
– It must be marketed properly.
65
Creating a Web Site with Appeal
• For any site, the designer should use
restraint.
• For instance, gratuitous animation
increases download time, perhaps so
much so that people who might stick
around to make a purchase instead
leave the site, defeating the site’s
purpose.
66
Creating a Web Site with Appeal
• Also, you will have to learn to throw
away some of your best ideas, or at
least save them for a different project:
– "The key is not being married to an idea
simply because it's your idea. Stay open."
Mike Carroll, author, as quoted at
www.mcwade.com .
67
Creating a Web Site with Appeal
• Keep a “tickler file” of ideas: color
combinations, layout ideas, whatever,
from magazines, books, articles, and
other websites.
• Check out the competing web sites,
then either be somewhat similar yet
distinguishable, or radically different.
– Branding is key.
68
Creating a Web Site with Appeal
• Study from Stanford University’s
Pervasive Technology Lab, quoting B.J.
Fogg, the director
(http://e.register.com/a/tBActeKAEIqG3
AQB7DgAHnEeZ9F/opt4) …
69
Creating a Web Site with Appeal
• “The number one factor by which
people actually judge Web site
credibility was by their first impression
of the visual design… if it doesn’t look
credible or it doesn’t look like what they
expect it to be, they go elsewhere. It
doesn’t get a second test. And it’s not
so different from other things in life. It’s
the way we judge automobiles and
politicians.”
70
Search Engine Optimization
• Search Engine Optimization (SEO)
depends upon words in:
– Meta tags in HTML?
– URL
– Images: alt and title attributes
– Content: words that occur early in the
content ranked higher than later words
71
Search Engine Optimization
– See http://www.etsy.com/blog/en/2013/4ways-to-improve-yourseo/?campaign_label=etsy_success&utm_sou
rce=newsletter&utm_campaign=etsy_success
_052813_5871075908_0&utm_medium=emai
l&email_sent=1369854362&euid=W35zDOqm
7dHLEOC8BI6O9XvQ9n2T , plus links at
bottom to more articles.
72
For this class…
• Everything must fit on an 800 wide
window (750 usable pixels), with no
horizontal scrolling. Vertical scrolling is
ok.
– We’ll look at why in a lecture or two.
• But you don’t have to stick to websafe
colors – more on that later.
73
Resources
• Jakob Nielsen’s site http://www.useit.com/
(Very ugly, by the way – to Jakob, that’s a
point of pride.)
• http://www.digital-web.com – not updated
after December 2011, but some great
archived articles.
• Web Pages That Suck, Vincent Flanders and
Michael Willis. Sybex: San Francisco, 1998.
http://WebPagesThatSuck.com Great fun!
74
Resources
• Firefox extension tool for testing page
load speeds:
http://developer.yahoo.com/yslow/
• Before and After magazine:
http://www.bamagazine.com . Quite a
few articles and videos are free – see
link further down on page.
75
Resources
• Ten Commandments of Modern Web
Design (Jeffrey Zeldman video):
http://www.adobe.com/inspire/2013/05
/zeldman-tencommandments.html?trackingid=KFMG
Z
76