Designing an HCI

1. Designing an HCI 3.3.2

2. This presentation covers: • 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.

3. Introduction • 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!

4. Introduction • 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

5. Introduction Quantity of information Font

6. Colour • 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.

7. Colour • 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.

8. Colour • 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.

9. Colour • 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.

10. Layout • 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.

11. Layout • 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!

12. Layout • 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.

13. Layout Look closely and you’ll see that all the tools in the main application window have been disabled whilst the Print toolbox is active.

14. Layout • 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.

15. Quantity of information • Loremipsumdolor sit amet, consecteturadipiscingelit. Curabitur nisi purus, tristique vitae congue at, molestie ac lectus. Donec quam massa, condimentumcommodoauctor et, tempus sit amettellus. Nam dapibus, turpisvelconsecteturtempor, risusmetusullamcorper ante, egetrhoncustortororcinec ante. Nam laoreet, augue non pharetraornare, ligulaaugueconvallis magna, id gravidamauristellus non velit. Aeneanrutrumnibhegetrisusposuereultrices. Nam quam ligula, egestas sit ametdapibus in, volutpat at neque. Maecenas quistortorsednibhconvalliscursus. Fuscenuncdiam, consectetur sit ametconsequat sit amet, imperdietvelodio. Sedtinciduntarcu non nisi imperdietmollis. Sedfeliselit, eleifendeuconsectetur id, imperdiet non libero. • Etiamdapibus, nisi utsempercongue, arcupuruselementumfelis, sit ametvenenatis mi odioquismetus. Aliquameratvolutpat. Utmaurisodio, lobortisegetfermentum ac, sagittis ac est. Aliquam vitae odiomassa, a tristique ante. Aeneanbibendum, tortornecornareultrices, elitturpisaliquam lacus, imperdieteleifend dui tellus non justo. Maecenas placeratleoquismassapharetraneccursusmetus tempus. Pellentesque habitant morbitristiquesenectus et netus et malesuada fames ac turpisegestas. Curabiturquisauguescelerisqueloremconsecteturmolestie et id enim. Maurisullamcorpereuismodeuismod. Duisfeugiatmassaeujustoplacerat at dignissimlectussemper. Praesentquiscommodosapien. • Nullamegetadipiscing magna. Utmolestieauctorturpisnecscelerisque. In vitae euismoderat. Cum sociisnatoquepenatibus et magnisdis parturient montes, nasceturridiculus mus. Donecinterdumbibendummassaegetsuscipit. In sit ameteratenim. Aliquamsodalesnibh non ipsumiaculisconvallis. Crasrutrumullamcorpereuismod. Vestibulum non velitlibero. Crasornareegestasarcu, sedscelerisqueorcimalesuada et. Etiam non tortoregetipsumpretiumfacilisis in sit ametvelit. Crasmolestiehendreritmassamattismalesuada. Sedsagittisbibendumegestas. Phasellustellusmetus, fringilla ac imperdiet at, tempus vitae augue. Sednec nisi a ipsumullamcorpersodalessed non nunc. Aenean non odioarcu. Maecenas pellentesque, dolor id dictum sagittis, leoauguegravidaleo, sit ameteleifendpurus dui ac lacus. Donec in convallisaugue. • Loremipsumdolor sit amet, consecteturadipiscingelit. Pellentesquevolutpattemporiaculis. Suspendissepotenti. Praesent ac nibhurna, sedtristiquelorem. Crasconvallissollicitudinnulla in faucibus. Nuncviverraleoeget quam bibendumcondimentum. Nulla in augue in mi vestibulumeleifend. Mauris sit ametblanditurna. Nunc vitae erosegettellusrutrumlobortis. Quisque id purus ac telluslobortiscursus. • Curabitur in risusut dui elementumpellentesque at a nibh. Suspendissepotenti. Donecnecnibh at felisiaculiscondimentumscelerisque et ligula. Duisfringilla ante mollisestiaculislacinia. Curabiturquis dictum eros. In hachabitasseplateadictumst. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Suspendisseporttitor, risus a sagittisbibendum, orcilectusaccumsannisl, sedviverraturpis nisi sit ametmetus. Aeneanaliquamjustoutdiamtemporpulvinar. Cum sociisnatoquepenatibus et magnisdis parturient montes, nasceturridiculus mus. Proingravidarhoncuseratneccommodo. Aenean sit ameterat magna. • Donecconsequatestuteratfringilla id cursusestaccumsan. Donec sit ametodioutrisusfaucibusdapibusvel vitae ipsum. Duisegestasfelisnec lacus porttitor in ultrices magna placerat. Donec id turpisenim. Suspendissenecipsumsed quam euismodeuismodnec id diam. Maurislobortisdapibusvelit, ac ullamcorper lacus pellentesque vel. Nullamdapibussollicitudin dictum. Duisvestibulumfaucibusdolor, dapibusrutrumenimtincidunt sit amet. Sedutmaurismetus. Seduteratsed nisi mattisgravida. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Sedvehicularisuselit, a sodalesfelis. Morbi lacus sapien, adipiscingpharetrapharetravel, conguequislorem. Donec at ligulatortor, quiscongue ante. Sedtinciduntliberoquisleovenenatisegetviverradolorvehicula. Aliquamtemporaliquammassa vitae luctus. • Donecconsequatestuteratfringilla id cursusestaccumsan. Donec sit ametodioutrisusfaucibusdapibusvel vitae ipsum. Duisegestasfelisnec lacus porttitor in ultrices magna placerat. Donec id turpisenim. Suspendissenecipsumsed quam euismodeuismodnec id diam. Maurislobortisdapibusvelit, ac ullamcorper lacus pellentesque vel. Nullamdapibussollicitudin dictum. Duisvestibulumfaucibusdolor, dapibusrutrumenimtincidunt sit amet. Sedutmaurismetus. Seduteratsed nisi mattisgravida. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Sedvehicularisuselit, a sodalesfelis. Morbi lacus sapien, adipiscingpharetrapharetravel, conguequislorem. Donec at ligulatortor, quiscongue ante. Sedtinciduntliberoquisleovenenatisegetviverradolorvehicula. Aliquamtemporaliquammassa vitae luctus.

16. Quantity of information • Loremipsumdolor sit amet, consecteturadipiscingelit. Curabitur nisi purus, tristique vitae congue at, molestie ac lectus. Donec quam massa, condimentumcommodoauctor et, tempus sit amettellus. Nam dapibus, turpisvelconsecteturtempor, risusmetusullamcorper ante, egetrhoncustortororcinec ante. Nam laoreet, augue non pharetraornare, ligulaaugueconvallis magna, id gravidamauristellus non velit. Aeneanrutrumnibhegetrisusposuereultrices. Nam quam ligula, egestas sit ametdapibus in, volutpat at neque. Maecenas quistortorsednibhconvalliscursus. Fuscenuncdiam, consectetur sit ametconsequat sit amet, imperdietvelodio. Sedtinciduntarcu non nisi imperdietmollis. Sedfeliselit, eleifendeuconsectetur id, imperdiet non libero. • Etiamdapibus, nisi utsempercongue, arcupuruselementumfelis, sit ametvenenatis mi odioquismetus. Aliquameratvolutpat. Utmaurisodio, lobortisegetfermentum ac, sagittis ac est. Aliquam vitae odiomassa, a tristique ante. Aeneanbibendum, tortornecornareultrices, elitturpisaliquam lacus, imperdieteleifend dui tellus non justo. Maecenas placeratleoquismassapharetraneccursusmetus tempus. Pellentesque habitant morbitristiquesenectus et netus et malesuada fames ac turpisegestas. Curabiturquisauguescelerisqueloremconsecteturmolestie et id enim. Maurisullamcorpereuismodeuismod. Duisfeugiatmassaeujustoplacerat at dignissimlectussemper. Praesentquiscommodosapien. • Nullamegetadipiscing magna. Utmolestieauctorturpisnecscelerisque. In vitae euismoderat. Cum sociisnatoquepenatibus et magnisdis parturient montes, nasceturridiculus mus. Donecinterdumbibendummassaegetsuscipit. In sit ameteratenim. Aliquamsodalesnibh non ipsumiaculisconvallis. Crasrutrumullamcorpereuismod. Vestibulum non velitlibero. Crasornareegestasarcu, sedscelerisqueorcimalesuada et. Etiam non tortoregetipsumpretiumfacilisis in sit ametvelit. Crasmolestiehendreritmassamattismalesuada. Sedsagittisbibendumegestas. Phasellustellusmetus, fringilla ac imperdiet at, tempus vitae augue. Sednec nisi a ipsumullamcorpersodalessed non nunc. Aenean non odioarcu. Maecenas pellentesque, dolor id dictum sagittis, leoauguegravidaleo, sit ameteleifendpurus dui ac lacus. Donec in convallisaugue. • Loremipsumdolor sit amet, consecteturadipiscingelit. Pellentesquevolutpattemporiaculis. Suspendissepotenti. Praesent ac nibhurna, sedtristiquelorem. Crasconvallissollicitudinnulla in faucibus. Nuncviverraleoeget quam bibendumcondimentum. Nulla in augue in mi vestibulumeleifend. Mauris sit ametblanditurna. Nunc vitae erosegettellusrutrumlobortis. Quisque id purus ac telluslobortiscursus. • Curabitur in risusut dui elementumpellentesque at a nibh. Suspendissepotenti. Donecnecnibh at felisiaculiscondimentumscelerisque et ligula. Duisfringilla ante mollisestiaculislacinia. Curabiturquis dictum eros. In hachabitasseplateadictumst. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Suspendisseporttitor, risus a sagittisbibendum, orcilectusaccumsannisl, sedviverraturpis nisi sit ametmetus. Aeneanaliquamjustoutdiamtemporpulvinar. Cum sociisnatoquepenatibus et magnisdis parturient montes, nasceturridiculus mus. Proingravidarhoncuseratneccommodo. Aenean sit ameterat magna. • Donecconsequatestuteratfringilla id cursusestaccumsan. Donec sit ametodioutrisusfaucibusdapibusvel vitae ipsum. Duisegestasfelisnec lacus porttitor in ultrices magna placerat. Donec id turpisenim. Suspendissenecipsumsed quam euismodeuismodnec id diam. Maurislobortisdapibusvelit, ac ullamcorper lacus pellentesque vel. Nullamdapibussollicitudin dictum. Duisvestibulumfaucibusdolor, dapibusrutrumenimtincidunt sit amet. Sedutmaurismetus. Seduteratsed nisi mattisgravida. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Sedvehicularisuselit, a sodalesfelis. Morbi lacus sapien, adipiscingpharetrapharetravel, conguequislorem. Donec at ligulatortor, quiscongue ante. Sedtinciduntliberoquisleovenenatisegetviverradolorvehicula. Aliquamtemporaliquammassa vitae luctus. • Donecconsequatestuteratfringilla id cursusestaccumsan. Donec sit ametodioutrisusfaucibusdapibusvel vitae ipsum. Duisegestasfelisnec lacus porttitor in ultrices magna placerat. Donec id turpisenim. Suspendissenecipsumsed quam euismodeuismodnec id diam. Maurislobortisdapibusvelit, ac ullamcorper lacus pellentesque vel. Nullamdapibussollicitudin dictum. Duisvestibulumfaucibusdolor, dapibusrutrumenimtincidunt sit amet. Sedutmaurismetus. Seduteratsed nisi mattisgravida. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Sedvehicularisuselit, a sodalesfelis. Morbi lacus sapien, adipiscingpharetrapharetravel, conguequislorem. Donec at ligulatortor, quiscongue ante. Sedtinciduntliberoquisleovenenatisegetviverradolorvehicula. Aliquamtemporaliquammassa vitae luctus. WARNING: Information Overload!

17. Quantity of Information • 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.

18. Font Size and Style • 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.

19. Font Size and Style • 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.

20. FUN FACTS • Our eyes are deisnged to anasyleshaeps. • Wehn you raed a wrod you dno’tatcaullyraedecahletetr...but you look at the shpae of the wrod. • As lnog as the frsit and lsatletetr are corecrt and you hvae all the leterts in the wrod, you can undresantdwaht a wrodsyaseevn if it is slpeticnorertcly.

21. Complexity of language • 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? ...

22. Complexity of language • 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!

23. Types of controls • Early systems consisted of a command line interface. • These were slow and didn’t really help those who were new to computer systems.

24. Types of control • Modern systems now make use of a combination of buttons, forms and menus to help the user navigate and use the system.

25. Buttons • 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.

26. Buttons • 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.

27. Forms • 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.

28. Forms • 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.

30. Forms • Question Under what circumstances would a lead designer want to design a form-based interface for the users of a system? • Answer When he knows that predictable data will be entered into the system.

31. Tabbed Forms • 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.

32. Tabbed Forms • 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!).

33. Menus • 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.

34. Menus • Most applications make use of a menu system to help people use their application.

35. Activities • Investigate the following: • 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?