Marketing and Advertising: Focusing on web communication and web design via the C.R.A.P. framework, usability testing (heuristics, Think Aloud Test, card sorting). Includes an assignment for students. Validated slides with source links. By David Engelby 2013

1. Marketing
& Advertising
4
Web communication /
Design and usability tests
MULTIMEDIA DESIGN

2. Web communication:
content and form
Marketing & Advertising 4
Web communication is a good mix
between content and form: that is,
content and design. Design is more
than a pretty surface. When you visit
a website you are on a mission; you
want something (information, enter-
tainment, goods, software etc.).
Information architecture is the first
step. Why? Because content is king!
So before you start designing a fancy
graphic user interface, start thinking
about the context: What is the theme
of the website? Who is your client?
What kind of market is it? >> Content
and Users: Who are the users? What
do they look for? Write clear and
good texts for the website.
Source: http://www.theguardian.com/help/insideguardian/2010/feb/02/what-is-information-architecture
CONTEXT
USERSCONTENT
AI
Here you can also add a
persona and a scenario.

3. Web communication:
content and form
Marketing & Advertising 4
Information architecture is combined
with the relevant graphic user in-
terface of 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
useful method of organizing informa-
tion while making use of good design
priciples (form) as well as content.
It is important that the user of the
website can answer these questions
at once: Where am I? What can I do
here? Why Should I do it? So focus on
good user experience (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. framework.
Source: http://www.1stwebdesigner.com/design/important-usability-principles-website-designers/
and http://lab.christianmontoya.com/designing-with-crap/designing-with-crap-cc.pdf
CONTRAST
ALIGNMENT PROXIMITY
REPETITION
The C.R.A.P.
framework for
the design of
a website.

4. Web communication:
content and form
Marketing & Advertising 4
Source: http://lab.christianmontoya.com/designing-with-crap/designing-with-crap-cc.pdf
and http://www.userfocus.co.uk/articles/A_CRAP_way_to_improve_usability.html
CONTRAST
REPETITION
ALIGNMENT
PROXIMITY

5. Usability testing 101
Marketing & Advertising 4
Gangstertest method
TYPE OF METHOD:
Expert analysis and/or user test meth-
od: This means you can use the gang-
stertest as an expert first to evaluate
a website (yours or others), and then
make four or five persons evaluate
the website following the same ques-
tions (they see things differently than
you and vice versa). You can also per-
form only an expert analysis (before
doing another type of user testing) or
only a user testing session.
METHODOLOGY:
Quantitative / Evaluate / Organize
APPROACH / ASK ABOUT:
What website is this? (logo or other
types of idintification).
What kind of sections are there on
the website? (the way the design
shows you what’s on the website)
What subpage am I on? (look for title
or descriptions)
EVALUATION METHOD:
0 – this information can not be found
1 – this information is difficult to find
2 – this information is easy to find
3 – this information is very easy to find
What are my options at this level?
(look at menu’s, icons, functions)
Where am I in the scheme of things?
(breadcrums, overview, understanding
how you got to that page)
Where can I search? (search bar)
Source: http://www.peterrybarik2.szm.com/PdfFiles/Usability.pdf
and http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

6. Usability testing 101
Marketing & Advertising 4
Card sorting method
TYPE OF METHOD:
Expert analysis and user test method:
This means you can use the card
sorting approach as an expert first to
organize a website (yours or others),
and then make four or five persons
evaluate the website following the
same method (they see things differ-
ently than you and vice versa).
METHODOLOGY:
Quantitative / Organize
APPROACH / DO THIS:
Read the links in the “source” section below. Ask the teacher.
Watch this: http://www.youtube.com/watch?v=S9i4ByDKnR4
Source: http://sixrevisions.com/usabilityaccessibility/card-sorting/
and http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

7. Usability testing 101
Marketing & Advertising 4
Think Aloud Test (and heuristics)
TYPE OF METHOD:
Expert analysis and user test method:
This means you can use heuristics as
an expert first to evaluate a website
(yours or others), and then make four
or five persons evaluate the website
(they see things differently than you
and vice versa). You can also perform
an expert analysis (before doing an-
other type of user testing).
METHODOLOGY:
Quantitative / Qualitative / Evaluate
APPROACH / DO THIS:
They are called “heuristics” because
they are more in the nature of rules of
thumb than specific usability guide-
lines. You can follow the traditional
ten heuristics (by Jakob Nielsen) or
you can use your logical heuristics
based on the functions of the site:
This means that you can make a list
with the functions and then test these
0 – this information can not be found
1 – this information is difficult to find
EVALUATION METHOD for quantitative questions only:
2 – this information is easy to find
3 – this information is very easy to find
Source: http://www.nngroup.com/articles/ten-usability-heuristics/
and http://instone.org/heuristics
functions by asking the informant
(the person who is testing the site) to
do specific tasks, that involves these
functions. This is similar to a Think
Aloud Test. In this test you can ask
both quantitative questions (realted
to heuristics) and qualitative ques-
tions (related to opinions on design).
Watch this: http://www.youtube.com/
watch?v=r0A6IW2TFFI

8. Assignment
Marketing & Advertising 4
Your task
Conduct a usability test (group as-
signment). Include the following:
• 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 inform-
ants think about it).
Approach
• Find a website which is difficult to
navigate on. Make an expert evalua-
tion to begin with, perhaps a gang-
ster test, to establish that there are a
series of problems with the naviga-
tion and the design.
• Make a simple hypothesis: Why is
this a difficult website to navigate
on? Write down the central prob-
lems. Use also your professional
knowledge as argumentation.
• Make a list of tasks for 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 informants, if the task
is not solved, just move on to the
next question.
• Make at least 15–20 action based
questions for a 20–30 minutes ses-
sion with each informant.
• Make also a list of questions for an
interview with a qualitative focus.
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 difficult, 2=was
easy, 3=not an issue. Be neutral. You
are not testing the informant, but
the website!
• What suggestions do you have
to improve the site’s information
architecture? Present sketches for
improvement and show other sites
with better solutions.
• Include the C.R.A.P. framework to
validate your suggestion for a better
design.
Make a slide based presentation of
your assignment. All members must
contribute with substantial elements.