marketing and advertising: web design, web information architecture, usability testing

7/29/2019 Marketing and Advertising: web design, web information architecture, usability testing

http://slidepdf.com/reader/full/marketing-and-advertising-web-design-web-information-architecture-usability 1/8

Marketing& Advertising

4 Web communication /Design and usability tests

MULTIMEDIA DESIGN



Web communication:

content and orm

Mkg & Adg 4

Web communication is a good mix

between content and form: that is,

content and design. Design is more

than a pretty surace. When you visit

a website you are on a mission; you

want something (inormation, enter-

tainment, goods, sotware etc.).

Im chc is the rst

step. Why? Because content is king!

So beore you start designing a ancy

graphic user interace, start thinking

about the cx: What is the theme

o the website? Who is your client?What kind o market is it? >> C

d U: Who are the users? What

do they look or? Write clear and

good texts or the website.

Sc: http://www.theguardian.com/help/insideguardian/2010/eb/02/what-is-inormation-architecture

CONTEXT

USERSCONTENT

AI

Here you can also add a

persona and a scenario.



Web communication:

content and orm

Mkg & Adg 4

Inormation architecture is combined

with the relevant graphic user in-

terace o the website. You should

do some tests even before sketching

anything, and we’ll get back to that.

First, let us take a look at a simple and

useul method o organizing inorma-

tion while making use o good design

priciples (orm) as well as content.

It is important that the user o the

website can answer these questions

at once: Wh m I? Wh c I d

h? Wh Shd I d ? So ocus ongood xpc (UX): how can

you design a website in a way to com-

bine good web conventions (POP) and

a design as a particular brand identity

(POD)? Apply the C.R.A.P. mwk.

Sc: http://www.1stwebdesigner.com/design/important-usability-principles-website-designers/

d http://lab.christianmontoya.com/designing-with-crap/designing-with-crap-cc.pd

CONTRAST

ALIGNMENT PROXIMITY

REPETITION

The C.R.A.P.

ramework or

the design o

a website.



Web communication:

content and orm

Mkg & Adg 4

Sc: http://lab.christianmontoya.com/designing-with-crap/designing-with-crap-cc.pd

d http://www.userocus.co.uk/articles/A_CRAP_way_to_improve_usability.html

CONTRAST

REPETITION

ALIGNMENT

PROXIMITY



Usability testing 101

Mkg & Adg 4

Gg mhd

TYPE OF METHOD:

Expert analysis and/or user test meth-

od: This means you can use the gang-

stertest as an expert rst to evaluate

a website (yours or others), and then

make our or ve persons evaluate

the website ollowing the same ques-

tions (they see things dierently than

you and vice versa). You can also per-

orm only an expert analysis (beore

doing another type o user testing) oronly a user testing session.

METHODOLOGY:

Quantitative / Evaluate / Organize

APPROACH / ASK ABOUT:

Wh wb h? (logo or other

types o idintication).

Wh kd c h

h wb? (the way the design

shows you what’s on the website)

Wh bpg m I ? (look or title

or descriptions)

EVALUATION METHOD:

0 – this inormation can not be ound

1 – this inormation is difcult to nd

2 – this inormation is easy to nd

3 – this inormation is very easy to nd

Wh m p h ?

(look at menu’s, icons, unctions)

Wh m I h chm hg?

(breadcrums, overview, understanding

how you got to that page)

Wh c I ch? (search bar)

Sc: http://www.peterrybarik2.szm.com/PdFiles/Usability.pd

d http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/




Mkg & Adg 4

Cd g mhd

TYPE OF METHOD:

Expert analysis and user test method:

This means you can use the card

sorting approach as an expert rst to

organize a website (yours or others),

and then make our or ve persons

evaluate the website ollowing the

same method (they see things dier-

ently than you and vice versa).

METHODOLOGY:Quantitative / Organize

APPROACH / DO THIS:

Rd the links in the “source” section below. Ak the teacher.

Wch h: http://www.youtube.com/watch?v=S9i4ByDKnR4

Sc: http://sixrevisions.com/usabilityaccessibility/card-sorting/

d http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/




Mkg & Adg 4

Thk Ad T (d hc)

TYPE OF METHOD:

Expert analysis and user test method:

This means you can use heuristics as

an expert rst to evaluate a website

(yours or others), and then make our

or ve persons evaluate the website

(they see things dierently than you

and vice versa). You can also perorm

an expert analysis (beore doing an-

other type o user testing).

METHODOLOGY:

Quantitative / Qualitative / Evaluate

APPROACH / DO THIS:

They are called “heuristics” because

they are more in the nature o rules o

thumb than specic usability guide-

lines. You can ollow h d

hc (by Jakob Nielsen) or

you can use your gc hc

based on the unctions o the site:

This means that you can make a list

with the unctions and then test these

0 – this inormation can not be ound

1 – this inormation is difcult to nd

EVALUATION METHOD for quantitative questions only:

2 – this inormation is easy to nd

3 – this inormation is very easy to nd

Sc: http://www.nngroup.com/articles/ten-usability-heuristics/

d http://instone.org/heuristics

unctions by asking the inormant

(the person who is testing the site) to

do specic tasks, that involves these

unctions. This is similar to a Thk

Ad T. In this test you can ask

both quantitative questions (realted

to heuristics) and qualitative ques-

tions (related to opinions on design).

Wch h: http://www.youtube.com/

watch?v=r0A6IW2TFFI



Assignment

Mkg & Adg 4

Y k

Conduct a b (group as-

signment). Include the ollowing:

• Think Aloud Test (method).

• Quantitative heuristics.

• Qualitative questions as a part of an

interview after the Think Aloud Test

(i.e. the design and what the inorm-

ants think about it).

Appch

• Find a website which is dicult to

navigate on. Make an expert evalua-

tion to begin with, perhaps a gang-

ster test, to establish that there are a

series o problems with the naviga-

tion and the design.

• Make a simple hypothesis: Why is

this a difcult website to navigate

on? Write down the central prob-

lems. Use also your proessional

knowledge as argumentation.

• Make a list of tasks or the Think

Aloud Test (heuristic evaluation). The

tasks must be simple and the person

must state out loud what he/she is

doing and what happens.

• Make sure the informants (3 to 4

people) gets time to solve the tasks.

Don’t help the inormants, i the task

is not solved, just move on to the

next question.

• Make at least 15–20 action based

questions or a 20–30 minutes ses-

sion with each inormant.

• Make also a list of questions for an

interview with a qualitative ocus.

Make the questions easy to under-

stand, and don’t mix your quantita-

tive (closed) working questions and

your qualitative (open) interview

questions.

• Evaluate during the test by writing

down numbers to the questions ac-

cording to this system: 0=couldn’t

be done, 1=was difcult, 2=was

easy, 3=not an issue. Be neutral. You

are not testing the inormant, but

the website!

• What suggestions do you have

to improve the site’s inormation

architecture? Present sketches or

improvement and show other sites

with better solutions.

• Include the C.R.A.P. framework to

validate your suggestion or a better

design.

Make a slide based presentation of

your assignment. All members must

contribute with substantial elements.

marketing and advertising: web design, web information architecture, usability testing

Documents