interface design an introduction. jma 308/545 – class web site media site live web site

Interface design

An introduction

JMA 308/545 – Class Web Site

http://www.jma.duq.edu/classes/gibbs/jma308/index.htm

• Media Site Live

• Web site

Today’s Objectives

Our Server, check accounts

Designing interfaces- things to think about Krug’s Thoughts: things that make us think HTML | CSS project page

How to access the server

Our Server

Our Server

Your private folder It’s a subfolder of users folder www.jma.duq.edu/users/YourLoginName

Save files (drag and drop files) while in either lab (CH205, CH345)

You can also FTP to there from home…

www.jma.duq.edu

How do I access the server?

Access from either CH345 and CH205 Start >> Computer (Z: Drive)

OR

\\jma1\users\username

How do I access the server?

From dorm or home

ftp://www.jma.duq.edu/users/YourLastName

Example: ftp://www.jma.duq.edu/users/gibbs/

You will be prompted for your user name and password Use the same name and password you used to login to

Windows

And The PUB folder

The User Folder

www.jma.duq.edu

USERS

www.jma.duq.edu

Folder

File

File

File

File

PUBFolder

Folder

Your Space

John DoeUSERS

File

File

FileFile

PUB Folder

Folder

Gibbs

www.jma.duq.edu

Users

My user folder

All files for Web must be in PUB

All files for Web must be in PUB

USERSUSERS

Server: www.jma.duq.edu

DoeJones Gibbs Pub

JMA308

inde

x.ht

m

http://www.jma.duq.edu/users/gibbs/pub/jma308/index.htmhttp://www.jma.duq.edu/users/gibbs/pub/jma308/index.htm

Make JMA308/545 folder and test page

Learn from what you encounter in the real world.

Look around for examples that can apply to your designs.

Signal failure

Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/

Signal failure

Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/

Bad usability

Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

Bad usability

Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

If function is to push, then why do you need handle?

IS IT EASY TO DESIGN INTERFACES?

What do you think happens here?

What do you think happens here?

Go Right for:

•Daily A & B•Shuttles•Taxis•Parking•Door to Door•Rental Car

Is it easy to design interfaces?

Let’s see a simple interface A doorA couple simple functions,

open and close

Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

How does this door open?

Door number 1.

Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

How does this door open?

Door number 2.

Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

Door #1

Door number 1 - again.

Door number 2 - again.

Door #2

How does this door open?

Door number 3.

No instructions needed.

Door number 3.

The door affords the act of pushing. We know to push outward by looking at it.

Affordance!

The design of the control tells us how to use it

Door number 3.

The door affords the act of pushing. We know to push outward by looking at it.

Affordance!

Clues about functionality

Design interfaces

Instructions for simple tasks = Failure Door operation is simple – keep it simple. The door design needs:

VisibilityActions should be obviousDesign gives clues about functionality - Affordance

Interfaces

We often use things with which people are familiar to help them understand how controls can be used in the digital world.

Interfaces

Command prompt?

Direct Manipulation?

Reduces Cognitive load

OPENOPEN

Which of the following two items most looks like a button? Why?

Which of the following two items most looks like a button? Why?

Digital buttons look like physical buttons so we more easily understand their purpose and function.

Digital buttons look like physical buttons so we more easily understand their purpose and function.

Digital buttons look like physical buttons so we more easily understand their purpose and function.

• Physical design – raise• Action – press and release and something happens

Why not?

Why not like this?

Digital version.

Design interfaces

Think about interfaces that implement web search.

Evaluate from the perspective of knowing where and how to enter a search query.

We know what to do – minimalist design.

About two years ago, when I searched CNN, I got Web-wide results?

But I wanted to search CNN.

Don’t make me think!

So what’s the big deal?

Don’t make me think!

People search CNN, got web results, “I don’t want to search the Web. I want CNN.”, they tried again, same result, “Something is wrong”, went back to browsing or gave up.

Don’t make me think!

• Users spend 27 seconds on a Web page. • Users spend 1 minute 49 sec on a site.

Nielsen & Loranger, 2006

• They won’t read much.• They scan the pages.• If it’s hard they are less likely to use it.

• Limited amount of time to convey message.

•Don’t waste time by making people think about the interface.

• CNN News is now the default

Krug’s Thoughts

The truth about the right way to design Web sites…there is no RIGHT way to design sites. It’s a complicated process and the right answer to most of the questions people ask is “it depends”

Steve Krug, 2006

Krug’s Thoughts

1. Don’t make me think. If something is hard to use, we just don’t use it as much.

2. A page should be self-evident

3. People don’t read they scan pages

4. We satisfice

5. Use Conventions

Krug’s Thoughts When you look at a page, it should be self-

evident, its purpose must be obvious.

Users should know what it is and how to use it without thinking about it too much.

Pages have to work at a glance.

Try to eliminate as many questions as possible.

Source: Steve Krug, 2006, p.12

Try to eliminate as many questions as possible.

Source: Steve Krug, 2006, p.13

Some things that make us think?

Great! I can post my resume by clicking “Get Started”. I wonder why it’s a link and not a button like Search Jobs Now.

I saw Post Your Resume and Get Started

Wait? I clicked “Get

Started” to post my

Resume. I don’t want to

create an account. I

must be in the wrong

place.

This says nothing about

uploading a resume.

I want to keep shopping so I’ll click CONTINUE SHOPPING.

www.homedepot.com

The popup is informational. Right? When I click CONTINUE SHOPPING again nothing happens.

www.homedepot.com

Krug’s Thoughts People don’t read they scan pages

We design for this...

We think people read like this...

But they probably see this…

F-Shaped Pattern For Reading Web ContentEyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

(Nielsen, 2006)

Source: http://www.useit.com/alertbox/reading_pattern.html

Krug’s Thoughts We satisfice – people often don’t make

logical or the best choices – they do what works for them – to get by.

How much effort will users put into learning your interface? Not much?

Krug’s Thoughts Satisfice – instead of clicking the object

built in by the designer, I clicked Back.

Krug’s Thoughts Satisfice – instead of clicking the object

built in by the designer, I clicked Back.Be prepared -people don’t always use your site as you intended it to be used.

Krug’s Thoughts

Navigation isn’t just a feature of a web site, it is the web site, in the same way that the building, the shelves, and the cash registers are at Sears. Without it, there’s no there there.

—Steve Krug

Use Conventions: All web navigation must answer these questions: Where am I? What’s here? Where have I been? Where can I go next? Where's the Home Page? What’s most important?

Conventional:• Box• Label• Button Search or Go

Proximity to Pull-down suggests search functions in a similar manner

Krug’s Thoughts

Use expected conventions – deviating from them can be problematic.

Usually:• Box• Label• Button Search of Go

Proximity to Pull-down suggests search functions in a similar manner

http://www.iit.edu/arch/

Krug’s Thoughts

Source: http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

Where users expect to find standard page components

Shaikh & Lenz, 2006

Website examples

Let’s look at a few websites.

Let’s look at a few sites http://www.sonicdrivein.com/home.jsp#/home

Let’s look at a few sites http://www.laeyeworks.com/ (eye glasses)

Enter site confusing, navigation

Let’s look at a few sites http://www.cafeintl.net/

3D, Identity

Let’s look at a few sites http://lesailes.hermes.com/us/en/

Navigation

Let’s look at a few sites

http://www.staples.com (text size)

http://www.juliegarwood.com/(What’s this site about?)

Design interfaces: Examples

http://www.zincbistroaz.com/

Can you tell what it’s about? Mystery meat

Design interfaces: Examples

http://www.bicsportsurfboards.com/

Can you tell what it’s about?

Design interfaces: Examples

http://www.marshill.org/

Can you tell what it’s about?

Design interfaces: Examples

http://www.3cgraphics.com/

What is it about?What’s good/bad?

Design interfaces: Examples

http://www.3cgraphics.com/

Lack of focal point on the page Too many pictures

When people arrive at your site it's because they've made a commitment. They've clicked a link or an ad and now they are at your site so you don't have to try to seduce them. Let them in your site.

Breaks up flow

Other examples

Design interfaces: Examples

http://www.montblanc.com/

Design interfaces: Examples

Is there a boutique in Chicago (what is the phone number, address and hours)?

This is a timed exercise.

Design interfaces: Examples

Find a Montblanc Starwalker Black Rubber & Platinum, Fountain Pen.

Find EYEWEAR: Montblanc Ladies Collection Ipanema Graded black, gray pattern laminated into white acetate frame.