User Interface Redesign for Special Topic

The assignment content provides guidance on how to approach a user-interface redesign project. It emphasizes the importance of incorporating relevant literature and research findings into the project, particularly in areas where there may be specific concerns or issues related to the topic being addressed. The content also highlights the need for clear and concise annotations of screen shots to facilitate understanding of usability issues associated with particular components and tasks.

Literature Review, Kinds of Usability
Issue and making a Walkthrough
Using the research literature, outline the kinds of usability and user experience issue that might be
raised by your chosen topic. Gather evidence from e.g. the Internet, and the ux literature e.g.
hcibib.org and acm.org/dl to support your argument.
Ask workshop helpers to suggest ‘kinds of issue’ and sources of relevant previous work.
Frequently Asked Questions
Q: What do you mean ‘usability issue’?
A ‘usability issue’ is ‘a usability problem’, but said in a way that encourages investigation and
discussion, rather than presuming fault and making people defensive.
Q: What do you mean ‘kind of usability issue’?
I mean a general type of issue. Not an instance issue, such as ‘the font for the Help button
in the header is too small’, and not a very generic, bland issue, such as ‘this website is not
very user-friendly’, but a mid- level of detail that makes useful distinctions about the
qualities of interaction that might be lacking, and the perceptions that might arise, given the
type of users, tasks, and technology application of concern, say ‘readability’ and ‘findability’.
The ‘qualities of interaction’ lecture identifies some possible ‘kinds of issue’. Examples
include ‘guessability’ (of a door activated by an invisible mechanism such as face-
recognition), or ‘engagement’ with a game.
Q: Where can I find good ‘literature’?
 www.acm.org/dl. Search in the proceedings of the annual CHI (Computer Human
Interaction) conference- the ‘Human Factors in Computer Systems series)
 www.hcibib.org. Search this online bibliography. This will point you to various conferences
and journals, many of which are accessable online from a KU terminal or via the KU library.
If you know the name of the article, you may be able to google it directly.
If you cannot find articles about your particular system e.g. ‘sports shops’, try searching for the kind
of issue you want to know about e.g. ‘ease of learning’, ‘design of icon sets’, ‘spoken help’
Q: Are news and practitioner blogs ‘literature’?
No.
The ‘news’ about trends in the real world you collected last week is not really ‘scholarly material’ – it
describes ‘NOW’.

Practitioner blogs are better than nothing, but they may not have been reviewed by anyone who is
any good. You might be learning easily digestible ‘half-truths’ that do not generalise very well. Let
me tell you the story of ‘the 3 click rule’ (a user should be able to achieve their goals in 3 clicks or
less). This rule was promoted by many people, but soon confirmation dialogs were being omitted
‘because it added an extra click’ and wizard pages became cluttered ‘because we can only have 3
clicks’. There is something in the ‘3 click rule’ – one more click means additional workload, and if
removing a click reduces workload that’s good. However, users do many kinds of mental work.
Acting (clicking) is workload, but so is problem-solving, perceiving and remembering. Reducing click
workload might not be a good idea if so doing increases ‘problem-solving’ and ‘perception’
workload, as in the examples above. Good design reduces the need for cognitive work (of all kinds,
and overall), not just the work of clicking (to do this).
You can still find ‘the 3 click rule’ on the net.
Q: Is a text book ‘literature’?
Yes, but it may not help your project very much.
Textbooks tend to contain information relevant to most projects in general, and which everyone
needs to know to even attempt a user-interface redesign project. As such, it tends to repeat the
lectures, and we expect each other to know this already.
You need additional material about the special concerns and issues of your topic .e.g. not
‘Shneidermans 10 golden rules’, but ‘design guidelines for touch screens’; not ‘how to conduct a
focus group’ but ‘how to get evaluative feedback from children’; not ‘how to conduct a usability test’
but findings of a previous usability evaluation of a system like yours’.
Q: Do I have to have a separate literature review section?
No. Good students weave citations to references into their argument. But I recommend a separate
section in the handout, because I find a separate ‘Literature Review’ section is a good start, and
benefitting from the literature is harder than it seems. Weaker students often avoid scholarly
material altogether – but please don;t avoid it. Create a separate literature review section - this is a
good place to start.
As you draft and redraft your coursework you may find that you can introduce other people’s work
throughout your report as it is required to support your own arguments, conclusions or design
decisions. These arguments tend to evolve as your better understand the topic and as you ask
critical questions of your early drafts. Identify and summarise the literature for now, and work out
how it is relevant and useful. You can ‘weave it in’ later.
Q: How does the literature review help?
Use the literature to:

 Set your work in context. Have similar systems or products been usability tested before?
What kinds of issue were reported then? How is your system different?
 Suggest user interface components, design patterns or design guidelines for your styleguide.
(Recall, your styleguide can contain rules etc. which only work for your topic. Expect to add
specific content over and above that supplied by Microsoft and Yale)
 Provide insights about your concerns – reveal new information about your kind of user, their
tasks and your context of use. The structure of the task of ’seeking information’, or the fact
that ‘work contacts’ are treated significantly differently to ‘personal contacts’ in
communication might not be immediately obvious to everyone. Your analysis can be based
on literature as well as your own data.
For example, (I'm not recommending you read these particular papers - I'm just tyring to persuade
you it will actually help):

Leon Barnard , Ji Soo Yi Julie A. Jacko , Andrew Sears, 2007,
"Capturing the effects of context on human performance in mobile
computing systems." They evaluate mobile apps in the dark, outside and walking, rather
than at a desk top, in a usability lab). If you are evaluating a mobile app, this paper might
help you decide whether you should conduct the evaluation in a laboratory, in out and
about, in the field
 Sefelin, Tscheligi, Giller, 2003, "Paper prototyping - what is it good for? A comparison of
paper- and computer-based low fidelity prototyping", Proceedings of CHI 2003. Might help
you discuss the strengths and weaknesses of the prototyping tools you select.
Paek, Chang, Almog badget and Sengupta, 2010 A Practical Examination of Multimodal
feedback and guidance signals for mobile touchscreen keyboards. If your topic is
touchscreen keyboards, this paper includes findings that suggest good (or bad) features for
your redesign.
All these papers are in the acm digital library.

Q: How should I annotate my screen shots?
If screen elements are difficult to identify by name, then an overlay can be useful (see below). In this
example, however, the title text on the interface is large enough to read (so why bother ...?) and the
red labels obscure details that might be important. At least the annotation is visually distinct from
the interface.
Walk the reader through a task from the user’s point of view, using numbered steps and a
legend. The example below does this for steps 1 and 2, but steps 3 - 6 just describe ‘what
selected widgets do’ (which is obvious , and so not valuable information for our purposes).
For our purposes, they should be in a different order, and as related to a user goal.

Moving the mouse over the taskbar icon will result in the popup window displaying.
Moving the mouse off of the taskbar icon will delay a fraction of a second and then fade the
popup window out of view. The short delay allows the mouse to seamlessly move over the
desktop and over the popup window. This allows time for the fade out to be cancelled and the
user can interact further with the popup window.
The "PIN" button pins the popup window open regardless of where the mouse pointer is on the
desktop.
The "CLOSE" button unloads the popup window and taskbar icon and closes the application.
Sample buttons that could be used in an application - I wanted to create an effect where the
buttons appear to pop in to focus.
This radio button group provides a demonstration of how easily the taskbar icon can be
changed.
Adding annotations as call-outs or comments that state the usability issue associated with particular
screen components (and tasks) also help the reader to ‘see the problem too’ (and remember, in the
real world, if the rest of the team do not appreciate your findings ... did you ever really have any?).
On the other hand, there may not be sufficient space to state the issue in full, and your evaluation