Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Human-Com...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“It is no...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
How to pr...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design pa...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual fr...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual fr...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual fr...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Center st...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Center st...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Center st...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Card stac...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Card stac...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Closable ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Movable p...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Movable p...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Movable p...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Right/lef...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussio...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Right/lef...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Diagonal ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Diagonal ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Property ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Liquid la...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Liquid la...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Liquid la...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
responsiv...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussio...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussio...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
flexible ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
flexible ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussio...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
graceful
...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
http://br...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design Pa...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI offers...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI offers...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Affordan...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
There mus...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interacti...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interacti...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interacti...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interacti...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Button gr...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Button gr...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Button gr...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Prominent...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Prominent...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Preview
J...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Preview
p...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
desktop
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Web
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
mobile
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
indetermi...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Cancelabi...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Cancelabi...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
a hard-to...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Multi-lev...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Multi-lev...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Command h...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Macros
Je...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Macros
we...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Macros
re...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design pa...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
A frequen...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
WYSIWYG (...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
WYSIWYG (...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
OmmWriter...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Direct ma...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Direct ma...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Direct ma...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Selection...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Text edit...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Selection...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Edit-in-p...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Edit-in-p...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Smart sel...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Smart sel...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Composite...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Composite...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Spring-lo...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Spring-lo...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Constrain...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Magnetism...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Magnetism...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Magnetism...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Guides
Je...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Guides
gu...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Paste var...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Paste var...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interacti...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 3:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 5:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 5:...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Remark:
k...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
user inte...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Within in...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
the ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
the ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
the ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Anxiety, ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
auto...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
auto...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Negative ...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusi...
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lect...
Upcoming SlideShare
Loading in …5
×

HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow

452 views
369 views

Published on

UI Design: layout, actions & editing patterns. Flow. For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
452
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow

  1. 1. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Human-Computer Interaction from design patterns to flow
  2. 2. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “It is not the answer that enlightens, but the question.” Eugene Ionesco
  3. 3. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco How to present the content to convey meaning, sequence, and points of interaction?
  4. 4. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design patterns layout
  5. 5. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual framework Jenifer Tidwell, 2005 assure the use of layout, color and visual style in a consistent manner
  6. 6. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual framework must be flexible regarding the visual design, depending on the presented content
  7. 7. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual framework example: visual consistency of the traditional applications and Web sites
  8. 8. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Center stage Jenifer Tidwell, 2005 most important part of the UI is located in a center zone, grouping additional tools in small-size areas
  9. 9. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  10. 10. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Center stage designed by using: size color headlines context
  11. 11. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  12. 12. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Center stage it could be used in conjunction to other design patterns – e.g., for Web navigation
  13. 13. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Card stack Jenifer Tidwell, 2005 content sections are placed on different panels (cards) that can be stacked only one card is visible at a given moment
  14. 14. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Card stack usually, labeled – horizontal/vertical – tabs are used the meaning of each label is important
  15. 15. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  16. 16. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  17. 17. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Closable panels Jenifer Tidwell, 2005 placing the content in separate labeled containers that could be expanded
  18. 18. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Movable panels Jenifer Tidwell, 2005 put different tools or sections of content onto separate panels, and let the user move them around to form a custom layout
  19. 19. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Movable panels users have liberty to rearrange their workspace
  20. 20. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Movable panels there are situations when it could be inconvenient why?
  21. 21. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Right/left alignment Jenifer Tidwell, 2005 permits alignment of the content within a form/table labels must be right aligned fields must be left aligned
  22. 22. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  23. 23. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion …good or bad design?
  24. 24. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Right/left alignment in certain cases, it could be substituted by other design patterns
  25. 25. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  26. 26. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  27. 27. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  28. 28. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  29. 29. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  30. 30. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Diagonal balance Jenifer Tidwell, 2005 arrange page elements in an asymmetric fashion, but balance it by putting visual weight into both the upper-left and lower-right corners
  31. 31. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  32. 32. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Diagonal balance “Asymmetrical layouts can achieve equilibrium as well, but their tenser, more dramatic form of balance depends on careful manipulation to compensate visually for differences in the size, position, and value of major elements.” Kevin Mullet & Darrell Sano
  33. 33. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Property sheet Jenifer Tidwell, 2005 presenting specific properties of an object usually, a two-column layout or a form are used
  34. 34. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  35. 35. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Liquid layout Jenifer Tidwell, 2005 permits content regrouping when the presentation area is resized
  36. 36. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Liquid layout in the case of traditional applications, it could be facilitated by the layout managers
  37. 37. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Liquid layout multi-device context  responsive Web design
  38. 38. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco responsive Web design adapting the design to a certain interaction context (e.g., screen orientation, resolution, pixel density,…) by using different Web techniques Ethan Marcotte, 2010 www.alistapart.com/articles/responsive-web-design/ discussion
  39. 39. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion media queries flexible image (+media) flexible or fluid grid Jacob Surber, The Page Is Dead, SXSWi 2012 http://www.slideshare.net/jacobsurber/page-death
  40. 40. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion various screen resolutions using different CSS properties via @media rules @media screen and (max-width: 768px) and (orientation:portrait) { /* styles for tablets*/ }
  41. 41. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco flexible images & other media – e.g., videos adaptive sizing and/or vectorial fonts & graphics (SVG) examples: http://mediaqueri.es/ discussion
  42. 42. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco flexible layouts use relative width columns to organize the content grid templates: 960.gs, cssgrid.net, goldengridsystem.com discussion
  43. 43. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion responsive Web design other strategies use relative CSS measure units (% em rem) linearize the content in a mobile context hide (remove) non-essential data set the viewport to the real size of the device’s screen <meta name="viewport" content="width=device-width, initial-scale=1" /> see also http://zite.to/13Dd5DU
  44. 44. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco graceful degradation progressive enhancement responsive Web design mobile first Aaron Gustafson – http://www.slideshare.net/AaronGustafson discussion
  45. 45. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco http://bradfrost.github.com/this-is-responsive/patterns.html responsive Web patterns (layout, navigation, content, forms,…)
  46. 46. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design Patterns user actions & commands
  47. 47. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco UI offers to its users certain controls each action that could be performed by user must be consequently indicated
  48. 48. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco UI offers to its users certain controls each action that could be performed by user must be consequently indicated (perceived) affordance Donald Norman, 1998
  49. 49. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Affordances provide strong clues to the operations of things. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing.” Donald Norman www.interaction-design.org/encyclopedia/affordances.html
  50. 50. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco There must be a logical reason for using an interaction control
  51. 51. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls inspired by reality Dan Saffer switch, dial, button, latch, slider, handle
  52. 52. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls physical only joystick, trackball, Wiimote, data glove,…
  53. 53. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls digital only scroll bar, checkbox, radio button, text box, listview, spinner etc.
  54. 54. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls “invisible” e.g., Kinect, LeapMotion
  55. 55. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Button groups Jenifer Tidwell, 2005 to present related actions as a small cluster of buttons, aligned either horizontally or vertically see Gestalt principles
  56. 56. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Button groups we must create several of them if there are more than 3—4 actions remember Hick’s Law
  57. 57. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Button groups must be consistently placed within the UI
  58. 58. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  59. 59. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  60. 60. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Prominent “done” button Jenifer Tidwell, 2005 place the button that finishes a transaction at the end of the visual flow
  61. 61. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Prominent “done” button this button must focus the user’s attention e.g., make it big and well-labeled usually, the button label is a textual one, easy to be noticed
  62. 62. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  63. 63. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Preview Jenifer Tidwell, 2005 shows users a preview or summary of what will happen when they perform an action e.g., printing, committing an on-line purchase etc.
  64. 64. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Preview previews help prevent various errors it could facilitate to explain users some actions
  65. 65. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco desktop
  66. 66. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Web
  67. 67. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco mobile
  68. 68. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator Jenifer Tidwell, 2005 indicating how much progress was made on a time-consuming operation
  69. 69. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator Jenifer Tidwell, 2005 indicating how much progress was made on a time-consuming operation  providing feedback to the user
  70. 70. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator user must be informed regarding the system’s current status e.g., changing mouse cursor, highlighting, progress bar,…
  71. 71. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator < 0.1 sec (almost) instantaneous 0.1 – 1 sec no feedback is necessary; the user will notice that must wait 1 – 5 sec waiting – e.g., busy cursor >1 – 5 sec showing a progress indicator
  72. 72. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator “Display a progress bar that accurately reflects the time remaining. If you cannot predict how much time an operation will take, say so! Do not lie to or misinform users.” Jef Raskin, 2000
  73. 73. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco indeterminate-progress indicator time-remaining progress indicator
  74. 74. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  75. 75. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Cancelability Jenifer Tidwell, 2005 provides a way to instantly cancel a time-consuming operation, with no side effects
  76. 76. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Cancelability if there are simultaneous operations, we must indicate what it could be canceled
  77. 77. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco a hard-to-find Cancel operation (Tidwell, 2005)
  78. 78. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Multi-level undo Jenifer Tidwell, 2005 it offers a way to easily reverse a series of actions performed by the user
  79. 79. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Multi-level undo undoable operations: entered text, database transactions, layout changes, cut & paste, actions regarding certain resources: images, e-mail messages, etc.
  80. 80. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  81. 81. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Command history Jenifer Tidwell, 2005 keeping a visible record of what was done, to what, and when
  82. 82. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Macros Jenifer Tidwell, 2005 defining & executing a sequence (group) of small actions a macro is denoted by a mnemonic
  83. 83. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Macros we must provide a recording mechanism of user actions to be automatically executed another time
  84. 84. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Macros related patterns: Multi-Level Undo Command History
  85. 85. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design patterns data editing
  86. 86. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco A frequent activity performed by users is to edit data textual, graphical, multimedia (video, sound), etc.
  87. 87. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco WYSIWYG (What You See Is What You Get) desktop publishing raster/vector image editing animation scenes video content …
  88. 88. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco WYSIWYG (What You See Is What You Get) users have some powerful expectations for how a text editor should work
  89. 89. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco OmmWriter Dāna (reported by @alecsandru)
  90. 90. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Direct manipulation permits users to “directly” interact with interface objects – by performing operations like grab, push, drag, drop, stack, paint, transform etc. – via some pointing device
  91. 91. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  92. 92. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Direct manipulation direct manipulation is immediate actions take place with no apparent wait time
  93. 93. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Direct manipulation direct manipulation is precise users need to have fine control over the location of that pointer and the objects attached to it
  94. 94. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Selection users have certain expectations regarding the selection of different types of entities: (non)formatted text, elements of vector graphics, abstract components, lists, tables, trees, etc.
  95. 95. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Text editors Vector graphics editors, GUI builders Lists, tables, trees Single click Move text insertion cursor here Select just this item Select just this item Double click Select this word Open or edit this item Open or edit this item Triple click Select this line, or select this paragraph N/A N/A Click, drag, release Start selection here, end it there; select all text between them Select everything inside the bounding box (“rubberband”, “marquee” or “marching ants” selection) Drag this item from here to there Shift-click Start selection at the text insertion cursor, end it at the click point, and select all text between them Add this item to the selection set Add this item to the selection set, plus all intervening items (“contiguous selection”) Control- click Varies from application to application Varies from application to application Add this item to the selection set (“dis- contiguous selection”) Tidwell (2005)
  96. 96. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Selection regularly, selection of discrete elements is done by using handles
  97. 97. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Edit-in-place Jenifer Tidwell, 2005 offers a minimalist editor directly in the place where the user could modify a textual data
  98. 98. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Edit-in-place used to edit files/objects names, labels, values of properties,…
  99. 99. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Smart selection Jenifer Tidwell, 2005 making the software smart enough to automatically select a coherent group of items, rather than making the user do it examples: text elements, pixels, file names,…
  100. 100. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Smart selection when done thoughtlessly, smart selections can be irritating  anti-pattern
  101. 101. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Composite selection Jenifer Tidwell, 2005 permits a global selection for a group of entities
  102. 102. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Composite selection Jenifer Tidwell, 2005 use different gestures or mouse clicks in different screen areas, such as the composite’s edges versus its insides to determine whether you should select a composite itself or allow its contained objects to be selected
  103. 103. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  104. 104. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Spring-loaded mode Jenifer Tidwell, 2005 permitting users to change the mode of interaction by pressing a key or a certain mouse button
  105. 105. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Spring-loaded mode typical keys: Shift Alt Ctrl
  106. 106. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Constrained resize Jenifer Tidwell, 2005 supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances
  107. 107. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  108. 108. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Magnetism Jenifer Tidwell, 2005 making the objects “magnetic” to the things a user positions them against when the user drags an object very near one of these things, it should stick
  109. 109. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Magnetism it helps compensate for users’ lack of perfect dexterity with a pointing device – typically, the mouse
  110. 110. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Magnetism example: Snap to grid – Adobe Photoshop
  111. 111. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Guides Jenifer Tidwell, 2005 it provides horizontal and/or vertical reference lines in order to facilitate the alignment of certain entities
  112. 112. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Guides guides make it easier for a user to see that alignment is pixel-perfect
  113. 113. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Paste variations Jenifer Tidwell, 2005 offers special functionalities – e.g., format conversions – for the paste operation
  114. 114. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Paste variations typical example: Paste Special – Microsoft Office
  115. 115. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interacting with software & hardware
  116. 116. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices physical experience user/device direct manipulation, gestures, surfaces, senses, emotions
  117. 117. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices example: mobile devices are handheld and the relationship with the hands is a fundamental character of the interaction Marco Susani, 2008
  118. 118. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert Alan Cooper, 1995
  119. 119. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert no one wants everlastingly to remain a beginner
  120. 120. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert we must persuade the user to become an intermediate
  121. 121. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert we must persuade the user to become an intermediate why?
  122. 122. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations physical experiencedefining the interaction between humans and objects (devices)
  123. 123. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations digital experience, interface, mental model(s) models focused on: communication versus content versus task (functionality)
  124. 124. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations different communication paradigms: textual, graphical, natural (e.g., gestural), 3D, mixed etc. typical example: augmented/mixed/virtual reality
  125. 125. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations e-commerce, news & wiki applications are mainly based on a content-centric model several examples: BBC News, TED, Speaker Deck, Vimeo, Wikipedia
  126. 126. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations traditional desktop or mobile applications are task-centric typical examples: operating systems, various utilities
  127. 127. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations traditional desktop or mobile applications are task-centric a possible design solution: task-oriented menu
  128. 128. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  129. 129. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 3: Context interaction with(in) physical/virtual environment “smart” objects, ubiquity, (pro)active agents, simulations
  130. 130. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities (a)synchronous communication environments audio, text, multimedia, 3D typical examples: instant messaging, social networks, MMORPGs
  131. 131. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities social behaviors mediated by the technology
  132. 132. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities social behaviors mediated by the technology intimate vs. tribal vs. viral P2P chat vs. forum vs. addictive online games
  133. 133. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities humans are social animals
  134. 134. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities humans are social animals people we need (Mart Murdvee, 2006): teenagerfriend, entertainer business-oriented personsecretary in spare timetrainer/instructor elder personnurse, helpmate
  135. 135. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities nowadays, we have the possibility to interact to interface agents having the role of… e-secretary – “digital butler” (Nicholas Negroponte, 1995) + e-entertainer, e-nanny, e-pal, e-trainer, e-librarian, e-clerk, e-attendant(s) etc.
  136. 136. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  137. 137. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 5: Content world-wide public access to the data, information, knowledge creating/publishing/mixing the content
  138. 138. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 5: Content interactive experience at the level of ecosystem: social, spatial, business, regarding the knowledge,… (micro)blogging, wikis, (geo)tagging, content management systems, mash-ups, online gaming, virtual environments etc.
  139. 139. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Necessity focusing – manipulating – the user’s attention
  140. 140. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Remark: keeping a user happy may, therefore, not only affect satisfaction, but may also lead to efficiency and creativity
  141. 141. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco user interaction (Desmet, 2002; van Gorp, 2006) value – pleasant vs. unpleasant arousal – anxiety vs. boredom
  142. 142. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Within interaction, related emotional states must be connectedflow
  143. 143. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow the mental state of operation in which a person in an activity is fully immersed in a feeling of energized focus, full involvement, and success in the process of the activity
  144. 144. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow the global sentiment experienced by a person when (s)he is totally involved into a certain activity optimal experience
  145. 145. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow the global sentiment experienced by a person when (s)he is totally involved into a certain activity excitement (arousal)flowcontrolrelaxation boredomapathyapprehensionanxiety optimal experience
  146. 146. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Anxiety, Boredom and Flow (Csikszentmihalyi, 1990; van Gorp, 2006)
  147. 147. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow autotelic work Csikszentmihalyi, 1990 refers to “work” that is experienced as enjoyable and is associated with flow or optimal experience characterized by a sense of well being and harmony with one’s surroundings
  148. 148. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow autotelic work Csikszentmihalyi, 1990, 2008 identifying and designing the motivational affordances in the task and work environment www.ted.com/talks/mihaly_csikszentmihalyi_on_flow.html
  149. 149. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  150. 150. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Negative example: providing feedback that is perceived as controlling rather than informative tends to reduce intrinsic motivation Deci, Ryan & Koestner, 1999; Szalma & Hancock, 2008 discussion
  151. 151. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  152. 152. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Conclusion” layout, actions & editing patterns and flow
  153. 153. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco next lecture: design patterns for social interactions

×