why ? what - unitn.itlatemar.science.unitn.it/segue_userfiles/2013mobile/lecture1-1part.pdf · why...
TRANSCRIPT
![Page 1: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/1.jpg)
Spring 2013 1
Why User Interface Design ? What
Prof. Giuseppe Riccardi Dipartimento di Ingegneria e Scienza dell’Informazione
University of Trento [email protected]
Why ? What
![Page 2: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/2.jpg)
UI guidelines in Android
Spring 2013 2
http://developer.android.com/design/
![Page 3: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/3.jpg)
User Interface
Spring 2013 3
![Page 4: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/4.jpg)
On Terminology n UI design does not stop at displaying
Information via a GUI, MUI or VUI n That is where it starts! n That is when the human-machine interaction
can be grounded into actions as simple as: n Clicks, Taps, Swipes, Gestures, Typing n In order to accomplish a task (“Compose an email”)
n It applies to designing human-machine interactive systems and NOT only
Spring 2013 4
![Page 5: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/5.jpg)
Why
n In a typical mid-large SW project the UI designer function should be present
n In small project teams ( people < 2-3 ) might not be available.
n He/She a minority whereas the team is mostly made of programmers/managers
n It is important that programmers know what UI design is about. n Better Communicate SW system development
team. n Programmers might turn into UI designers! Spring 2013 5
![Page 6: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/6.jpg)
Lecture Plan n 1st Part
n User Interface Design n Principles ( applicable to any Human-Machine
Interface System ) n Psychological and Cognitive Motivations
n 2° Part n Mobile UI guidelines n Prototyping: WireFraming n Examples
Spring 2013 6
![Page 7: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/7.jpg)
Human – Computer Interaction
H C
ARTICULATION PERFORMANCE
PRESENTATION OBSERVATION
TYPING
POINTING
SPEECH
VISION
VISION
PRINT GUI
TTS HEARING
7
8
2
Spring 2013 7
![Page 8: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/8.jpg)
Spring 2013 8
De-Constructing Communication
Complexity
Devices
Signal Input / Output
INTERACTION
![Page 9: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/9.jpg)
Spring 2013 9
Human Computer Interaction The Interface
n Device n Input Device: Mouse, Keyboard, Joystick, Audio, .. n Output: Screen, Speakers, Virtual Reality goggles
n Interface n GUI n WIMP (Windows, Icons, Menus & Pointers) [Xerox ’70s]
n Human-Machine Interaction n Multimodal ( Speech, Text, Gestures )
n HCI principles n U3: Useful & Usable & Used
![Page 10: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/10.jpg)
Spring 2013 10
Demo Mobile Phone 1990
Useful Usable Used
![Page 11: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/11.jpg)
Outline n Intro n Principles ( Design Rules ) n Foundations
n Perception n Vision n Attention n Memory n Task Execution
Spring 2013 11
Reference for the lectures : “Designing with the mind in mind”, Jeff Johnson
![Page 12: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/12.jpg)
User Interface Design n Educated ART
n Creativity n Human Interaction Understanding
n Based on n Science (Cognitive, Psychology) n Engineering
n Goal of Designing interactive systems based on requirements n SW, HW n Interaction System (User, Machine)
Spring 2013 12
![Page 13: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/13.jpg)
Bridge Design and Engineering (0)
Spring 2013 13
n Many solutions to the problem of
“ Design and Build a bridge from point A to B, that can carry car/truck traffic, pedestrians, be stable in super-windy conditions, earthquakes etc..”
![Page 14: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/14.jpg)
Bridge Design and Engineering (1)
Spring 2013 14
![Page 15: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/15.jpg)
Bridge Design and Engineering (2)
Spring 2013 15
![Page 16: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/16.jpg)
House design
Spring 2013 16
n Given a set of requirements n Location n Real estate space n Energy saving materials n Project costs
n There are many solutions n Different Aesthetic appeal n Space layouts n Expected people behavior
![Page 17: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/17.jpg)
House design: Project 1
Spring 2013 17
![Page 18: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/18.jpg)
Spring 2013 18
House design: Project 2
![Page 19: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/19.jpg)
Spring 2013 19
Artifact requires
n Engineering (Technology & Systems) n Science (Cognitive, Psychology..) n User/Social acceptance
n Reward (“it takes from A to B, it saves time, it is safe, it is fun! It is beautiful! ”)
n Aesthetics ( sensorial information ) universals n Architecture, Industrial, User design
n Require all of the above to reach a point equilibrium == solution
n Not unique! n Overt time!
![Page 20: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/20.jpg)
Spring 2013 20
GUI design: Microsoft OS
Windows 8
1990 1995 2001 2009 2012
Windows 3.0
Windows 95
Windows XP
Windows 7
![Page 21: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/21.jpg)
Spring 2013 21
Towards a Science of HCI Systems
n Engineering of Bridge Building n DOES not need people to evaluate the solution!
n In HCI systems, users are part of it. n They are needed to study and evaluate
n Usability Testing n Limited by the number of users and delay btw
prototype and final engineered solution
![Page 22: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/22.jpg)
Spring 2013 22
A word of advice from S. Jobs:
![Page 23: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/23.jpg)
Spring 2013 23
UI Design Principles
n They guide towards optimal equilibrium of requirements
n Do not provide analytical solution n Should allow to avoid errors in early phases
n System, User Requirements, Prototyping n And not to rediscover each time dos and donts
n “color blindness” n They may be Ambiguous and Contradictory n Goal to UNDERSTAND the motivations of such
principles so to GUIDED in executive decisions.
![Page 24: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/24.jpg)
Spring 2013 24
Guidelines – A (Shneiderman 1987)
n Strive for Consistency n Cater to Universal Usability n Offer Informative Feedback n Design Tasks Flows to yield closure n Prevent Errors n Permit Easy Reversal of Actions n Make Users feel They are in Control n Minimize Short-Term Memory Load
![Page 25: Why ? What - unitn.itlatemar.science.unitn.it/segue_userFiles/2013Mobile/lecture1-1Part.pdf · Why ? What. UI guidelines in Android ... ( Speech, Text, Gestures ... Spring 2013 10](https://reader031.vdocument.in/reader031/viewer/2022030505/5ab3a3697f8b9aea528e71c9/html5/thumbnails/25.jpg)
Spring 2013 25
Guidelines – B (Nielsen and Molich 1990)
n Consistency and Standards n Visibility of System Status n Match between System and Real World n User Control and Freedom n Error Prevention n Flexibility and Efficiency of Use n Aesthetics and Minimalist Design n Help Users Recognize, Diagnose and Recover from
Errors n Provide Online Documentation and Help