IFS2201 W02S01 Learnability2 RIS PDF

PAGE
LEARNABILITY II
www.infobusiness.com
PAGE 2
The main thing is that everything become simple,

easy enough for a child to understand.
Albert Camus
PAGE 3
Outline
• Consistency
• Affordance
• Feedback
• Locus of Attention
• Information Scent
PAGE
Consistency
[1] Definition [2] Kinds of Consistency [3] Metaphor [4] Natural Mapping: Consistency of Layout
[5] Internal Consistency in Wording [6] External Consistency in Wording: Speak the User’s Language
PAGE 5
Consistency
• Similar things should look and act the same
• Different things should look different
• Principle of Least Astonishment (POLA) or Principle of Least
Surprise
• You shouldn’t surprise the user with the way a command or
interface object works
• CONSISTENCY ALLOWS THE USER TRANSFER THEIR
EXISTING KNOWLEDGE EASILY TO A NEW UI
PAGE 6
Consistency
• “If a necessary feature has a high

astonishment factor, it may be necessary
to redesign the feature.”
- Cowlishaw, M. F. (1984)
PAGE 7
Kinds of Consistency
• Three kinds of consistency:
• Internal consistency within your application
• External consistency within other applications on the same
platform
• Metaphorical consistency with your interface metaphor or
similar real-world objects
PAGE 8
PAGE 9
• The RealCD interface has problems
• Metaphorical consistency
• CD cases don’t play
• You don’t open them by pressing a button on the spine
• They don’t open as shown
• External consistency
• The player controls aren’t arranged horizontally as they’re usually
seen
• The track list doesn’t use the same scrollbar that other applications do
PAGE 10
Kinds of Consistency: Metaphor

• Advantages
• Highly learnable when appropriate
• A well-chosen, well-executed metaphor can be quite
effective and appealing, but be aware that metaphors can
also mislead.
• Hooks into user’s existing MENTAL MODEL very easily
PAGE 11

• Some interface metaphors are famous and
largely successful.
• The desktop metaphor – documents, folders,
and overlapping paper - like windows on a
desk - like surface – is widely used and copied.
• The trashcan, a place for discarding things but
also for digging around and bringing them
back, is another effective metaphor.
PAGE 12

• Mental Model Definition (Jakob Nielsen)
• A mental model is what the user believes about the system
at hand.
• Two important elements of this definition:
• A mental model is based on belief, not facts
• Individual users have their own mental model
PAGE 13

• A mental model is based on belief, not facts:
• It’s a model of what users know (or think they know) about a system
such as your website.
• Hopefully, users' thinking is closely related to reality because they base
their predictions about the system on their mental models and thus
plan their future actions based on how that model predicts the
appropriate course.
• It's a prime goal for designers to make the user interface communicate
the system's basic nature well enough that users form reasonably
accurate (and thus useful) mental models.
PAGE 14

• Individual users each have their own mental model.
• A mental model is internal to each user's brain, and different users might
construct different mental models of the same user interface.
• Further, one of usability's big dilemmas is the common gap between designers'
and users' mental models.
• Because designers know too much, they form wonderful mental models of their
own creations, leading them to believe that each feature is easy to understand.
• Users' mental models of the UI are likely to be somewhat more deficient,
making them more likely to make mistakes and find the design much more
difficult to use.
PAGE 15

• Dangers
• Appropriate metaphors can be very hard to find, particularly
with the real-world objects.
• Metaphors can also be deceptive, leading users to infer
behavior that your interface doesn’t provide. It looks like a
book, but can I write in the margin? Can I rip out a page?
PAGE 16

• Dangers
• Metaphors can also be constraining.
• Strict adherence to the desktop metaphor wouldn’t scale,
because documents would always be full-size like they are
in the real world, and folders wouldn’t be able to have
arbitrarily deep nesting.
PAGE 17

• Dangers
• The biggest problem with metaphorical design is that your
interface is presumably more capable than the real-world
object, so at some point you have to break the metaphor.
• Nobody would use a word processor if really behaved like a
typewriter.
• Features like automatic word-wrapping break the typewriter
metaphor, by creating a distinction between hard carriage
returns and soft return.
PAGE 18
• For example, it’s easy to say “a word

processor is like a typewriter,” but you
shouldn’t really use it like a typewriter.
• Pressing Enter every time the cursor gets
close to the right margin, as a typewriter
demands, would wreak havoc with the word
processor’s automatic word-wrapping.
PAGE 19
• The basic roles for metaphors is: use it if you have

one, BUT don’t stretch for one if you don’t.
PAGE 20
Natural Mapping: Consistency of Layout

• Another important principle of interface communication is
good MAPPING of functions to controls.
• When possible, the physical arrangement of controls should
match arrangement of function
• Best mapping is direct, but natural mappings don’t have to be
direct if they have an easy mental model
PAGE 21

PAGE 22

PAGE 23

• Car turn signals.
• The turn signal switch in most cars is a stalk that moves up
and down, but the function it controls is a signal for left or
right turn.
• So the mapping is not direct, but it is nevertheless natural.
PAGE 24
Internal Consistency of Wording
• Keep it SIMPLE and UNIFORM, just like all technical writing

• If your interface says “share price” in one place, “stock
price” in another, and “stock quote” in a third, users will
wonder whether these are three different things you’re
talking about.
PAGE 25
Internal Consistency of Wording
EVALUATIONS REVIEWS
PAGE 26
External Consistency in Wording:

Speak the User’s Language
• Use common words, not techie jargon

• Speak the user’s language as much as possible, rather than
forcing them to learn a new one.
• If yours speak English, then the interface should also speak
English, not Geekish.
PAGE 27


• How might a user interpret the dialog box shown here?
PAGE 28


• Technical jargon should only be used when it is specific to the
application domain and the expected users are domain
experts.
• An interface designed for doctors shouldn’t dumb down
medical terms.
PAGE 29

• Speaking the User’s Language argues for synonyms and

aliases, so a command language should include not only delete
but erase and remove too.
• But consistency in wording argued for only one command
name, lest the user wonder whether these are three different
commands that do different things.
PAGE 30

• One way around the impasse is to look at the context in which
you’re applying the heuristic.
• When the user is talking, the interface should make a
maximum effort to understand the user, allowing synonyms
and aliases.
• When the interface is speaking, it should be consistent,
always using the same name to describe the same command
or object.
PAGE
Affordances
[1] Use Appropriate Affordances [2] Evolution of Hyperlinks and Buttons
PAGE 32
Affordances
• Affordance refers to “the perceived and actual properties of a thing”,
primarily the properties that determine how the thing could be
operated.
• Doorknobs are the right size and shape for a hand to grasp and turn.
• A button’s properties say “push me with your finger.”
• Scrollbars say that they continuously scroll or pan something that you
can’t entirely see.
PAGE 33
Affordances
• Affordances are rarely innate - they are
learned from experience.
• We recognize properties suitable for sitting on
the basis of our long experience with chairs.
• We recognize that list-boxes allow you to
make a selection because we’ve seen and used
many list-boxes, and that’s what they do.
PAGE 34
Affordances
Affordances are how an interface

communicates nonverbally, telling you how
to operate it.
PAGE 35
Affordances
• Note that perceived affordance is not the same as actual
affordance.
• A facsimile of a chair made of papiermache has a perceived
affordance for sitting, but it doesn’t actually afford sitting: it
collapses under your weight.
• Conversely, a fire hydrant has no perceived affordance for
sitting, since it lacks a flat, human-width horizontal surface,
but it actually does afford sitting, albeit uncomfortably.
PAGE 36
Affordances
• Recall the textbox from our first reading,
• Whose perceived affordance (type a time here) disagrees with what it can
actually do (you can’t type, you have to push the Set Time button to change it).
• Or the door handle on the right, whose nonverbal message (perceived
affordance) clearly says “pull me” but whose label says “push” (which is
presumably what it actually affords).
• The parts of a user interface should agree in perceived and

actual affordances.
PAGE 37
Affordances
• The original definition of affordance (from psychology) referred
only to actual properties, but when it was imported into human
computer interaction, perceived properties became important
too.
• Actual ability without any perceivable ability is an undesirable
situation. We wouldn’t call that an affordance.
PAGE 38
Use Appropriate Affordances

• Buttons & links
• Drop-down arrows
• Texture
• Mouse cursor
• Highlight on mouseover
PAGE 39

• Buttons and hyperlinks are the simplest form of affordance for
actions.
• Buttons are typically metaphorical of real-world buttons, but
• Underlined hyperlink has become an affordance all on its own,
without reference to any physical metaphor.
PAGE 40

• Downward-pointing arrows
• For example, indicate that you can see more choices if you
click on the arrow.
• The arrow actually does double-duty – it makes visible the fact
that more choices are available, and it serves as a hotspot for
clicking to actually make it happen.
PAGE 41

• Texture
• Suggests that something can be clicked and dragged – relying
on the physical metaphor
• That physical handles often have a ridged or bumpy surface for
fingers to more easily grasp or push.
PAGE 42

• Mouse cursor
• Mouse cursor changes are another kind of affordance – a visible property of
a graphical object that suggests how you operate it.
• When you move the mouse over a hyperlink, for example, you get a finger
cursor.
• When you move over the corner of a window, you often get a resize cursor.
• When you move over a textbox, you get a text cursor.
PAGE 43

• Highlight on mouseover
• The visible highlighting that you get when you move the
mouse over a menu item or a button is another kind of
affordance.
• Because the object visibly responds to the presence of the
mouse, it suggests that you can interact with it by clicking.
PAGE 44
Evolution of Hyperlinks and Buttons

PAGE 45
• Hyperlinks and buttons have evolved and changed

significantly.
• The top row shows how hyperlinks and buttons looked circa
1995 (on NCSA Mosaic, the first widely-used web browser,
which used the Motif graphical user interface toolkit).
PAGE 46

• What properties did they have that distinguished them and made them
clickable?
• Which of those properties have been lost over time, presumably as users
become more familiar with these objects?
• The drive toward simplicity is a constant force in aesthetics and user
interface design, so affordances tend to diminish rather than increase.
• The bottom row shows a hyperlink which has been simplified too far,
and an HTML button that has been not only simplified but also lost its
mouse cursor affordance. This goes too far.
PAGE 47
Whats Wrong with This?

PAGE 48
Whats Wrong with This?

• The story of affordances isn’t purely reductionist.
• Sometimes you can’t boil the affordance down to a single
property like its color or a 3D border.
• This thing here is a button; but it’s so large, and has such a
disproportionate relationship between the area and the label,
that it loses its sense of click-ability.
PAGE 49
Find the Affordances

PAGE 50
What Can You do With This Page?
If the user is trying to

view all the events at
once on the CPW
website, the user may
end up clicking through
all the days individually.
PAGE 51

• If the user is trying to view all the events at once on the CPW
website, the user may end up clicking through all the days
individually.
• It turns out that the graphic in the center page is actually a link
to a nifty search interface that lets the user look at all the event
listings in addition to other cool functionalities, but the graphic
doesn’t have strong affordances for interaction.
PAGE 52

• It’s mostly a big logo, so what does a typical user do?
• Glance at it and then ignore it, scanning the page instead for
things that look like actions, such as the clearly marked
hyperlinks at the bottom.
• The “click here to search” text in the logo doesn’t work.
• It is very easy to miss the search interface altogether because of
the poor visibility of the search feature and the lack of
affordances that the graphic is a link.
PAGE
Feedback
[1] Definition [2] Action Should Have Immediately Visible Effects
[3] Feedback Visibility Depends on Locus of Attention [4] Visible Navigation State
[5] Visible Model State [6] Visible View State [7] Useless vs Usable Feedback
PAGE 54
Feedback: The Definition

• How the system changes visibly when you perform an action.
• When the user invokes a part of the interface, it should appear
to respond.
• Push buttons should depress and release.
• Scrollbar thumbs and dragged objects should move with the
mouse cursor.
• Pressing a key should make a character appear in a textbox.
PAGE 55

• Low-level feedback is provided by a view object itself, like push-
button feedback.
• This kind of feedback shows that the interface at least took
notice of the user’s input, and is responding to it. (It also
distinguishes between disabled widgets, which don’t respond
at all.)
• E.g. push button
PAGE 56

• High-level feedback is the actual result of the user’s action,
like changing the state of the model.
• New web page starts loading
PAGE 57
Feedback Visibility Depends on Locus of Attention
• Spotlight of attention: attention focuses on one input channel

(e.g. area of visual field) at a time
• We should think of it as the locus of attention, rather than
focus, to emphasize that it’s merely the place where the user’s
attention happens to be, and doesn’t necessarily reflect any
conscious focusing process on the user’s part (Raskin, The
Humane Interface, 2000 ).
PAGE 58
locus | ˈlōkəs |
noun (plural loci | ˈlōˌsī, -ˌsē, -ˌkē, -ˌkī | )
1 technical a particular position, point, or place: it is impossible
to specify the exact locus in the brain of these neural events.
• the effective or perceived location of something abstract: the
real locus of power is the informal council.
PAGE 59
focus | ˈfōkəs |
noun (plural focuses or foci | ˈfōˌsī, -ˌkī | )
1 the center of interest or activity: this generation has made the
environment a focus of attention.
• an act of concentrating interest or activity on something: our
focus on the customer's requirements.
PAGE 60
Visible Navigation State

• Navigation is one important kind of state to visualize – i.e.,
where am I now?
• On the Web, in particular, users are in danger of getting lost
as they move around in deep, information-rich sites.
PAGE 61

• Breadcrumb trails show where you are as a path through the
site’s hierarchy (e.g. Travel, Guides, North America), in a very
compact form.
• Showing the hierarchy in a tree widget with the current node
highlighted is another way to do it, but costs more screen space
and complexity.
PAGE 62

• Pagination and highlighted tabs are similar patterns that show
the a where they are, along with some context of where else they
could go.
PAGE 63
Visible Model State

• It hardly seems necessary to say that the system model should
be visualized in an interface.
• That’s one of the essential properties of a direct-manipulation
interface: a continuous visual representation of the state of the
application.
• The hard design issues in model visibility tend to lie in what to
make visible, and how to display it.
PAGE 64
Visible Model State

• The what may involve a tension between visibility and
simplicity;
• Visibility argues for showing more, but simplicity argues for
showing less.
• Understanding the users and their tasks helps resolve the
tension.
PAGE 65
Visible Model State

• Microsoft Word displays a word count continuously in the
status bar, since counting words is an important subtask for
many users of Word (such as students, journalists, and book
authors).
• Making it always visible saves the need to invoke a word-
count command.
PAGE 66
Visible View State

• Still other state is stored in the view (or controller), not in the
backend model.
• This “view state” is the current state of the user’s interaction
with the interface.
PAGE 67
Visible View State

• Selections are particularly important.
• When the user selects an object to operate on, highlight the
object somehow.
• Don’t just leave the selection invisible and implicit.
PAGE 68
Visible View State: Selection Highlight

• Selection highlighting provides important feedback that the
selection operation was successful; it also shows the current
state of the selection if the user has forgotten what was
previously selected.
• A common technique for showing a selection highlight in text is
reverse video (white text on dark colored background).
PAGE 69
Visible View State: Selection Handles

• For shapes and objects, the selection
highlight may be done by selection
handles, or by a dotted or animated
border around the object (“crawling
ants”).
• Selection handles are appealing because
they do double-duty – both indicating
the selection, and providing visible
affordances for resizing the object.
PAGE 70

• When the user selects objects or text and then operates on
the selection with a command, keep it selected, especially if it
changes appearance drastically or moves somewhere else.
• If the selected thing is offscreen when the user finally invokes
a command on it, scroll it back into view. That allows the user
to follow what happened to the object, so they can easily
evaluate its final state.
PAGE 71

• Similarly, if the user makes a selection and then invokes an
unrelated command (like scrolling or sorting or filtering, none of
which actually use the selection), preserve the selection, even if
it means you have to remember it and regenerate it.
• User selections, like user data, are precious, and contribute to
the visibility of what the system is doing.
PAGE 72
Visible View State: Drag & Drop
• Another form of view state is the state of an input controller,

like a drag & drop operation.
• Drag & drop is often indicated by a cursor change.
PAGE 73
Useless vs Useful Feedback
• Feedback is important, but don’t overdo it.

• This dialog box demands a click from the user. Why?
• Does the interface need a pat on the back for finishing the
conversion?
• It would be better to just skip on and show the resulting
documentation.
PAGE
Information Scent
[1] Definition [2] Give Good Information Scent [3] Good & Bad Information Scent
[4] Hierarchy of Exploration Cost [5] Lots of Scent But Hard to Scan
PAGE 75
Information Scent: The Definition

• Users depend on visible cues to figure out how to achieve their
goals with the least effort.
• For information gathering tasks, like searching for information
on the web, it turns out that this behavior can be modeled much
like animals foraging for food.
• An animal feeding in a natural environment asks questions like:
• Where should I feed?
• What should I try to eat (the big rabbit that’s hard to catch, or the little rabbit that’s less
filling)?
• Has this location been exhausted of food that’s easy to obtain, and should I try to move on to
a more profitable location?
PAGE 76

• Information foraging theory claims that we ask similar
questions when we’re collecting information (Pirolli & Card,
“Information Foraging in Information Access Environments,”
CHI ‘95.):
• Where should I search?
• Which articles or paragraphs are worth reading?
• Have I exhausted this source, should I move on to the next
search result or a different search?
PAGE 77

• An important part of information foraging is the decision about whether a
hyperlink is worth following – i.e., does this smell good enough to eat?
• Users make this decision with relatively little information – sometimes only
the words in the hyperlink itself, sometimes with some context around it
(e.g., a Google search result also includes a snippet of text from the page, the
site’s domain name, the length of the page, etc.)
• These cues are information scent – the visible properties of a link that
indicate how profitable it will be to follow the link. (Chi et al, “Using
Information Scent to Model User Information Needs and Actions on the Web”,
CHI 2001.)
PAGE 78
Give Good Information Scent

• A link should smell like the content it leads to
PAGE 79

• Hyperlinks in your interface – or in general, any kind of feature,
including menu commands and toolbar buttons – should provide
good, appropriate information scent.
• Examples of bad scent include misleading terms,
incomprehensible jargon (like “Set Program Access and
Defaults” on the Windows XP Start menu), too-general labels
(“Tools”), and overlapping categories (“Customize” and “Options”
found in old versions of Microsoft Word).
PAGE 80

• Examples of good scent can be seen in the (XP-style) Windows Control
Panel on the left, which was carefully designed.
• Look, for example, at “Printers and Other Hardware.” Why do you think
printers were singled out?
• Presumably because task analysis (and collected data) indicated that
printer configuration was a very common reason for visiting the Control
Panel.
• Including it in the label improves the scent of that link for users looking
for printers. (Look also at the icon – what does that add to the scent of
Printers & Other Hardware?)
PAGE 81
• Date, Time, Language, and Regional Options is another example. It might

be tempting to find a single word to describe this category – say,
Localization – but its scent for a user trying to reset the time would be
much worse.
PAGE 82

• Here are some examples from the web. Poor information scent is on
the left; much better is on the right.
• The first example shows an unfortunately common pathology in web
design: the “click here” link.
• Hyperlinks tend to be highly visible, highly salient, easy to pick out
at a glance from the web page – so they should convey specific scent
about the action that the link will perform. “Click here” says nothing.
• Your users won’t read the page, they’ll scan it.
PAGE 83
Good & Bad Information Scent

PAGE 84
Good & Bad Information Scent

• Notice that the quality of information scent depends on the user’s
particular goal.
• A design with good scent for one set of goals might fail for another set.
• For example, if a shopping site has categories for Music and Movies,
then where would you look for a movie soundtrack?
• One solution to this is to put it in both categories, or to provide “See
Also” links in each category that direct the user sideways in the
hierarchy.
PAGE 85
Lots of Scent But Hard to Scan

• Here’s an example of going overboard with information scent.
• There is so much text in the main links of this page that it
interferes with your ability to Glance over the page.
• A better approach would be to make the links themselves short
and simple, and use the smaller text below each link to provide
supporting scent.
PAGE 86
Lots of Scent But Hard to Scan

PAGE 87
Referensi
• Learnability, MIT Open Courseware, User Interface Design and
Implementation, https://ocw.mit.edu/courses/electrical-engineering-
and-computer-science/6-831-user-interface-design-and-
implementation-spring-2011/lecture-notes/MIT6_831S11_lec02.pdf
• Designing The User Interface: Stategies for Effective Human-
Computer Interaction (Sixth Edition), Ben Shneiderman.
• Mental Models, Jakob Nielsen, https://www.nngroup.com/articles/
mental-models/
• http://www.wikihow.com/Use-Your-Turn-Signal
PAGE 88
Sumber Gambar
• http://orig15.deviantart.net/c8f0/f/2016/015/6/a/
windows_10_media_player_facelift_by_triggerspasm-d9o42pz.png
• https://upload.wikimedia.org/wikipedia/it/d/de/
Windows_Media_Player_10.jpg
• https://upload.wikimedia.org/wikipedia/vi/f/fb/WMPMM.png
• https://2.bp.blogspot.com/-_8LDW2CKOHw/U7NCgcFlAuI/AAAAAAAABYs/
iS5zjBHigKI/s1600/KMPlayer.3.9+(2).png
• http://cdn.portableapps.com/VLCPortable.png
• https://davescomputertips.com/wp-content/uploads/2014/10/itunes-12-4.jpg
• https://screenshots.en.sftcdn.net/en/scrn/30000/30671/winamp-5.jpg
PAGE

IFS2201 W02S01 Learnability2 RIS PDF

Uploaded by

Copyright:

Available Formats

IFS2201 W02S01 Learnability2 RIS PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IFS2201 W02S01 Learnability2 RIS PDF

Uploaded by

Copyright:

Available Formats

PAGE

The main thing is that everything become simple,

• “If a necessary feature has a high

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

Kinds of Consistency: Metaphor

• For example, it’s easy to say “a word

Kinds of Consistency: Metaphor

• The basic roles for metaphors is: use it if you have

Natural Mapping: Consistency of Layout

Natural Mapping: Consistency of Layout

Natural Mapping: Consistency of Layout

Natural Mapping: Consistency of Layout

Internal Consistency of Wording

• Keep it SIMPLE and UNIFORM, just like all technical writing

Internal Consistency of Wording

External Consistency in Wording:

• Use common words, not techie jargon

External Consistency in Wording:

• Use common words, not techie jargon

External Consistency in Wording:

• Use common words, not techie jargon

External Consistency in Wording:

• Speaking the User’s Language argues for synonyms and

External Consistency in Wording:

Affordances are how an interface

• The parts of a user interface should agree in perceived and

Use Appropriate Affordances

Use Appropriate Affordances

Use Appropriate Affordances

Use Appropriate Affordances

Use Appropriate Affordances

Use Appropriate Affordances

Evolution of Hyperlinks and Buttons

Evolution of Hyperlinks and Buttons

• Hyperlinks and buttons have evolved and changed

Evolution of Hyperlinks and Buttons

Whats Wrong with This?

Whats Wrong with This?

Find the Affordances

What Can You do With This Page?

If the user is trying to

What Can You do With This Page?

What Can You do With This Page?

Feedback: The Definition

Feedback: The Definition

Feedback: The Definition

Feedback Visibility Depends on Locus of Attention

• Spotlight of attention: attention focuses on one input channel

Feedback Visibility Depends on Locus of Attention

Feedback Visibility Depends on Locus of Attention

Visible Navigation State