User Interface

Design & HCI

Nick Gachui
Literature review
This lesson will look into the issues of design and outline the research
undertaken on what makes a good website. Summarisations of
essential advice given by theorists are listed to identify key facts that
can help developers design a user friendly website for diverse users.
W3C
What is W3C?
• The W3C (World Wide Web Consortium) is an international
organisation that works together in order to develop usable and
accessible web standards. This is to ensure a long-term growth for the
web and help enable communication, commerce and knowledge to
be shared between users.
• Web Accessibility Initiative (WAI) explains how a web interface can be
improved and accessible for users that have disabilities when
following a set of principles that can help a site to be perceivable,
interactive, understandable and easy to navigate.
Usability and Accessibility
Usability and Accessibility are key components for a successful website design yet both tend to be ignored.
Usability is making a website fast and efficient for users to navigate and making sure information is presented in
a simple format and easy to read, where else Accessibility is to make sure that the content on the website is
available to everyone including those with disabilities.
W3C (WCAG, 2008) provided the following rules for creating a usable and accessible website:
• 1. Provide equivalent alternatives to auditory and visual content.
Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory
or visual content
• 2. Don't rely on colour alone.
Ensure that text and graphics are understandable when viewed without colour.
• 3. Ensure user control of time-sensitive content changes.
Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped.
• 4. Ensure direct accessibility of embedded user interfaces.
Ensure that the user interface follows principles of accessible design: device-independent access to functionality,
keyboard operability, self-voicing, etc.
Contd….

• 5. Design for device-independence.

Use features that enable activation of page elements via a variety of input devices

• 6. Provide context and orientation information.

Provide context and orientation information to help users understand complex pages
or elements.
• 7. Provide clear navigation mechanisms.
Provide clear and consistent navigation mechanisms -- orientation information,
navigation bars, a site map, etc. -- to increase the likelihood that a person will find
what they are looking for at a site. .
Guidelines, Principles and
Standards
Guidelines, Principles and Standards have been stated by theorists such as Nielson and Shneiderman to help designers develop
interface designs more efficiently and trustworthy.
Shneiderman’s Eight Golden Rules
• Shneiderman and Plaisant (2010) believe that the creation of guidelines document engages the design community in lively
discussions about input and output formats. Shneiderman had also stated eight golden which discuss how they can be
integrated into a design process.
• 1. Strive Consistency
The interface design as well as the functionality of the website should be consistent. Identical terminology needs to be used in
prompts, menus and help screens. Colour, fonts and layout also needs to be consistent throughout the website.
• 2. Enable Users to use Shortcuts
Shortcuts tend to be more understandable and easier for a diverse range of users which can enrich interface design as well as
faster.
• 3. Offer Informative feedback
System feedback is often expected from every user action whether it’s uncertain or significant.
• 4. Design Dialogs to Yield Closure
Actions should be organised from beginning, middle to end. When informative feedback is given as a group of actions is
complete, it gives the user satisfaction of accomplishment.
Contd..

• 5. Prevent Errors
The system should be designed in a way that the user cannot make serious errors.
• 6. Permit Easy Reversal of Actions
Actions should be reversible so the user knows that errors can be undone.
• 7. Support Internal Locus of Control
Users desire to be in control when using a system and responding to their actions
• 8. Reduce Short Term Memory Load
Too much information on a single interface should be avoided and kept simple. Users
have short-term memory capacity which will be reluctant to having to remember too
much information at once.
Nielson’s Heuristics
Guidelines are narrowly focused and principles tend to be more fundamental, widely applicable and enduring.
They also tend to need more classification. (Shneiderman,2010)
Before the development of any user interface, designers should begin to understand their intended users
profiling their age, gender, physical cognitive abilities therefore being able to list principles.
Nielson (2005) stated general principles for user interface design called Heuristics. These are known as
specific rules which show the importance of how users interact with what they are seeing and using.

• 1. Visibility of system status

Users should be informed about what is going on through appropriate feedback and within reasonable time.
• 2. Match between system and the real world
Words, phrases and concepts should be familiar to the user making information easily understood and valid.
• 3. User control and freedom
Users can often make mistakes and will want to correct these without having to go through an extended
dialogue. E.g. Undo and Redo functions.
Contd…

• 4. Consistency and standards

Users would want to be able to follow a straightforward process which uses the same
situations, actions and platforms without having to always think.
• 5. Error prevention
Appropriate design which prevents problems before it occurs.
• 6. Recognition rather than recall
Objects and actions should be visible to the user where they will not have to remember a set
of instructions. The system should be clear and easy retrievable.
• 7. Aesthetic and minimalist design
Irrelevant information should not be included. Containing information that is not essential
will weaken the visual appearance and content of the interface design.
Requirements Specification
• Objectives
1. Literacy Review of Usability, Accessibility and design elements
2. Determine target audience (User Groups)
3. Develop prototype design
• Clearly presented information
• Structure navigation
• Attractive and easy on the eye
4. Test prototype design against users
5. Evaluate design against criteria
User Groups
1. Adults
• Not all adults are computer literate in fact most adults are said to have moderate experience with the
web (Dawson, A. 2011). Adults are much less drawn to graphical animation which can be seen as
favouring text over graphics and prefer simple and usable websites.
2. Children
• Children in early education still have a lot to learn and their minds and bodies are still developing. The
ability to use the keyboard and mouse differs from adults (Dawson, A. 2011) as well as their knowledge.
And unlike adults, younger children favour graphical visuals over text as it attracts their attention more.
3. Disabilities
• Most users with disabilities tend to have a problem with the appearance and accessibility of websites
(Nielson, J.2006). For example, seeing combinations of background and blend in with foreground tend to
make text unreadable for users with visual disabilities. Like adults, users with disabilities will much prefer
simple and usable websites. Users with reduced eye sight will rely web pages that have acceptable font
sizes such as 11pt, 12pt and 14pt. these are common default font sizes used for web pages (Nieson, J.
2006).
Required Functions

• Interface must be clear without having too much graphical distractions

• Layout must be consistent on each page
• Content must be clear and concise without having to scroll a lot down a
page
• Content must be readable
• User must be able to navigate through each page easily
• Main Navigation must be consistent on each page
• The colour theme must be maintained which separates the background
from the content
Analysis
Evaluation of Existing Website
1. Layout and Content
Based on the chosen criteria:
• Consistent Design Theme throughout website
• Readable content for some users
• Content colour is separated from the background colour making text stand out, Use Opposite shades

The current layout of the content for the website is simple and easy on the eye however there are some pages
such as the Gallery and sub-links tend to be very lengthily and having to scroll down can be issue for users that
want to look for specific information. Many users may not even scroll down, as mentioned in the literature review,
many users tend to look at the screen as an F shape pattern ignoring the rest of the other content.
The manipulation of the images on the webpage are clearly too small and are stretched which makes them look
unpleasant. Some of them are even crammed together which ignores the use of spacing. Even though the images
are clickable, not many users will know this straight away. The structure of how the pictures are laid out is also an
issue as the sizes are not consistent and may appear unattractive and inaccessible for public users.
Contd…
2. Font and Colour
Based on the Chosen Criteria:
• There is a consistent design theme throughout website
• It follows the font size requirements however the colour is over saturated and hard to read

• The font used for the body content is readable however may not be for all users. The website used
Comic sans MS which is as its main font for its contents. Going back to the Literature review, Comic
sans MS is a Script font and was recommended not to be used because of character limitations and
not available on all computer machines.
• The rainbow graphics used on the school title has a playful and bright presence which reflects the
schools appearance however the intense hue saturated colours of the title on a clash too much with
the background. The colour combination of both background and text seems to almost blend in
together. Especially the green and yellow almost seem that they are absorbed into the background.
This will be hard to read for colour defiant users as focusing in to read the text can cause eye strain.
Contd…
3. Navigation
Based on the Chosen Criteria:
• There is a consistent navigation on all pages
• A consistent design theme throughout the website

• The navigation for the website works well however the orange and green again
clash against the background of the clouds which can be a visual problem. The
main issue could be the amount of links given as the main navigation and not all of
the pages are essential. As mentioned before Kyrnin, J. (2011) stated that having
more than five main navigation links should be avoided as it gives the users too
much to choose from. Not all links are considered important and could be sub-
linked.
Mobile/Tablet
1. Viewing a Website on a Mobile/Tablet
Viewing a website on a mobile differs a lot than it would on a Personal Computer (PC) as the screen
for both devices is different. Not all information can fit onto a Mobile screen like it does on a PC.
Nielson pointed out a number of constraints that affect can the use of websites on mobile devices.
• Small screens
• Difficulty when inputting data
• Downloading Issues
• Poorly designed interfaces

Therefore it is important that the amount of content on the screen is reduced to fit on a mobile-
optimised version making it less complex and usable. The Newsborough Primary School website
consists of lengthily information and graphics so cutting down to the most essential information is
necessary as well as modifying the layout extensively in order to fit onto a handset size screen.
Contd…
2.Seven Usability Guidelines for Mobile Web (Warsi, A. 2011):

• 1. Reduce amount of content

• 2. Single column layout
• 3. Set Navigation on the top and bottom of the page
• 4. Minimise text input
• 5. Would you need more than one mobile site?
• 6. Have a touchscreen and non-touchscreen design
• 7. Make use of input functionality (e.g. make calls)
Contd…
3. Website Optimisation for Mobile/Tablet
Fundamentals for making a website mobile-friendly:
• Content must be made visually accessible and appealing by using cascading
style sheets (CSS) to optimise usability on both mobile and tablet devices.
• Offering a classic and mobile version of the website gives the user more
viewing control and lets them decide which format they prefer to see either
on their mobile or tablet.
• Running your website through the W3C mobileOK Checker
(http://validator.w3.org/mobile/) ensures that your mobile-site is validated
and user friendly.
Homework.
Based on User Interface Design & HCI, Discuss:
a). Design
b). Development/Implementation
Testing
1. Heuristic Check List
• A usability check list had been drawn up based on Nielsons Heuristics.
This was used to test the paper based user interface based initially on
its design. The test was taken out on three users whom had given
feedback on their thoughts about the design of the new interface.
Contd…
2. Heuristic Evaluation on Feedback
• All three users gave the new school logo and title a full five marks and commented how
it was also attractive and fits the early years’ concept for the school. The school contact
details were also found identifiable and easy to find. The use of images and graphics
were praised as users thought that it shows a fun yet professional side to the school as
well as the website itself. They also had no problem reading through the contents on the
page and found it clear and concise.
• The contrast between the text and background is respectable as having black on
white/grey was common and expected by the users. This had the same impact on the
style and colour of the font. The size of the text was average as one user mentioned that
if the text was a size bigger as it might be more viewable to children visiting the site as
well has those with disabilities. Therefore having a function which allows the user to
change the size of the text could be considered as an idea to improve accessibility.
Contd…
3. User testing
• A paper based prototyping has been used to demonstrate the
websites functionality. This was tested with a voluntary user as a first
time visitor to the site. Both Scenarios illustrated in the development
process was used and has received feedback about the user’s
experience.
Evaluation
1. Prototype Evaluation
• The paper prototype created for the new interface has had positive feedback from users that
have participated in the testing process, however the next step will be to develop a fully
functioning prototype after an agreement is signed off by the school. Having a functioning
product will allow further usability and accessibility testing as well as a validation process
through the W3C. However the user interface design complies with the guidelines and principles
set for a user-friendly website and is concluded as the final design.
2. Project Evaluation
• Overall the deliverables for the overall project has been achieved and separated into different
levels. The User Interface Issues for the Newborough Primary School website have been
evaluated against the research undertaken within the Literature Review and from that a
personalised criteria has been listed in order to meet user requirements. Although the planning
and time schedule of the project was not strict enough there may have been some delays in
order to complete specific objectives however all discussions and ideas have been kept concise
and targets have been completed.
Contd…
3. Further Improvements
• Further Planning of Designs and Development
• Further information on W3C standards on further development on
the website
• A fully functioning website which could be tested on other parts of
the website apart from the interface design and navigation
• A mobile prototype could have been designed to show a potential
application could be made
 END
Any Comments and Questions are Welcome