User Interface

USER INTERFACEMohammad hosein majdi,Iman gorji douz,Abolfazl ghale noi,Mostafa alinaghi pour

THE ART OF

COLOR

COLOR WHEEL

RED COLOR

WARM COLORRASING BLOOD PRESURE

FIREWARFARE DEVIL

CUPIDGOOD LOCK

VIOLENCE

RESPIRATION RATE ANGER

IMPORTANT

DANGER

The dark shades of red in this design give a powerful and elegant feel to the site

ORANGE COLOR

VIBRANTENERGETIC COLOR

FRUIT EARTH AUTUMN

MORE FRIENDLY MOVEMENT IN GENERAL

CHANGING SEASON

IMPORTANT

The bright orange box draws attention to its contents

YELLOW COLOR

SUNSHINEHAPPINESS

HOPEHUGE VIEW

MORE FRIENDLYFATE

LOOK ANTIQUE

COWARD

yellow used here really stands out against the lower-value black and gray

GREEN COLOR

CALMENERGETIC

STABLEGROWTH

DOWN TO EARTHAFFLUENCE

LACK OF EXPERIENCE

BEGINING

The bright green header of this site gives it a very natural and vibrant feeling

BLUE COLOR

CALMNESSSADNESS

STABLERELIGIOUS

RESPONSIBILITY

STRONG

PEACE

EXCELLENCE

The light, muted blue of this site gives a very relaxed and calm impression

PURPLE COLOR

IMAGINATIONROYALTY

CREATIVITYROMANTIC

MOURNING

ROMANCE

SPRING

LUXURY

appropriate for the Asprey luxury goods brand

BLACK COLOR

STRONGEST NATURAL COLORPOWER

ELEGANCEFORMALITY

MOURNING

SENCE OF MODERNDEATH

EVIL

The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design

WHITE COLOR

WEDDINGPURITY

GOODNESS

PARADISE

FUTUREMINIMALIST DESIGN

DEATH

HEALTH

White combined with gray gives a soft and clean feeling to this design

GRAY COLOR

MOODYCOOL

DEPRESSING

MODERN

COMPLEXITYCOLOR OF MOURNING

COMMON FOR BACKGROUND

PROFESSIONALISM

The cooler gray on this site gives a modern, sophisticated feel to the site

COMPARISON OF UIs

VS

iOS Android

HOME SCREEN

NOTIFICATION

MULTITOUCH

MULTI TASKING

BEST OF THE CLASSICS

Trial and Error

Works for small systems

Systematic approach

USABILITY

Some systems are easy to use

Others are a nightmare

For example The difference between old and new text processors

USER INTERFACE

The part of the system that you see

Human-computer interaction

The interaction takes place through the UI

User interfaces vs. technical interfaces

DESIGN OF UI

In principle, it is easy to make a UI

Many systems have adequate functionality, but they may not be easy to use

The interaction takes place through the UI

If we insist that the system shall also be easy to use, the design process becomes so hard

WHAT IS USABILITY ?

Programmers give different definitions

The essential

• The user’s experience• Can he find out how to use it?• Does it make his work easy?

Functionality and easy of use form usability

USABILITY FACTORS

Fit for use (or functionality)

Ease of learning

Task efficiency

Ease of remembering

Subjective satisfaction

Understandability

IMPORTANCE OF USABILITY

Who is responsible for usability?

It was the user’s department

This is slowly changing

Why is usability more important now than earlier?

WHY USABILITY IS HARD?

Classical approach

Task analysis

Early prototype

Usability test

PROTOTYPES OF UIs

Hand-drawn mock-up

Tool-drawn mock-up

Screen prototype

Function prototype

THE BEST PROTOTYPES

Usability testing (finding the usability problems)

Changing the design

Defining what to program

Discussing solutions with users

REFRENCES

Designing with the Mind in Mind Jeff Johnson - 2010

User Interface Design SorenLauesen - 2005

User Interface Design Wikipedia

The art of color Johannes Itten - 1974

Color Theory for Designer Smashing Magazine

A primer of visual literacy Donis a. Dondis - 1973

Eng.manp@gmail.com