1

Contents
Introduction Usability Some examples Types of User Interfaces Graphic Screen Design A Very Brief Case Study- Metro User interface References

What is user interface??

The user interface is the space where interaction between humans and machines occurs

Goal??

Introduction
The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of: Input, allowing the users to manipulate a system Output, allowing the system to indicate the effects of the users' manipulation

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.

USABILITY

Effort 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

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

USER INTERFACE

The User Interface today is often one of the most critical factors regarding the success or failure of a computer system Good UI design:

Approach: The UI is the system Things to consider

Design with the UI in mind Technical issues in creating the UI Users mental model Conceptual model
8

Increases efficiency Improves productivity Reduces errors Reduces training Improves acceptance

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?

(2) Mapping of Selected Mode Cursor re-enforces to Icon selection of current

Only active palette items visible Depressed button indicates current mapped item item

Microsoft Paint

10

(3)Entering a Date

11

(4)Mouse or Keyboard?

12

Types Of User Interfaces

1. Direct manipulation interface Direct manipulation interface is the name of a general class of user interfaces 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 as a rectangle, by dragging its corners or edges with a mouse.
13

Types Of User Interfaces

2. Graphical user interfaces Graphical user interfaces (GUI) accept input via devices such as computer keyboard and mouse and provide articulated graphical output on the computer monitor.

14

Types Of User Interfaces

3.Touchscreens Touchscreens are displays that accept input by touch of fingers or a stylus. Used in a growing amount of mobile devices and many types of point of sale, industrial processes and machines, self-service machines etc.

15

Types Of User Interfaces

4. Command line interfaces Command line interfaces, where the user provides the input by typing a command string with the computer keyboard and the system provides output 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

Which is the best representation?

17

Graphical Screen Design

Contrast

Repetition Alignment Proximity

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

repeat design throughout the interface consistency creates unity

visually connects elements creates a visual flow groups related elements separates unrelated ones

18

Ways to make a good Representation

1 Simple and natural dialogue
use the users conceptual model
match the users task sequence

19

2.Speak the users Language

Terminology based on users language for task

e.g. withdrawing money from a bank machine

20

3. Minimize the Users memory load

Computers good at remembering, people are not! Promote recognition over recall
menus, icons, choice

dialog boxes vs. commands, field formats relies on visibility of objects to the user (but less is more!)

21

3. Minimize users memory load

22

This is Better !!!

23

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
Whats it doing?
> Working. This will take 5 minutes...

>Working..

Time for coffee.

24

Provide feedback

Dealing with long delays

Cursors for short transactions

Percent done dialogs

time left estimated time

Random for unknown times

Contacting host (10-60 seconds)

cancel
25

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

Drawing Board LT

26

Errors..

27

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

The Metro User Interface

29

The Metro User Interface

The Windows Phone 7 Series User Interface (UI) is based off a Windows Phone design system internally codenamed Metro. The Metro design principles center on a look that uses type to echo the visual language of airport and metro system signage. The goal is to clearly direct end users to the content they want. Metro interfaces are supposed to embody harmonious, functional, and attractive visual elements. Ideally, good UI design should encourage playful exploration when interacting with the application and people should feel a sense of wonder and excitement.

30

Principles of design
Typography: Type is beautiful. Not only is it attractive to the eye, but it can also be functional. Motion is what brings the interface to life. Transitions are just as important as graphical design.

31

Principles of design
Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. Honesty. Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction.

32

Conclusion: Summary
We would like to conclude by saying that designing a User interface is of utmost importance otherwise it would render all the other applications useless 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 the computers more easy and practical.

33

References

http://windowsteamblog.com/windows_phone/b/wpd ev/archive/2010/03/18/windows-phone-7-series-uidesign-amp-interaction-guide.aspx http://www.microsoft.com/design/toolbox/tutorials/win dows-phone-7/metro/ http://www.howstuffworks.com/search.php?terms=user +interface http://nitpicker.pbworks.com/w/page/12451253/The%2 0Humane%20Interface http://www.wseas.us/elibrary/conferences/2010/Faro/DNCOCO/DNCOCO25.pdf

34

THANK YOU
35