user interface (1)

7/28/2019 User Interface (1)

1/35

1


2/35

Contents

Introduction

Usability

Some examples

Types of User Interfaces

Graphic Screen Design

A Very Brief Case Study- Metro Userinterface

References

2


3/35

What is user interface??

The user interface is the space whereinteraction between humans andmachines occurs

Goal??

3


4/35

Introduction

The user interface includes hardware(physical) and software (logical)components. User interfaces exist for

various systems, and provide ameans of:

Input, allowing the users tomanipulate a system

Output, allowing the system toindicate the effects of the users'manipulation

4


5/35

What is usability?

Usability is a measure of the

effectiveness, efficiency and

satisfaction with which specified

users can achieve specified

goals in a particular

environment.

5


6/35

USABILITY

EffortMinimum effort

Design

It describes how well a product can beused for its intended purpose by its

target users with efficiency,effectiveness, and satisfaction

6


7/35

Why is usability important?

poor usability results in anger and frustration

decreased productivity in the workplace

higher error rates physical and emotional injury

equipment damage

loss of customer loyalty

costs money

7


8/35

USER INTERFACE

The User Interface today is often one of the mostcritical factors regarding the success or failure of acomputer system

Good UI design: Increases efficiency Improves productivity Reduces errors Reduces training Improves acceptance

Approach: The UI is the system Design with the UI in mind

Things to consider Technical issues in creating the UI Users mental model Conceptual model

8


9/35

Examples(1)

Modern telephone systems

standard number pad

two additional buttons * and #

Problem many hidden functions

operations and outcome completely invisible

*72+number = call forward

can I remember that combination? if I enter it, how do I know it caught?

how can I remember if my phone is still forwarded?

9


10/35

Only activepalette itemsvisible

Depressedbuttonindicatescurrentmapped

item

Cursor re-enforces

selection of currentitem

Microsoft Paint

(2) Mapping of Selected Mode

to Icon

10


11/35

(3)Entering a Date

11


12/35

(4)Mouse or Keyboard?

12


13/35

Types Of User Interfaces

1. Direct manipulation interface

Direct manipulation interface is thename of a general class of user

interfaces that allow users tomanipulate objects presented to them,using actions that correspond at leastloosely to the physical world.

An example of direct-manipulation isresizing a graphical shape, such as arectangle, by dragging its corners oredges with a mouse.

13


14/35


2. Graphical userinterfacesGraphical userinterfaces (GUI)accept input via

devices such ascomputerkeyboard andmouse andprovidearticulatedgraphical outputon the computermonitor.

14


15/35


3.Touchscreens

Touchscreens are displays thataccept input by touch of fingers or

a stylus. Used in a growing amountof mobile devices and many typesof point of sale, industrial processes

and machines, self-service machinesetc.

15


16/35


4. Command line interfaces Command line interfaces, where the user

provides the input by typing a commandstring with the computer keyboard and

the system provides output by printing texton the computer monitor. Used byprogrammers and system administrators, inengineering and scientific environments,and by technically advanced personal

computer users.

And lots and lots more

16


17/35

Which is the bestrepresentation?

17


18/35

Graphical Screen Design

Contrast make different things different brings out dominant elements mutes lesser elements creates dynamism

Repetition repeat design throughout the interface consistency creates unity

Alignment

visually connects elements creates a visual flow

Proximity groups related elements separates unrelated ones

18


19/35

Ways to make a goodRepresentation

1 Simple and natural dialogue

use the users conceptual model

match the users task sequence

19


20/35

2.Speak the users Language

Terminology based on users language for task

e.g. withdrawing money from a bank machine

20


21/35

3. Minimize the Usersmemory load Computers good at

remembering, peopleare not!

Promote recognition

over recall menus, icons, choice

dialog boxes vs.commands, field formats

relies on visibility of

objects to the user (butless is more!)

21


22/35

3. Minimize users memoryload

22


23/35

This is Better !!!

23


24/35

4. Provide Feedback

Continuously inform the user about

what it is doing

how it is interpreting the users input

user should always be aware of what is going on

>Working..Whats itdoing?

> Working.This will take5 minutes...

Time forcoffee.

24


25/35

Provide feedback

Dealing with long delays

Cursors

for short transactions

Percent done dialogs time left

estimated time

Random

for unknown times

cancel

Contacting host (10-60 seconds)

25


26/35

Provide feedback

Drawing Board LT

Multiple files being copied,but feedback is file by file.

26


27/35

Errors..

27


28/35

HELP!!!!

Reference manuals

used mostly for detailed lookup by experts

rarely introduces concepts

thematically arranged

on-line hypertext

search / find

table of contents

index

cross-index

28


29/35

The Metro User Interface

29


30/35

The Metro User Interface

The Windows Phone 7 Series User Interface (UI)is based off a Windows Phone design systeminternally codenamed Metro. The Metrodesign principles center on a look that uses typeto echo the visual language of airport and

metro system signage. The goal is to clearlydirect end users to the content they want. Metrointerfaces are supposed to embodyharmonious, functional, and attractive visualelements. Ideally, good UI design shouldencourage playful exploration when interacting

with the application and people should feel asense of wonder and excitement.

30


31/35

Principles of design

Typography: Type is beautiful. Notonly is it attractive to the eye, but itcan also be functional.

Motion is what brings the interface tolife. Transitions are just as importantas graphical design.

31


32/35

Principles of design

Content not Chrome is one of themore unique principles of Metro. Byremoving all notions of extra chrome

in the UI, the content becomes themain focus.

Honesty. Design explicitly for the formfactor of a hand held device using

touch, a high resolution screen andsimplified and expedited forms ofinteraction.

32


33/35

Conclusion: Summary

We would like to conclude by sayingthat designing a User interface is ofutmost importance otherwise it wouldrender all the other applications useless

because the user would be alldisinterested.

The new user interfaces that havecome up recently(Natural userinterface, Multi touch interface)haveactually made our using of thecomputers more easy and practical.

33


34/35

References

http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx

http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/

http://www.howstuffworks.com/search.php?terms=user+interface

http://nitpicker.pbworks.com/w/page/12451253/The%20Humane%20Interface

http://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdf

34
http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://www.howstuffworks.com/search.php?terms=user+interfacehttp://www.howstuffworks.com/search.php?terms=user+interfacehttp://nitpicker.pbworks.com/w/page/12451253/The%20Humane%20Interfacehttp://nitpicker.pbworks.com/w/page/12451253/The%20Humane%20Interfacehttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdfhttp://nitpicker.pbworks.com/w/page/12451253/The%20Humane%20Interfacehttp://nitpicker.pbworks.com/w/page/12451253/The%20Humane%20Interfacehttp://www.howstuffworks.com/search.php?terms=user+interfacehttp://www.howstuffworks.com/search.php?terms=user+interfacehttp://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx


35/35

THANK YOU

user interface (1)

Documents