User Interface

30

description

Looking at the user interface form HCI and technical point of view. and a short review over colors.

Transcript of User Interface

Page 1: User Interface
Page 2: User Interface

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

Page 3: User Interface

THE ART OF

COLOR

Page 4: User Interface

COLOR WHEEL

Page 5: User Interface
Page 6: User Interface

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

Page 7: User Interface

ORANGE COLOR

VIBRANTENERGETIC COLOR

FRUIT EARTH AUTUMN

MORE FRIENDLY MOVEMENT IN GENERAL

CHANGING SEASON

IMPORTANT

The bright orange box draws attention to its contents

Page 8: User Interface

YELLOW COLOR

SUNSHINEHAPPINESS

HOPEHUGE VIEW

MORE FRIENDLYFATE

LOOK ANTIQUE

COWARD

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

Page 9: User Interface

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

Page 10: User Interface

BLUE COLOR

CALMNESSSADNESS

STABLERELIGIOUS

RESPONSIBILITY

STRONG

PEACE

EXCELLENCE

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

Page 11: User Interface

PURPLE COLOR

IMAGINATIONROYALTY

CREATIVITYROMANTIC

MOURNING

ROMANCE

SPRING

LUXURY

appropriate for the Asprey luxury goods brand

Page 12: User Interface

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

Page 13: User Interface

WHITE COLOR

WEDDINGPURITY

GOODNESS

PARADISE

FUTUREMINIMALIST DESIGN

DEATH

HEALTH

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

Page 14: User Interface

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

Page 15: User Interface

COMPARISON OF UIs

VS

iOS Android

Page 16: User Interface

HOME SCREEN

Page 17: User Interface

NOTIFICATION

Page 18: User Interface

MULTITOUCH

Page 19: User Interface

MULTI TASKING

Page 20: User Interface

BEST OF THE CLASSICS

Trial and Error

Works for small systems

Systematic approach

Page 21: User Interface

USABILITY

Some systems are easy to use

Others are a nightmare

For example The difference between old and new text processors

Page 22: User Interface

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

Page 23: User Interface

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

Page 24: User Interface

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

Page 25: User Interface

USABILITY FACTORS

Fit for use (or functionality)

Ease of learning

Task efficiency

Ease of remembering

Subjective satisfaction

Understandability

Page 26: User Interface

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?

Page 27: User Interface

WHY USABILITY IS HARD?

Classical approach

Task analysis

Early prototype

Usability test

Page 28: User Interface

PROTOTYPES OF UIs

Hand-drawn mock-up

Tool-drawn mock-up

Screen prototype

Function prototype

Page 29: User Interface

THE BEST PROTOTYPES

Usability testing (finding the usability problems)

Changing the design

Defining what to program

Discussing solutions with users

Page 30: User Interface

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

[email protected]