Transcript Batch, Interactive and Real

3.3.2
• The use of colour, layout, quantity of
information on screen, size of font, complexity
of language and type of controls when
designing a human computer interface.
• When designing any system the most important
thing to consider is the user.
• Ultimately, the user is the person that will use the
system.
• The system may be really good at processing
data, but if the user struggles to use the system
then the speed at which data can be processed is
irrelevant as the user may not be able to input
data into the system fast enough!
• There are certain principles that should be
followed when designing an HCI but in general
a designer must consider the following:
– Use of colour
– Layout
– Quantity of information on screen
– Font size
– Complexity of language
– Type of controls
Colour
Quantity of
information
Layout
HCI
Complexity
of language
Font
Controls
• The use of colour can make or break a system.
• Companies invest millions of pounds in
developing a house style so that customers know
which organisation a product or service belongs
to.
• With that in mind, a designer should consider
how a house style could be incorporated into a
system.
• A designer should make sure that any colours used are used
not to make the product look ‘pretty’ but help improve it’s
functionality.
– Although making the product look good and modern is
important also!
• For example, the use of colour could be used to indicate
stages of data input.
Stage 1
Stage 2
Stage 3
• Another thing to remember is that
9% of the population is colour blind.
• The most common form is
Red/Green colour blindness.
• People with this problem use shades
to distinguish between the colours
but you have to check that the
colours used will not hinder the
efficiency of those users.
• Colours could also be used to indicate certain
things. For example:
– Red highlight to indicate test grades that were lower
than MEG grades and Green highlight to indicate
grades which are higher than MEG grades.
– This example might cause difficulties for those are
colour blindness.
Student
MEG
Test Grade
Student 1
C
C
Student 2
B
A
Student 3
A
B
• Where possible, the layout of a system should
remain consistent within itself and another
similar applications that may have been used
by the staff.
• This will ease the transition from one system
to another.
• The location of tools
should remain consistent
across system screens
also.
• In terms of what icons to
use - these should follow
the standard format e.g.
A floppy disk for saving, a
printer icon for printing,
scissors for cutting etc.
Hardly anyone uses a floppy disk to
save work on anymore! But...we still
use the icon to represent saving.
You would like that a more modern
save icon would be a USB pen or
something?
Because people are so used to looking
for the floppy disk it is unlikely to
change for a long time!
• Making sure the user knows what to interact
with is important also.
– A good way of doing this is disabling features of
the application which aren’t needed for the
current task.
– For example, when setting up print options only
the print option tools are enabled. Other tools,
such as font style and size, are disabled.
Look closely and you’ll
see that all the tools in
the main application
window have been
disabled whilst the Print
toolbox is active.
• Warning messages should be displayed in a
location which is clear to the user and will
demand their immediate attention.
• Help facilities should be in place but aren’t
always needed – the user just needs to know
how to access them.
– Help icons are often used for this.
•
•
•
•
•
•
•
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisi purus, tristique vitae congue at, molestie ac lectus. Donec quam massa,
condimentum commodo auctor et, tempus sit amet tellus. Nam dapibus, turpis vel consectetur tempor, risus metus ullamcorper ante, eget rhoncus
tortor orci nec ante. Nam laoreet, augue non pharetra ornare, ligula augue convallis magna, id gravida mauris tellus non velit. Aenean rutrum nibh
eget risus posuere ultrices. Nam quam ligula, egestas sit amet dapibus in, volutpat at neque. Maecenas quis tortor sed nibh convallis cursus. Fusce
nunc diam, consectetur sit amet consequat sit amet, imperdiet vel odio. Sed tincidunt arcu non nisi imperdiet mollis. Sed felis elit, eleifend eu
consectetur id, imperdiet non libero.
Etiam dapibus, nisi ut semper congue, arcu purus elementum felis, sit amet venenatis mi odio quis metus. Aliquam erat volutpat. Ut mauris odio,
lobortis eget fermentum ac, sagittis ac est. Aliquam vitae odio massa, a tristique ante. Aenean bibendum, tortor nec ornare ultrices, elit turpis
aliquam lacus, imperdiet eleifend dui tellus non justo. Maecenas placerat leo quis massa pharetra nec cursus metus tempus. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur quis augue scelerisque lorem consectetur molestie et id enim.
Mauris ullamcorper euismod euismod. Duis feugiat massa eu justo placerat at dignissim lectus semper. Praesent quis commodo sapien.
Nullam eget adipiscing magna. Ut molestie auctor turpis nec scelerisque. In vitae euismod erat. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec interdum bibendum massa eget suscipit. In sit amet erat enim. Aliquam sodales nibh non ipsum
iaculis convallis. Cras rutrum ullamcorper euismod. Vestibulum non velit libero. Cras ornare egestas arcu, sed scelerisque orci malesuada et. Etiam
non tortor eget ipsum pretium facilisis in sit amet velit. Cras molestie hendrerit massa mattis malesuada. Sed sagittis bibendum egestas. Phasellus
tellus metus, fringilla ac imperdiet at, tempus vitae augue. Sed nec nisi a ipsum ullamcorper sodales sed non nunc. Aenean non odio arcu. Maecenas
pellentesque, dolor id dictum sagittis, leo augue gravida leo, sit amet eleifend purus dui ac lacus. Donec in convallis augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat tempor iaculis. Suspendisse potenti. Praesent ac nibh urna, sed
tristique lorem. Cras convallis sollicitudin nulla in faucibus. Nunc viverra leo eget quam bibendum condimentum. Nulla in augue in mi vestibulum
eleifend. Mauris sit amet blandit urna. Nunc vitae eros eget tellus rutrum lobortis. Quisque id purus ac tellus lobortis cursus.
Curabitur in risus ut dui elementum pellentesque at a nibh. Suspendisse potenti. Donec nec nibh at felis iaculis condimentum scelerisque et ligula.
Duis fringilla ante mollis est iaculis lacinia. Curabitur quis dictum eros. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Suspendisse porttitor, risus a sagittis bibendum, orci lectus accumsan nisl, sed viverra turpis nisi sit amet
metus. Aenean aliquam justo ut diam tempor pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin
gravida rhoncus erat nec commodo. Aenean sit amet erat magna.
Donec consequat est ut erat fringilla id cursus est accumsan. Donec sit amet odio ut risus faucibus dapibus vel vitae ipsum. Duis egestas felis nec lacus
porttitor in ultrices magna placerat. Donec id turpis enim. Suspendisse nec ipsum sed quam euismod euismod nec id diam. Mauris lobortis dapibus
velit, ac ullamcorper lacus pellentesque vel. Nullam dapibus sollicitudin dictum. Duis vestibulum faucibus dolor, dapibus rutrum enim tincidunt sit
amet. Sed ut mauris metus. Sed ut erat sed nisi mattis gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Sed vehicula risus elit, a sodales felis. Morbi lacus sapien, adipiscing pharetra pharetra vel, congue quis lorem. Donec at ligula tortor, quis
congue ante. Sed tincidunt libero quis leo venenatis eget viverra dolor vehicula. Aliquam tempor aliquam massa vitae luctus.
Donec consequat est ut erat fringilla id cursus est accumsan. Donec sit amet odio ut risus faucibus dapibus vel vitae ipsum. Duis egestas felis nec lacus
porttitor in ultrices magna placerat. Donec id turpis enim. Suspendisse nec ipsum sed quam euismod euismod nec id diam. Mauris lobortis dapibus
velit, ac ullamcorper lacus pellentesque vel. Nullam dapibus sollicitudin dictum. Duis vestibulum faucibus dolor, dapibus rutrum enim tincidunt sit
amet. Sed ut mauris metus. Sed ut erat sed nisi mattis gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Sed vehicula risus elit, a sodales felis. Morbi lacus sapien, adipiscing pharetra pharetra vel, congue quis lorem. Donec at ligula tortor, quis
congue ante. Sed tincidunt libero quis leo venenatis eget viverra dolor vehicula. Aliquam tempor aliquam massa vitae luctus.
•
•
•
•
•
•
•
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisi purus, tristique vitae congue at, molestie ac lectus. Donec quam massa,
condimentum commodo auctor et, tempus sit amet tellus. Nam dapibus, turpis vel consectetur tempor, risus metus ullamcorper ante, eget rhoncus
tortor orci nec ante. Nam laoreet, augue non pharetra ornare, ligula augue convallis magna, id gravida mauris tellus non velit. Aenean rutrum nibh
eget risus posuere ultrices. Nam quam ligula, egestas sit amet dapibus in, volutpat at neque. Maecenas quis tortor sed nibh convallis cursus. Fusce
nunc diam, consectetur sit amet consequat sit amet, imperdiet vel odio. Sed tincidunt arcu non nisi imperdiet mollis. Sed felis elit, eleifend eu
consectetur id, imperdiet non libero.
Etiam dapibus, nisi ut semper congue, arcu purus elementum felis, sit amet venenatis mi odio quis metus. Aliquam erat volutpat. Ut mauris odio,
lobortis eget fermentum ac, sagittis ac est. Aliquam vitae odio massa, a tristique ante. Aenean bibendum, tortor nec ornare ultrices, elit turpis
aliquam lacus, imperdiet eleifend dui tellus non justo. Maecenas placerat leo quis massa pharetra nec cursus metus tempus. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur quis augue scelerisque lorem consectetur molestie et id enim.
Mauris ullamcorper euismod euismod. Duis feugiat massa eu justo placerat at dignissim lectus semper. Praesent quis commodo sapien.
Nullam eget adipiscing magna. Ut molestie auctor turpis nec scelerisque. In vitae euismod erat. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec interdum bibendum massa eget suscipit. In sit amet erat enim. Aliquam sodales nibh non ipsum
iaculis convallis. Cras rutrum ullamcorper euismod. Vestibulum non velit libero. Cras ornare egestas arcu, sed scelerisque orci malesuada et. Etiam
non tortor eget ipsum pretium facilisis in sit amet velit. Cras molestie hendrerit massa mattis malesuada. Sed sagittis bibendum egestas. Phasellus
tellus metus, fringilla ac imperdiet at, tempus vitae augue. Sed nec nisi a ipsum ullamcorper sodales sed non nunc. Aenean non odio arcu. Maecenas
pellentesque, dolor id dictum sagittis, leo augue gravida leo, sit amet eleifend purus dui ac lacus. Donec in convallis augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat tempor iaculis. Suspendisse potenti. Praesent ac nibh urna, sed
tristique lorem. Cras convallis sollicitudin nulla in faucibus. Nunc viverra leo eget quam bibendum condimentum. Nulla in augue in mi vestibulum
eleifend. Mauris sit amet blandit urna. Nunc vitae eros eget tellus rutrum lobortis. Quisque id purus ac tellus lobortis cursus.
Curabitur in risus ut dui elementum pellentesque at a nibh. Suspendisse potenti. Donec nec nibh at felis iaculis condimentum scelerisque et ligula.
Duis fringilla ante mollis est iaculis lacinia. Curabitur quis dictum eros. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Suspendisse porttitor, risus a sagittis bibendum, orci lectus accumsan nisl, sed viverra turpis nisi sit amet
metus. Aenean aliquam justo ut diam tempor pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin
gravida rhoncus erat nec commodo. Aenean sit amet erat magna.
Donec consequat est ut erat fringilla id cursus est accumsan. Donec sit amet odio ut risus faucibus dapibus vel vitae ipsum. Duis egestas felis nec lacus
porttitor in ultrices magna placerat. Donec id turpis enim. Suspendisse nec ipsum sed quam euismod euismod nec id diam. Mauris lobortis dapibus
velit, ac ullamcorper lacus pellentesque vel. Nullam dapibus sollicitudin dictum. Duis vestibulum faucibus dolor, dapibus rutrum enim tincidunt sit
amet. Sed ut mauris metus. Sed ut erat sed nisi mattis gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Sed vehicula risus elit, a sodales felis. Morbi lacus sapien, adipiscing pharetra pharetra vel, congue quis lorem. Donec at ligula tortor, quis
congue ante. Sed tincidunt libero quis leo venenatis eget viverra dolor vehicula. Aliquam tempor aliquam massa vitae luctus.
Donec consequat est ut erat fringilla id cursus est accumsan. Donec sit amet odio ut risus faucibus dapibus vel vitae ipsum. Duis egestas felis nec lacus
porttitor in ultrices magna placerat. Donec id turpis enim. Suspendisse nec ipsum sed quam euismod euismod nec id diam. Mauris lobortis dapibus
velit, ac ullamcorper lacus pellentesque vel. Nullam dapibus sollicitudin dictum. Duis vestibulum faucibus dolor, dapibus rutrum enim tincidunt sit
amet. Sed ut mauris metus. Sed ut erat sed nisi mattis gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Sed vehicula risus elit, a sodales felis. Morbi lacus sapien, adipiscing pharetra pharetra vel, congue quis lorem. Donec at ligula tortor, quis
congue ante. Sed tincidunt libero quis leo venenatis eget viverra dolor vehicula. Aliquam tempor aliquam massa vitae luctus.
• One of the biggest challenges a system designer faces is
passing on information to the user in the most minimal
way.
• Some designers create input forms with so many text
boxes, labels and instructions on the user simply gets
confused.
• Sometimes it is better to break up tasks over a series of
screens.
• Many websites use this technique when you are setting up
an account.
• Font size is often an issue when designing a
system.
• Too large and work space becomes an
issue.
• Too small and the font is hard to read.
• Choosing a good default font size is
important but it should also be changeable.
Some users might have difficulties in seeing
small text – so systems should have an
option in place to change the default font
size.
• Choosing the right font style is important also.
• Sans-serif fonts like:
– Verdanna
– Calibri
– Ariel
are more suited for on screen reading.
• Serif fonts like Times New Roman are better suited for printed
works.
• Some fonts are designed solely for small amounts of text – like on
posters. These tend to be very hard to read.
• Our eyes are deisnged to
anasyle shaeps.
• Wehn you raed a wrod you
dno’t atcaully raed ecah
letetr...but you look at the
shpae of the wrod.
• As lnog as the frsit and lsat
letetr are corecrt and you hvae
all the leterts in the wrod, you
can undresantd waht a wrod
syas eevn if it is slpet
icnorertcly.
• Some people enjoy
giving instructions...and
some of those people
like to sound really
clever by using fairly
complex language...
• That’s fine for
them...but for some of
us it leaves us feeling
confused and lost.
A complex question is the fallacy
of phrasing a question that, by
the way it is worded, assumes
something not contextually
granted, assumes something not
true, or assumes a false
dichotomy. To be a fallacy, and
not just a rhetorical technique,
the conclusion (usually the
answer to the question) must be
present either implicitly or
explicitly. What do you think?
...
• Making sure instructions are clear and in the simplest
form of the language is essential.
• Assumptions should not be made that all users have a
good handle on their spoken language!
– Ok it is safe to assume that the users will be able to speak
their language but remember...not all users are technically
minded.
– Providing help with errors is essential – don’t just give
them an error code! Explain what the error means and
how to fix it!
• Early systems consisted
of a command line
interface.
• These were slow and
didn’t really help those
who were new to
computer systems.
• Modern systems now make use of a
combination of buttons, forms and menus to
help the user navigate and use the system.
• Buttons allow complex tasks to be carried out very quickly.
– Macros can be created which perform a number of tasks with
just a click of a button.
– This saves the user time as they have less repetitive tasks to
carry out.
• Also, because a button now carries out the tasks less
mistakes are made through human error.
• The use of buttons also helps new users of the system. By
performing the tasks for the user, the only things the user
needs to worry about is making sure the conditions are
valid and they know which button to press.
• There are problems with using buttons though.
• If the conditions that the button requires to
operate are not valid then an error will occur.
– Data could be missing?
– The button could be pressed too early?
• If the macro the button uses doesn’t work
correctly then the user will need to have some
knowledge of how to use macros in order to fix it.
• Forms are highly directed.
• They know what kind of data they are going to
receive.
• They are often used on the World Wide Web.
– Text boxes
– Radio buttons
– Check boxes.
• Used for collecting predictable information.
• They usually consist of certain input objects
with clear instructions regarding how those
inputs should be dealt with.
• Submit buttons used to start validation of
data.
Under what circumstances would a lead
designer want to design a form-based
interface for the users of a system?
When he knows that predictable data will be
entered into the system.
• Designers will often use tabbed interfaces to help
users access information quickly and easily.
• Using tabbed browsing enables users to minimise
the time they spend interacting with the mouse.
• When you have completed inputting data into
one text box or radio button, a user can press the
tab button to move to the next input.
• Microsoft have gone down the tabbed route in
their new Office suite.
• They found that by putting tools in tabs helped
increase the efficiency in which people used their
software (after getting used to it!).
• Provides easy access to software.
• Usually grouped together logically.
– Editing tools all under one menu
– Formatting tools under another menu
• Basic input is mouse driven.
• Used to help break down large information systems so
information can be found quickly and efficiently.
– Especially good for weaker users of ICT.
• Most applications
make use of a menu
system to help people
use their application.
– What colours should be used if the person has:
• Colour blindness
• Dyslexia
– What is the recommended font style and size for web
pages?
– What readability tests are available to ensure the language
you use is suitable for the intended audience?
– What form controls are available and describe how they
could be used on an HCI?