interface design multimedia and web. today’s objectives review: defining interface design html...

Interface design

Multimedia and Web

Today’s Objectives

Review: Defining Interface Design HTML Introduce User Research User-Center Design Design Activity Project portfolio page

Review: Defining Interface Design

Defining ID: What is an interface?

An interface is a representation of a problem/task

A well-designed interface can transform a complex task, making it much simpler

Defining ID: What is an interface? Communication Channel – something that

mediates between the user and the computer.

Interface mediates the conversation a person has with a digital product.

Defining ID

What is a good interface?A good ID encourages an easy,

natural, and engaging interaction between users and system.

BUT…

Defining ID

Easy, natural, good, bad, and engaging are subjective.

We need to be concerned with whether a user interface is good, bad, or poor, etc. in relation to usability.

Defining ID

What’s usability?… extent to which a product can be

used by specified users to achieve specified goals with effectiveness.

(BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

Defining ID: What is an interface? Interface design doesn’t start with pictures.

It starts with understanding of people.

(Tidwell, J. 2011, p.2)

Defining ID: What is an interface? Step 1 of ID: Figure out what users

are really trying to accomplish.

Art of interface design lies in solving the right problem.

• Solving the right problem. • Communication channel • Mediates between user and computer.• Representation of problem/task

When we think of ID in these terms

Defining ID: What is an interface?

…versus product, we must think of & begin with users.

Product

The 8 golden rules of interface design1. Strive for consistency2. Cater to universal usability3. Offer informative feedback4. Design dialogs to yield closure5. Prevent errors6. Permit easy reversal of actions7. Support internal locus of control (Sort)8. Reduce short term memory load

HTML

Quick introduction

HTML

Allows you to structure documents and assign meaning to content.

Used for describing meaning of content.

<p>In the summer of 2009, I developed Mapping Temporal Relations of

Discussions Software (MTRDS) as a tool to analyze the temporal aspects

of online course discussions. <q>“This Web-based prototype imports

discussion files from a course management system and diagrams the

temporal aspects of conversations.”</q> From the diagrams, one can

observe the general time and date of discussion activity and individual

patterns of interactivity.</p>

<p>I am seeking funds to assist me in further developing an intelligent

online tool that provides <strong>semantic</strong> as well as

temporal analyses of online educational conversations. </p>

<h1> Introduction</h1>

<h2> Educational Conversations</h2>

Visual vs. Structural

Use HTML to: Structure document Meaningful markup

Use CSS for styling

HTML 5

Emphasizes semantics. Removes some presentational elements. Introduces new elements such as header,

footer, article, sections, nav.

Use elements that best describe your content. Styling is done with CSS

HTML 5 | Why it’s important.

Improved accessibility Improved interoperability – content being

available on assistive technologies and on mobile and tablet devices

Improves SEO Efficient coding & improved maintenance.

HTML 5 Doc Type

<!doctype html>

Ensure browsers render properly and let’s HTML validators know you are using HTML 5 syntax.

http://validator.w3.org/

HTML: Document structure

HTML

HEAD – information about the Web page.

BODY – the actual contents of the Web page

HTML: Document structure

<HTML>

<HEAD></HEAD>

<BODY>

</BODY>

</HTML>

HTML 5: Document structure<!doctype html>

<html>

<head><title> Hello World, it's our first page!</title></head>

<body><section><article> <nav></nav> <p>Hello, world!</p></article></section></body>

</html>

HTML 5 | News content elements Section Article Nav Header Aside Footer

Header | Hgroup | Example

<header>

<hgroup>

<h1>Interface design</h1>

<h2>Interface patterns</h2>

</hrgoup>

</header>

<nav> < </nav>

<section>

<header><h2>By the Sea></h2>

</section>

<section>

<article><header><h2>This is the title…</h2>

</article></section>

<aside><section><header><h3>Categories</h3></section>

<section><header><h3>Archives</h3></section></aside>

<nav> </nav>

<section>

<header><h2>By the Sea></h2></header>

</section>

<section><article><header><h2>This is the title…</h2></header>

</article></section>

<aside><section><header><h3>Categories</h3></header></section>

<section><header><h3>Archives</h3></header></section></aside>

Progressive enhancements

Provide universal access – start with clear content and well-structured semantic HTML markup.

Strict separation of layout and presentation. Layer advanced behavior and styling but

always ensure accessible/universal access.

(Arker, T., Toland, P. Jehl, S., & Wachs, M. 2010, p. 8)

Offer informative feedback

Cater to universal usability

Design dialogs to yield closure

Permit users to be in control of interface.

Support internal locus of control

Easily remove item from cart.

Permit easy reversal of actions

User Research

Read: Chapter 2, Designing interfaces in Blackboard.

User Research

It’s challenging to understand the real issues that trigger users’ interactions with a website.

Think of a travel site…If these people are users, how will that impact your design?

User Research

Empirical discovery - the only really good way to obtain information about users.

Characterize kinds of people who will be using your design.

Go out and meet them.

User Research

Each user is unique - one person finds something difficult, the next one won’t.

Figure out what’s generally true about your users.

What are common behavior patterns.

User Research - Find out:

Users’ goals in using the site Tasks they undertake to achieve goals Language and words they use Skill using software similar to what you’re

designing Attitudes toward the kind of thing you’re

designing

User Research

Describe audience in terms of how and why they might use your site.

Without valid description of user, design will likely not proceed well.

User Research - methods

Direct observation Case studies Surveys Personas - This is a design technique that

“models” the target audiences.

Thinking about your interface.

Think of your interface design as a conversation. You modify your conversation based on the person with whom you are speaking: specific vocabulary you use level of knowledgebody language, etc.

Video

http://www.youtube.com/watch?v=TkMLrDXlE-c

Do users expect a tightly focused exchange about something very specific?

Or do they prefer a conversation that’s more of a free-ranging exploration?

Thinking about your interface.

How much openness is there in the interface?

Too little, and your users feel trapped

Too much, and they stand there paralyzed, not knowing what to do next

How much effort are your users willing to spend to learn your interface?

A lotPhotoshopDreamweaver

A littleWebsite

User Centered Design

Model & approaches

What is User-Centered Design?

Places the person (as opposed to the 'thing') at the center.

Focuses on cognitive factors (such as perception, memory, learning, problem-solving, etc.) as they impact interactions.

Looks at user actions/activity.

http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

RequirementDefinition

System &Software Design

ImplementationUnit Testing

Integration &System Testing

Operation & Maintenance

Waterfall Life Cycle Model

RequirementDefinition

System &Software Design

ImplementationUnit Testing

Integration &System Testing

Operation & Maintenance

Waterfall Life Cycle Model

User involvement

• Sequential phases• Each phase complete before the next

Iterative design process

User Testing

Design

Prototyping

e.g., Agile model

Iterative design process

User Testing

Design

Prototyping

• Involve users throughout the process• Process is highly iterative

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html

The Site Development Process Model

Lynch & Horton


The Site Development Process

Lynch & Horton

• Broad input & participation in beginning.

• Narrow focused team at the end.

• Necessary, to finish your site on time and on budget.

UCD – major activities

What is involved in the process

1. Identifying needs, establishing requirements for the user experience (understand the problem and your users)

2.Developing alternative designs to meet needs

3.Building interactive prototypes that can be communicated and assessed

4.Evaluating what is being built throughout the process and the user experience it offers

User-Centered Design

Major activities:1. Understand/specify the context of use

2. Specify user and organization requirements

3. Create prototypes

4. Evaluate designs with users against requirements.

(British Standards Institution 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

SOURCE: http://www.usability.gov/methods/process.html

www.usability.gov

User-Centered Design Major Steps

1. Requirements-definition - client gives developers information about functionality and requirements.

2. Establish design for the project.

3. Develop prototypes that reflect the emerging design, using the programming language or development environment.

User-Centered Design

Major Steps

4.Submit prototypes to client for feedback and modifications.

5.Revise prototypes to reflect the client’s changes.

6.Repeat steps 3 and 5 for additional part of the system.

User-Centered DesignSeeks to answer questions about users and their tasks

and goals such as: Who are the users of this 'thing'?

What are the users’ tasks and goals?

What are the users’ experience levels with this thing, and things like it?

How can the design of this ‘thing’ facilitate users' cognitive processes?

What are the classes like, do they have what I want in my major, what activities are there, etc.

Costs, will she be safe, will she be able to get a job, how good are the professors, etc.

Do you think Lauren’s picture is on the site, how good is this school, she’s in the theater department, etc.

I need to find information about grants and research, what electronic resources are available, etc.

User-Centered DesignSeeks to answer questions

What hardware, software, and browsers do the users have? What relevant knowledge and skills do the users already

possess? What functions do the users need from this interface? How do they currently perform these tasks? Why do the users currently perform these tasks the way they do? What information might the users need and in what form? What do users expect from this Web site? How do users expect this interface will work?

Site development processes

Site Development Process(Lynch & Horton)

Site definition and planning Information architecture Site design Site construction Site marketing Tracking, evaluation, and maintenance

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html


The Site Development Process

Lynch & Horton

The first step to design web site is to define your goals.

Careful planning and a clear purpose are the keys to success in building web sites, particularly when working with a development team.



Step 1:

Gather development team, analyze needs/goals, and work through development process to refine plans.



Step 2: Create charter/specifications document:

what you intend to do and why, for whom,what technology and content, how long will process take, how much you will spend, and how will you assess the results of your efforts.



Charter document is crucial to creating a successful site:

Charter document is blueprint and will help keep project focused on the agreed-on goals and deliverables.


Development process

Teague (2009):

1. Plan site

2. Build site

3. Deploy site

4. Iterate the process

Plan site

1. Know the problem and users – critical!!!

2. Make sketches

3. Define site structure –

4. Decide page flowFixed width/fluid heightEtc.

Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Information Architecture

Plan site

3. Make wireframesHelp in planning structure of pagesServe as blueprints for developmentShould include placement and measurement

of elements in pixelsWireframe Example

http://www.strangesystems.net/images/wireframe_template-visio.gif

Plan site

Visual compositions (comps) Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.

Build

Cutting ChromeUse background imagesTransparent png (Example)CSS spritesPhotoshop/Illustrator, etc.

Build

Prototype | show interactivityDefine markup structureCreate CSS | program

Organize CSS Programming

Deploy

Alpha – site not released Beta – site made available to public – not

promoted.

Iterations

interface design multimedia and web. today’s objectives review: defining interface design html...

Documents

user interface

good interface

interface designmultimedia

interface designdefining

interface design doesnt

art of interface design

good id

simplerdefining id