7/28/2019 user interfACING

1/35

INTERFACE forusersCOMPUTER SCIENCE

1

7/28/2019 user interfACING

2/35

ContentsIntroductionUsability

Some examples

Types of User Interfaces

Graphic Screen Design

A Very Brief Case Study- Metro User interface

References

2

7/28/2019 user interfACING

3/35

What is user interface??The user interface is the space where interaction between humans andmachines occurs

Goal??

3

7/28/2019 user interfACING

4/35

IntroductionThe user interface includes hardware (physical) and software (logical)components. User interfaces exist for various systems, and provide ameans of:

Input, allowing the users to manipulate a system

Output, allowing the system to indicate the effects of the users'manipulation

4

7/28/2019 user interfACING

5/35

What is usability?Usability is a measure of the effectiveness,

efficiency and satisfaction with which

specified users can achieve specified goalsin a particular environment.

5

7/28/2019 user interfACING

6/35

USABILITYEffort Minimum effort

Design

It describes how well a product can be used for its

intended purpose by its target users with efficiency,effectiveness, and satisfaction

6

7/28/2019 user interfACING

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

7/28/2019 user interfACING

8/35

USER INTERFACEThe User Interface today is often one of the most critical factorsregarding the success or failure of a computer systemGood 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

7/28/2019 user interfACING

9/35

Examples(1)

9

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?

7/28/2019 user interfACING

10/35

Only active

palette items

visible

Depressed

button

indicates

current

mapped item

Cursor re-enforces

selection of currentitem

Microsoft Paint

(2) Mapping of Selected Mode to

Icon

10

7/28/2019 user interfACING

11/35

(3)Entering a Date

11

7/28/2019 user interfACING

12/35

(4)Mouse or Keyboard?

12

7/28/2019 user interfACING

13/35

Types Of User Interfaces1. Direct manipulation interfaceDirect manipulation interface is the name of a general class of userinterfaces that allow users to manipulate objects presented to them,using actions that correspond at least loosely to the physical world.

An example of direct-manipulation is resizing a graphical shape, such asa rectangle, by dragging its corners or edges with a mouse.

13

7/28/2019 user interfACING

14/35

Types Of User Interfaces2. Graphical user interfacesGraphical user

interfaces (GUI) accept inputvia devices such as computerkeyboard and mouse and

provide articulated

graphical output onthe computer monitor.

14

7/28/2019 user interfACING

15/35

Types Of User Interfaces3.TouchscreensTouchscreens are displays that accept input by touch of fingers or

a stylus. Used in a growing amount of mobile devices and many typesof point of sale, industrial processes and machines, self-service

machines etc.

15

7/28/2019 user interfACING

16/35

Types Of User Interfaces4. Command line interfacesCommand line interfaces, where the user provides the input by typinga command string with the computer keyboard and the system providesoutput by printing text on the computer monitor. Used by programmers

and system administrators, in engineering and scientific environments,and by technically advanced personal computer users.

And lots and lots more

16

7/28/2019 user interfACING

17/35

Which is the best

representation?

17

7/28/2019 user interfACING

18/35

Graphical Screen DesignContrast 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

7/28/2019 user interfACING

19/35

Ways to make a good

Representation1 Simple and natural dialogue use the users conceptual model

match the users task sequence

19

7/28/2019 user interfACING

20/35

2.Speak the users

LanguageTerminology based on users language for task e.g. withdrawing money from a bank machine

20

7/28/2019 user interfACING

21/35

3. Minimize the Users

memory loadComputers good atremembering, people are not!Promote recognition overrecall

menus, icons, choice dialog boxesvs. commands, field formats

relies on visibility of objects to theuser (but less is more!)

21

7/28/2019 user interfACING

22/35

3. Minimize users memory

load

22

7/28/2019 user interfACING

23/35

This is Better !!!

23

7/28/2019 user interfACING

24/35

4. Provide FeedbackContinuously 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

24

>Working..Whats it

doing?> Working.

This will take

5 minutes...

Time for

coffee.

7/28/2019 user interfACING

25/35

Provide feedbackDealing with long delays Cursors

for short transactions

Percent done dialogs

time left

estimated time

Random

for unknown times

25cancel

Contacting host (10-60 seconds)

7/28/2019 user interfACING

26/35

Provide feedback

26

Drawing Board LT

Multiple files being copied,

but feedback is file by file.

7/28/2019 user interfACING

27/35

Errors..

27

7/28/2019 user interfACING

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

7/28/2019 user interfACING

29/35

The Metro User Interface

29

7/28/2019 user interfACING

30/35

The Metro User InterfaceThe Windows Phone 7 Series User Interface (UI) is based off aWindows Phone design system internally codenamed Metro. TheMetro design principles center on a look that uses type to echo thevisual language of airport and metro system signage. The goal is toclearly direct end users to the content they want. Metro interfaces aresupposed to embody harmonious, functional, and attractive visualelements. Ideally, good UI design should encourage playful explorationwhen interacting with the application and people should feel a sense ofwonder and excitement.

30

7/28/2019 user interfACING

31/35

Principles of designTypography: Type is beautiful. Not only is it attractive to the eye, but itcan also be functional.

Motion is what brings the interface to life. Transitions are just asimportant as graphical design.

31

7/28/2019 user interfACING

32/35

Principles of designContent not Chrome is one of the more unique principles of Metro. Byremoving all notions of extra chrome in the UI, the content becomes themain focus.

Honesty. Design explicitly for the form factor of a hand held device

using touch, a high resolution screen and simplified and expeditedforms of interaction.

32

7/28/2019 user interfACING

33/35

Conclusion: SummaryWe would like to conclude by saying that designing a User interface is ofutmost importance otherwise it would render all the other applicationsuseless because the user would be all disinterested.

The new user interfaces that have come up recently(Natural user

interface, Multi touch interface)have actually made our using of thecomputers more easy and practical.

33

7/28/2019 user interfACING

34/35

Referenceshttp://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://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://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://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.aspxhttp://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx

7/28/2019 user interfACING

35/35

THANK YOU