lOMoARcPSD|17140771

User interface desgin

User Interface Design (University of Greenwich)

StuDocu is not sponsored or endorsed by any college or university

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)
 lOMoARcPSD|17140771

Background
Over the recent year’s household waste has been rapidly increasing around the world every two hours every
household throws enough trash to fill up the world’s largest ship with waste. That is twelve container ships every
single day and four thousand five hundred and seventy container ships in a year.
According to a study done by the world counts by the year 2050 the amount of household waste will raise by 70%
reaching 3.4billion tons a year meaning that the waste generation will actually OutSpace population growth by
more than double. Household waste can be extremely dangerous to human beings and to the society if it’s not
recycled properly according to research done by (United States Environmental Protection Agency) some left over
household products which are thrown in for recycling have a high possibility of catching fire or might even
explode in certain circumstances. Every household has products such as batteries, paints and oils which are very
dangerous if not properly recycled
They are very many recycling applications out there to download after doing research and looking at the reviews
all users had were having problems with the interface of the applications some of them weren’t responsive the
others had to little information which confused the users even more.
Therefore, throughout this report we will develop a Mid fidelity prototype to enlighten people around the world
about where and what and how to recycle. The Mid fidelity prototype will follow the User Interface Design
Guidelines, legal and ethical constraints.

Relevant issues in the user interface design

Responsive issues

Non responsive design this is where an application does not adapt to the given resolution of the device size this
makes immensely hard for users to navigate around the application this normally is an issue for users who are
accessing the application through a mobile device

Lack of contrast
Clear and powerful contrast between the elements helps users what is the core information about the application
they are visiting and what it entails a week contrast makes the text burly to the eye and very hard for a user to
grasp information.

Inconsistent style
An excellent user interface should be consistent with the style which makes it easier for users to have a clear
understanding and respond to the given content. Consistency enables users to feel familiar with the application or
website. When an application or website does not have a consistent design throughout all pages’ users find it so
difficult to concentrate and pay attention.

Confusing forms
Most applications use forms for new users to sign up and for existing users to login this should be very clear to the
user on what from they are about to fill and where it leads them next. Users normally feel so disoriented and
would not want to visit the site or use the application cause it’s so confusing.

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Lack of text hierarchy

The text is not properly formatted and not well organized user finds it so hard to read the information displayed.

1.2 A review of relevant guidelines and standards

Design guidelines are a set off recommendations on how to apply design principles to provide a positive user
experience. Designers often use guidelines to judge how to adopt principles such as efficiency, learnability and
consistency so that they are able to create fascinating designs and meet the users’ needs.

Below we will discuss some of the guidelines Jacob Nielsen’s Usability Heuristics and
Shneiderman’s Eight Golden Rule

Visibility of system status (Jacob Nielsen’s Usability Heuristics)

The application or the system must always demonstrate the status of an on-going operation to the users until it is
complete. So that user will be able to get a clear understanding of the progress of that specific process or activity.
Never create a situation where the user is totally confused over certain progress or process.

Match between system and the real world (Jacob Nielsen’s Usability Heuristics)
Make the interaction easier between users and the system try using components that users are very familiar with.
Try matching the design system with the real world with the use of text icons or illustrations and many more.
Users will be able to relate to the system and find it very easy to interact with.
User control and freedom (Jacob Nielsen’s Usability Heuristics)
A user should always have full control and freedom over the entire system. They should always be able to undo an
action they did by mistake. It’s very frustrating for user once they make a mistake and they are unable to undo the
action.

Error prevention (Jacob Nielsen’s Usability Heuristics)

Human beings always have a tendency to make mistakes a system should always have appropriate suggestions and
notifications when needed which can then lessen the mistakes a user can make. Recognition rather than recall
(Jacob Nielsen’s Usability Heuristics)
Always try to minimize the use of the user’s memory always remind them of task that needs to be done. Don’t let
the users think too much.

Strive for consistency (Shneiderman’s Eight Golden Rule)

When designing system, it should be consistent throughout all the pages and have the same design this will enable
users to complete their tasks and goals much more easily.

Enable frequent users to use shortcuts (Shneiderman’s Eight Golden Rule)

Users can always benefit from the use of shortcuts especially if they need to complete the same task frequently
designers may use hidden commands abbreviations even function keys.

Mobile application principals and guidelines Hand position controls

Hand positions should always be kept in mind when designing a mobile application research shows that 49% of
people rely on one thumb common features should be placed in easily accessible regions while actions such as
delete buttons should be placed in harder to reach areas to avoid errors

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Navigation Intuitive

Users should always be able to navigate through an application with clear pathways and be able to complete all the
tasks without requiring any explanations normally users don’t have patience to work over complex steps if the step
takes too much effort to discover and navigate chances are you will lose you users.

Less typing using auto complete date

Filling up forms using a mobile is normally such a boring process. The best thing to do is to lessen the quantity of
typing required. Using the complete will really help users they would need to keep on typing to fill the forms.

Regarding the issue dealing with responsiveness the prototype will be made to fit on a custom design which will
fit every device screen and will adapt to a given screen.

The prototype will entail a good contrast which with perfect text sizes and background colors which will
complement the images which will keep the users visually interested by just looking at the prototype.

The porotype will have a consistent design throughout all the pages this is going to make the porotype very easy to
use because every page will be quite similar.

Every form that will be present in the prototype will have label on top if it which enable users to know what form
they are filling and where it leads them next.

The prototype will consist of a loading screen once which will give the users a greater understanding on the
progress or activity.

The prototype will contain many icons and illustrations just so we can match the prototype and real world
together which users will able to relate to.

The prototype will consist of error messages which will prompt users when they are almost going to make a
mistake.

Since the prototype will be used by phones and not desktops all features and buttons will be kept on easily
accessible regions. Every page on the prototype will have links which will make navigation much easier.

The prototype will have the same text size throughout all the pages and all the text will be well organized which is
going to make it much easier for the user to read.

User groups

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Thomas Richards USER PERSON

AGE : 30 MOTIVATIONS
• It’s very important to recycle appropriately
OCCUPATION: Bank
Manager • Values convenience an efficiency

LOCATION: New York • Environmental awareness

Practical Efficient
Proactive • Intrinsic motivation to do good

GOALS
• Spend 1-2 minutes’ maximum sorting recycling

• Reassurance that their actions are making a global impact

• More education on what’s recyclable

FUSTRATIONS

• Never has time to sort out waste

“Recycling is often more about
• Lack of knowledge about recycling
feeling good than doing good”
• People never seem to care about recycling

BRANDS BIO
Thomas is a 34-year-old bank manager who normally works more than 55 hours a week.

He is politically aware and understands that climate change and plastic pollution is very
finds it very difficult to practice recycling in his busy lifestyle. Thomas always forgets a

Visual design

Prototype 1 sketch

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Prototype sketch 2

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

10

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Color theory
This is the collection of rules and guidelines which designers use to communicate with users
through appealing color schemes in visual interfaces. According to sir Isaac newton colors are
normally categorized into three groups
1. Primary (red, blue, yellow)
2. Secondary (mixes of primary colors)
3. Tertiary (mixes of primary and secondary colors)

Justification of colors in the prototype sketch 1

This prototype will consist of primary colors we decided to use yellow as the theme color for the
prototype according to phycologists they say the color yellow has a positive effect to humans
because of the brightness the prototype is about a recycling application so the color yellow
would make a lot of sense because recycling is a positive impact an individual makes to the
environment. The background color that we had picked was blue the color blue always instils
peace calmness and tranquility.

Justification of colors in the prototype sketch 2

The prototype will consist of tertiary colors we decided to use green as the color for the buttons
and it will be mixed with a bit of yellow to make a lighter shade of the color green. The reason
why we choose green as the theme color we choose it because green is a known as a “cool
color” The color green also associated with nature and recycling is all about saving the
environment

The background color will be white so that users will be able to clearly see the text on the screen
and the color white is often used convey a sense of cleanliness since recycling waste is also part
of cleanliness that’s why we choose to use the color white

Font theory
This is graphical representation of text normally there are two types of font categories which
designers normally use when designing an interface, they are sans and sans serif the difference
between sans and sans serif is that sans serif has a decorative stroke that finishes off the end of a
letters stem.

Justification of the font that will be used in the prototype 1

The font we decided to use the font Arial which belongs to the sans category of fonts the font
Arial is a very well know font its mostly used on newspapers. The reason why we choose this
font is because in the prototype there will be important information about recycling that we
don’t want users to miss out on and this font is very easy to read and people seem to always love
the Arial font.

Justification of the font that will be used in the prototype 2

11

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

For the prototype of the recycling waste application we decided to choose the times new roman
font which belongs to the sans and serif category of fonts.
The reason why we choose times new roman is because the font is very easy to read since the
prototype will have information about recycling waste it’s very important for the users to be
able to understand what will be displayed on the screen that’s why we decided to choose times
new roman because it’s easy to read and everyone is very familiar with the times new roman
font. The font size that we choose for the prototype was the size 12 its relatively easy for users
to read since its not to small and it’s not too big.

Layout design
When designers are designing an application they normally two main design layouts they choose
from the consist of symmetrical and asymmetrical. Symmetrical layout is basically elements are
equally divided on each side and the center of the page is used the guide. Asymmetrical layout is
the opposite of a symmetrical layout there is a lack of symmetry in the design.

Justification of the layout design used for prototype 1

The layout design used for the prototype was symmetrical because we wanted to draw the user’s
attention to all areas of the page therefore we decided to go for a symmetrical layout.

Justification of the font that will be used in the prototype 2

The layout design we decided to use for this prototype was the asymmetrical layout design
because we wanted the prototype to look attractive and appealing to the users that why we used
the asymmetrical design layout although the prototype does not purely consist of the
asymmetrical design layout some of the pages consist of a symmetrical design layout

Graphic design elements

The graphic design elements consist of lines, shapes, color value and texture its very important
to have graphic elements in a design for it to look more attractive for the users

Justification of graphics design elements used in porotype 1

The prototype design had a lot of shapes and colors. The colors used for very bright colors to
attract users the prototype consists of rectangles where icons are kept inside and also images.

Justification of graphic design elements used in prototype 2

This prototype had a lot of graphic elements which included shapes and icons there was the use
of bright colors used to attract users and it was also used for making the prototype unique. The
prototype had a lot of space which gives the users eye a virtual rest.

12

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)

 lOMoARcPSD|17140771

Evaluation
The evaluation and justification that will be discussed below is about the two prototype sketches
and why one was chosen. Mobile phones nowadays have become very popular and everybody
uses them therefore we were asked to come up with two prototype designs for a recycling waste
application on a mobile phone we will be looking at the two sketches one of the prototype is
called Werecycle and Irecycle.

13

Downloaded by ovikrush sivanantham (oviyan2001@gmail.com)