Interactive Form
TDDC63
Johan Åberg
johan.aberg@liu.se
Outline
• About the course
• Interface descriptions
• Cognitive walkthrough
• Heuristic evaluation
Team Briteback
Communication for team players
Integrates chat, video and e-mail
Allows the implementation and follow up of a communication
policy
Learning objectives
• describe, compare and argue for form
aspects of interactive systems
• choose, evaluate, and criticize interactive
form for communicative purposes
• give form to interactive communication
Examination
• Interactive form 1-3. Grades: Pass/Fail.
In groups. Oral and written examination.
• Individual design work. Grades: U/3/4/5.
Written examination.
Structure
• Interactive form 1-3: Theory (Literature +
Lectures) + Design studios + Examination
• Design work: Theory (Literature +
Lectures) + Design studios + Examination
Interactive form 1
•
•
Select an information kiosk or machine
Describe its purpose, content and form
•
•
•
•
Purpose: What does it do? What service does it provide
for the owner and the user?
Content: What information does it contain?
Form (illustrated with annotated photos): Static form –
basic layout and structure. Dynamic form – how does it
behave when interacted with?
Perform a cognitive walkthrough; describe the
result
Interactive form 1
•
Written presentation
•
•
•
•
•
Front page, with title and authors
Introduction – What problem has been studied?
Method – Describe, in detail, the setup, the studied kiosk
(incl purpose, content, form), and how you carried out
the evaluation.
Results – Describe, in detail, the outcome of the
evaluation.
Discussion – What do the results mean? What have you
learned?
Interactive form 1
•
Oral presentation
•
•
•
•
•
What product has been selected, and why?
What is the product’s purpose, content, and form?
How has the evaluation bee carried out?
What was the result, and what have you learned?
Make sure to have images ready to illustrate the studied
kiosk.
Interactive form 2
•
•
•
Select a web-based map service
Perform a use quality analysis (see lecture 2)
and describe the result
Perform a heuristic evaluation and describe
the result
Interactive form 2
•
Written presentation
•
•
•
•
•
Front page, with title and authors
Introduction – What problem has been studied?
Method – Describe, in detail, the setup and the studied
map service, and how you carried out the use quality
analysis and the heuristic evaluation.
Results – Describe, in detail, the outcome of the use
quality analysis and the heuristic evaluation.
Discussion – What do the results mean? What have you
learned?
Interactive form 2
•
Oral presentation
•
•
•
•
•
What map service was selected and why?
What use qualities does the map service have? How did
you perform the use quality analysis?
How was the heuristic evaluation carried out?
What were the results of the heuristic evaluation?
What have you learned?
Interactive form 3
•
•
Select a web site or app that you think has
room for improvement (poor structure or
overall design)
Apply 2 techniques/principles (Johnson, 2010)
per group member and illustrate how they can
be applied to improve the selected system
Interactive form 3
•
Written presentation
•
•
•
•
•
Front page, with title and authors
Introduction – What problem has been studied?
Method – Describe, in detail, the setup and the studied
system. Describe each technique/principle, and how it
was applied.
Results – Describe, in detail, the outcome of the
application of each technique/principle. Illustrate with
annotated before and after screen shots.
Discussion – What do the results mean? What have you
learned?
Interactive form 3
•
Oral presentation
•
•
•
What system was chosen? Why did you think it was
poorly designed?
What techniques/principles were applied?
What was the outcome, per principle? Illustrate with
before and after screen shots.
Individual design work
•
To be decided…
Deadlines
• Interactive Form 1:
th
9
Nov 13.00
• Interactive Form 2: 23rd Nov 13.00
• Interactive Form 3: 7th Dec, 13.00
• Individual design work: 11th Jan, 08:00
Teaching Staff
• Johan Åberg (Ph.D.) examiner, lecturer
in interaction design, IDA/LiU
• Ove Jansson
Objects in graphical
user interfaces
• Apple Human Interface Guidelines
• Windows User Experience Guidelines
• User interface design patterns
•
Yahoo Design Pattern Library
(https://developer.yahoo.com/ypatterns/)
•
Tidwell’s Designing Interfaces
•
van Welie’s Patterns in Interaction Design
Enumeration
• Describing all possible forms…
• Possible?
Instantiation
• One or more
instances of the
form is given to
the reader and
the rest is to be
inferred
1
2
3
4
Use of animation
INBOX
Email
Calendar
Settings
johan.aberg@liu.se
Day
Todo 12
Email
Search…
Settings
Sven Gustavsson
Apropå semesterresan
johab73@gmail.com
Calendar
johan.aberg@liu.se
johab73@gmail.com
Todo 12
Search…
Tursday Oct 23
8:00 AM
10:00 Am
INBOX
Rikard Fröberg
Abonnemang
Alla mail
Skräppost
Yvonne Ohlsson
Sv: Licenser
Viktigt
Week
5:00 PM
Year
Friday Oct 24
8:00 AM
1:00 PM
Stjärnmärkta
Utkast
1:15 PM
Month
Papperskorgen
Skickade mail
Day
3:15 PM
Yvonne Ohlsson
Sv: Licenser
Yvonne Ohlsson
Sv: Licenser
6:00 PM
8:00 PM
Monday Oct 27
8:00 AM
10:15 AM
When changing top menu: Old meny slides off to the left, new menu slides in from the right.
KLM – Keystroke-level model
•
•
Method that can be used to estimate the time it
takes to complete simple data input tasks using a
computer and mouse
Focuses on task performance for fully predictable
methods of operation
•
K - press key
Expert typist (90 wpm) --- 0.12 sec
Average Skilled Typist (55 wpm) --- 0.2 sec
Average nonsecretarial typist (40 wpm) --- 0.28 sec
Worst typist (unfamiliar with keyboard): 1.2 sec
•
T(n) – Type a sequence of n chars on keyboard --- n x K sec
•
P - Point the mouse to a target on screen --- 1.1 sec
•
B – Press or release mouse button --- 0.1 sec
•
BB – Click mouse button (counts as two B operations) --- 0.2 sec
•
H - Hand from keyboard to mouse or vice versa --- 0.4 sec
•
M - Mental Preparation --- 1.2 sec
•
W(t) – Waiting for the system to respond (time t must be determined)
Example – delete file in file system
1. Point to file icon P
2. Press and hold mouse button B
3. Drag file icon to trash can icon P
4. Release mouse button B
5. Point to original window P
Total time = 3P + 2B = 3*1.1 + 2*.1 = 3.5 sec
Example – cont’d
1. Point to file icon P
2. Click mouse button BB
3. Point to File menu P
4. Press and hold mouse button B
5. Point to DELETE item P
6. Release mouse button B
7. Point to original window P
Total time = 4P + 4B = 4*1.1 + 4*0.1 = 4.8 sec
Example – cont’d
1. Point to file icon P
2. Click mouse button BB
3. Move hand to keyboard H
4. Hit function key F8 KK
5. Move hand back H
Total time = P + 2B + 2H + 2K = 1.1 + 0.2 + 0.8 +
0.56 = 2.66 sec
Inspection Methods
Cognitive
Walkthrough
•
•
•
Focuses on ease of learning by exploration where
the user is a complete novice
Construct a task: Identify users’ goals and break it
down to sub-goals and sub-tasks
Act as the user, and document problems of each
sub-task in every part of the action cycle
1. Define input to the
walkthrough
•
•
•
•
Identify the target users
Define sample task for evaluation
Describe the action sequence needed for
completing the task
Describe the user interface
•
•
•
User: Office administrator (limited computer skills)
Task: I want my phone calls to be forwarded to my
associate’s office. My associate’s number is 492-1234.
Action sequence:
1.
Pick up the receiver.
Phone: dial tone
2.
Press #2 (Command to cancel forwarding).
Phone: bip bip bip
3.
Hang up the receiver.
4.
Pick up the receiver.
Phone: dial tone
5.
Press *2 (Command to forward calls).
Phone: dial tone
6.
Press 4921234.
Phone: bip bip bip
7.
Hang up the receiver.
• Interface: The phone is a standard size, touchtone phone located on the professor’s desk.
There is a template that overlays the
telephone’s keypad (we assume it has not
been mislaid) that includes the following
material:
•
FWD *2
CNCL #2
SEND ALL *3
CNCL #2
2. Convene the analysts and
3. Walk through the action
sequence for each task
•
Tell a credible story of why users would choose that
action considering:
•
•
•
•
Will the user try to achieve the right effect?
Will the user notice that the correct action is available?
Will the user associate the correct action with the effect
the user is trying to achieve?
If the correct action is performed, will the user see that
progress is being made toward the solution of the task?
4. Record critical information, and
5. Revise the interface
•
•
•
•
User knowledge requirements
Assumptions about the user population
Notes about side issues and design changes
The credible success story
Will the users try to achieve
the right effect?
• The task is to print a document, but the
first thing they have to do is select a
printer. Will they know that they should
be trying to get a printer selected?
Users may know what
effect to achieve
•
•
•
Because it is part of their original task, or
Because they have experience using a
system, or
Because the system tells them to do it
Will the user notice that
the correct action is
available?
• If the action is to select from a visible
menu, there is no problem
• But if it’s to triple-click the printer icon,
the user may never think of it
Users may know an action
is available
• By experience, or
• By seeing some device (like a button),
or
• By seeing a representation of an action
(like a menu entry)
Will the user associate the correct
action with the effect trying to be
achieved?
• If there’s a menu item that says, ”select
printer,” things will go smoothly; not so
if the menu says ”SysP”.
Users may know an action is
appropriate for the effect they are
trying to achieve
• By experience, or
• Because the interface provides a
prompt or label that connects the action
to what they are trying to do, or
• Because all other actions look wrong
If the correct action is performed,
will the user see that progress is
being made toward the solution of
the task?
• If after selecting the printer a dialog box
states that the ”Printer is Laser in Room
105,” great. The worst case is no
feedback.
Users may know things are going
OK after an action
• By experience, or
• By recognizing a connection between a
system response and what they were
trying to do
Heuristic Evaluation
•
•
•
Get a good number of evaluators and a list of
heuristics
Go through the interface twice individually,
looking at all the elements and evaluating its
design in regards to the list of heuristics
Convene to compare and aggregate found
issues
Heuristics + examples
1. Visibility of system status
•
If it takes a long time to load a screen, display a progress bar
2. Match between system and the real world
•
When designing a website for children, use terms with which they are familiar
3. User control and freedom
•
Provide the functionality to Undo and Redo actions
4. Consistency and standards
•
Use icons with which people are familiar
5. Error prevention
•
If a user cancels her account, offer her a way to re-establish the account
Heuristics + examples
6. Recognition rather than recall
•
On a web form, allow easy access to previously entered information
7. Flexibility and efficiency of use
•
Provide keyboard shortcuts
8. Aesthetic and minimalist design
•
Background graphics can make viewing text difficult
9. Help users recognize, diagnose and recover from errors
•
Use error messages that help users recover
10. Help and documentation
•
Provide online help with links to pop-ups with explanations
Problem severity degree
Few evaluators noted Many evaluators
the problem
noted the problem
Small impact on the
user experience
Low severity
Medium severity
Large impact on the
user experience
Medium severity
High severity
Report format
Problem
Heuristic
Severity
Details
1. Main links not
always visible
3+6+7
Medium
BRIEF DESCRIPTION:
After clicking any of the Main Links the Main Links are not visible on the
next page
LIKELY DIFFICULTIES:
Users must return to the Home Page to be able to go to a different Main
Link sub-page.
SPECIFIC CONTEXT / LOCATION:
Location: Any sub-page of the Home Page
POSSIBLE SOLUTIONS:
Keep the Main Links visible at all times
HEURISTIC RATIONALE:
3) User control and freedom: Users are restricted in their ability to
navigate the website
6) Recognition rather than recall: Being able to see the Main Links at all
times will reduce memory load on the user
7) Flexibility and efficiency of use: Extra navigations are required to
return to the Home Page
Report format
Problem
Heuristic
Severity
Details
2. Adding images
takes many steps
7
Medium
BRIEF DESCRIPTION:
In order to add an image to a record, the user must first add the image
to the “Image Gallery”.
LIKELY DIFFICULTIES:
If a user is in the middle of editing a record and they wish to add an
image, they must exit the page they are on and visit the “Image Gallery”
to add the image. Then they have to go back to the original page they
were on to add the image. This will slow users down and may make
some users (if they are in a hurry) reluctant to add an image.
SPECIFIC CONTEXT / LOCATION:
Any record in which they wish to add an image that has not already
been uploaded into the “Image Gallery”.
POSSIBLE SOLUTIONS:
1. Allow images to be added directly at the location they wish to put it.
2. If the above is not possible, then a solution would be to have a link to
a pop-up window which has the “Image Gallery” – this way they don’t
need to lose their current location.
HEURISTIC RATIONALE:
7) Flexibility and efficiency of use: it can take a large number of
navigations to add an image
How many evaluators?
How many evaluators?
Are you sure?
Selecting evaluators
•
You get the best results when selecting
evaluators with expertise within both
•
•
Usability and the heuristics
The domain in question
References
• Nielsen, J. & Mack, R. L. (1994).
Usability Inspection Methods. New
York, NY: John Wiley & Sons.
Summary
•
•
•
•
•
Inspection methods require description
Description in interaction design is about
tasks, action sequences, actions, their entry
(prompts), body, and exit (reactions).
KLM: task performance in predictable methods
of operation
Cognitive walkthrough: for walk-up-and-use
Heuristic evaluation: Evaluators using rules of
thumb