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.

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

2

Introduction

• “Style is a simple way of saying complicated things.” Jean Cocteau, French poet, novelist, and playwright.

3

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.”

4

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.

5

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.

6

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.

7

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)

8

Introduction

• This next series of lectures will examine creating a well-designed user interface that is aesthetically appealing.

9

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”).

10

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.

11

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.

12

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 trade-off.

Analysis

14

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.

15


• 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.

16


• 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.

17

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.

18


• 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.

19


– Visitors’ goals on these sites include:• Researching products.• Purchasing products.• Obtaining service.

20


– 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.

21


• 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).

22


– Visitor goals:• To obtain information.• To read or express opinions.

23


– 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.

24


• 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.

25


• 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 can be about art.• It can be about information.• It is always about ego.• It might like to be about money.

26


• 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.

27


• 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.

28


• 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.

29

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.

30

Identify the Target Audience

• Let’s look at some potential audiences for various type of sites…

31


• Business site visitors– Current customers

• They could be checking product facts, verifying an order, checking shipping on an order, or placing a new order.

32

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.

33

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.

34


• 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.

35


• Informational site visitors– These visitors generally fall into two

categories:• Internal visitors• External visitors

36

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.

37

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.

38


• 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.

39


• 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.

40

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?

41


• 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.

42

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.

43

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.

44

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 hand-

holding.

45

Task Analysis

• What if the user doesn’t complete the task?

• What to do if errors?

46

Analysis Summary

• Ask the clients what they need!• Client survey forms

http://www.web-redesign.com/chapter3.html

47

Information Architecture

• Categorizing and structuring information

• Content + Context + Usability

48


• 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.

3. Main topic

page

3.1 Subsidiary

page

3.2 Subsidiary

page

5.1 Subsidiary

page

Penny’s Home Page

PersonalStuffFunnies

Syllabus Assignments

Contact Info Web 101

2.1 Subsidiary

page

2.2 Subsidiary

page

5.Main topic

page

4.Main topic

page

Home Page

1.Main topic

page

2.Main topic

page


Typical links include forward, backward, to home page, to all main topic pages, and horizontal links between sibling pages.

50


• 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)…

51

Home Page1. Main topic page2. Main topic page

2.1 Subsidiary page2.2 Subsidiary page

3. Main topic page3.1 Subsidiary page3.2 Subsidiary page

4. Main topic page5. Main topic page

5.1 Subsidiary page


52


• 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.

53


• 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.

54


• 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.

55


• 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.

56


• Each main topic page under the home page should convey what lies underneath.

• Subsidiary pages show the actual content.

57

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, Manufacturing.

58

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).

59


• 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.

60

• Hierarchies can be broad and shallow,

• Or narrow and deep.


61


• 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.

62


• 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.

63

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

64

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 (again, branding).

65


• 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.

66


• 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.

67


• 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 .

http://www.mcwade.com/

68


• 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.

69


• Study from Stanford University’s Pervasive Technology Lab, quoting B.J. Fogg, the director (http://e.register.com/a/tBActeKAEIqG3AQB7DgAHnEeZ9F/opt4) …

70


• “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.”

71

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

72

Search Engine Optimization– See

http://www.etsy.com/blog/en/2013/4-ways-to-improve-your-seo/?campaign_label=etsy_success&utm_source=newsletter&utm_campaign=etsy_success_052813_5871075908_0&utm_medium=email&email_sent=1369854362&euid=W35zDOqm7dHLEOC8BI6O9XvQ9n2T , plus links at bottom to more articles.

http://www.etsy.com/blog/en/2013/4-ways-to-improve-your-seo/?campaign_label=etsy_success&utm_source=newsletter&utm_campaign=etsy_success_052813_5871075908_0&utm_medium=email&email_sent=1369854362&euid=W35zDOqm7dHLEOC8BI6O9XvQ9n2T







73

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.

74

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!

http://www.useit.com/

http://www.digital-web.com/

http://webpagesthatsuck.com/

http://webpagesthatsuck.com/

75

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.

http://developer.yahoo.com/yslow/

http://developer.yahoo.com/yslow/

http://www.bamagazine.com/

http://www.bamagazine.com/

76

Resources

• Ten Commandments of Modern Web Design (Jeffrey Zeldman video): http://www.adobe.com/inspire/2013/05/zeldman-ten-commandments.html?trackingid=KFMGZ

http://www.adobe.com/inspire/2013/05/zeldman-ten-commandments.html?trackingid=KFMGZ




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.

Documents

analysis slide

scaleable slide

mcintire slide

good web sites

introduction style

introduction computers

good web page

web construction