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.aspx7/28/2019 user interfACING
35/35
THANK YOU