1. UI Design and Usability for Everybody June, 2008 Slide 1 of 206

4. The Process: Two Ways to Design User Interface User-Oriented Design System-Oriented Design

5. The Process: Simplified Interface Design Process

6. The Process: ISO Human-centred D esign P rocesses Meet Requirements ISO13407 PLAN the Process SPECIFY the Context of Use PRODUCE Design Solutions SPECIFY User Requirements EVALUATE against Requirements

7. The Process: Mapping on RUP (1/2)

8. The Process: Mapping on RUP (2 /2) UI Modeling

9. The Process: Levels of User Interface Design Concrete Abstract Completion Conception

10. The Process: Three Angles of User Experience Design _______________ http://www.raremedium.net/

11. The Process: Features of Successful System Design _______________ Slide by Peter Morville, 2004

12. The Process: Disciplines and Factors of Successful User Experience _______________ Slide by Magnus Revang, 2007

13. The Process: Five Typical Iterations (Pathfinder Associates) _______________ Slide by Hala Heymassi, Elyse Sanchez, Robert Moll, Charles Field. Pathfinder Associates Five Typical Phases, Activities, Deliverables

22. Design: User Scenarios (1/2) User Scenario —is an overall description of how the user/persona/actor interacts with the system Scenarios focus on user’s requirements not on business and technical requirements (like Use Case does). User scenario usually has one-to-many relationship with use cases. User scenario is global, use case is technically detailed.

23. Design: User Scenarios (2/2) Persona Scenario Scenario Use Case Use Case Test Case Test Case Test Case

39. User Satisfaction “ Satisfaction is the comfort and acceptability of the work system to its users.” There is the user’s satisfaction of the system’s Efficiency and Effectiveness and also aesthetical satisfaction of the visual design. Why is this girl so happy? Think twice before answer. Because this is just a photo from US photo stock!

41. Information Architecture (2/2) _________ Slide by Brandon Schauer

43. Levels of Usability Problems Micro Usability Problems Macro Usability Problems

48. User Interface Standards Pyramid

51. How do We Look on Screen? (1/3) ?

52. How do We Look on Screen? (2/3)

53. How do We Look on Screen? (3/3) 1 1 1 1 2 2 2 2 2 2 3 3 3 3 3 3

62. Visual Design: Proximity

63. Visual Design: Repetition My Details Page Layout Identified Savings Page Layout Submenu Breadcrumbs (path) Page Title Explanatory Text Search Pane Form or Grid

64. Visual Design: Alignment (Bad)

65. Visual Design: Alignment (Good)

66. Visual Design: Contrast EPAM Presentation Standard PowerPoint Template

67. UI Design Principles: Organizing and Grouping Organizing and Grouping Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure. I

68. UI Design Principles: Consistency Consistency Repeat UI elements of the design throughout the piece. You can repeat everything—behaviors, controls, grids, approaches, paradigms, UI concepts and patterns, etc. This develops the organization and strengthens the unity. II

69. UI Design Principles: Alignment Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look. III

71. UI Design No principles applied

72. UI Design: Organizing and Grouping (1/2) Controls organized

73. UI Design: Organizing and Grouping (2/2) Controls grouped

74. UI Design: Alignment (1/2) Controls aligned

75. UI Design: Alignment (2/2) Further alignment

76. UI Design: Consistency Labels are consistent now

77. UI Design: Whitespace White space added

82. Web 2.0 _______________ Slide by David Heller, www.synapticburn.com

83. Web 2.0

86. Not Pages but Pathways A page is a metaphor of a moment of uninterrupted context “ There is no [page], Neo” “ There is no page, only pathways” – Emily Chang & Max Kiesler _______________ Slide by David Heller, www.synapticburn.com

87. Business requirements User needs Structure Test Launch Design Build _________ Slide by Brandon Schauer Web 2.0: Something you should know Rules of ^ Build & ^ Re- ^ Story Group & user needs Interact Beta

93. Usability Testing: Regular UT Laboratory Users Room Observation Room

94. Usability Testing: The Future of UT Laboratory

97. Usability Testing: Software 1/ 2 /

100. Controversial Points (1/3)

101. Controversial Points (2/3)

102. Controversial Points (3/3)

109. Question One Vlad Rybaltovsky asks: “ What is Web 3.0?”

110. Answer (1/5)

111. Answer (2/5)

112. Answer (3/5) This picture appears as a search response for “ Web 3.0” keyword in Google.com

115. Answer (5/5) RDF (Resource Description Framework) RDF #1 @prefix : <http: www.example.org> . :john a :Person . :john :hasMother :helga . :john :hasFather :henrich . :richard :hasSister :jane . (John has father Henrich) ____________________________________________________________________ RDF #2: @prefix : :henrich :hasBrother :han {? a :hasFather ?b . ?b :hasBrother ?c . } => { ?a :hasUncle ?c } (Henrich has brother Han) ____________________________________________________________________ Summary from RDF#1 and RDF#2: =>(John has uncle Han)

116. Question Two As you remember 6 – 8 years ago web applications were named ‘thin client’ because client was only web browser and all application logic was on server. And one of advantages of web application was that user can has slow computer. Now we can see a tendency of moving some part of server application to browser (AJAX, Flash, and etc.) So browsers have to increase their API and become more complex and run more hard (slowly) web application. And there is the question: Is it right way to future or it is just temporary bells and whistles? Victor Yarmolovich asks:

117. Answer Thin/Thick Clients: Mainframes PCs Web 1.0 Web 2.0 ??? Thin Clients Thick Clients

118. Question Three Evgeniy Mironov asks: What is Jacob Nielsen silent about?

120. Question Four Eugene Kirdzei asks: Are there any design criterion/rules/approaches which could be used during designing of site and its components?

121. Answer Use Website Patterns: Promo, Ecommerce, Corporate, Business, Entertainment, Portal, Intranet, etc. Use UI Patterns: Structure, Layout, Navigation, Forms, Interaction, etc. _____________ http://ui-patterns.com/ http://www.time-tripper.com/uipatterns/ http://www.welie.com/patterns/ http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns http://www.lukew.com/resources/articles/DesignPatterns_LW.pdf http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/