UI Design and Usability for Everybody June, 2008 Slide 1 of 206
<ul><li>The Process of User Interface Development </li></ul>Section One 1. The Process Overview 2. Mapping on RUP 3. Best ...
Common Terms in Design World <ul><li>Commerce </li></ul><ul><li>Business design </li></ul><ul><li>New product development ...
The Process: Two Ways to Design User Interface User-Oriented  Design System-Oriented  Design
The Process: Simplified Interface Design Process
The Process: ISO  Human-centred  D esign  P rocesses  Meet  Requirements ISO13407 PLAN the Process SPECIFY the Context of ...
The Process: Mapping on RUP (1/2)
The Process: Mapping on RUP  (2 /2) UI Modeling
The Process: Levels of User Interface Design Concrete Abstract Completion Conception
The Process: Three Angles of User Experience Design _______________ http://www.raremedium.net/
The Process: Features of Successful System Design _______________ Slide by Peter Morville, 2004
The Process: Disciplines and Factors of Successful User Experience _______________ Slide by  Magnus Revang, 2007
The Process: Five Typical Iterations (Pathfinder Associates) _______________ Slide by Hala Heymassi, Elyse Sanchez, Robert...
Analysis: User Analysis <ul><li>User Analysis </li></ul><ul><li>User Profiles </li></ul><ul><li>Task Profiles </li></ul><u...
Analysis: Tasks Analysis <ul><li>1. Defining Tasks </li></ul>Task Task Task Task Task Task Task Task Task Task Task Task T...
Analysis: Tasks Analysis <ul><li>2. Defining Relationship </li></ul>Task Task Task Task Task Task Task Task Task Task Task...
Analysis: Tasks Analysis <ul><li>3. Building Hierarchy </li></ul>Task Task Task Task Task Task Task Task Task Task Task Ta...
Analysis: Swim Lane and Activity Diagram <ul><li>Roles/Actors </li></ul><ul><li>Tasks for each role/actor </li></ul><ul><l...
Analysis: Difficulties in Task Analysis <ul><li>Level of detalization </li></ul><ul><li>If-else branching </li></ul><ul><l...
Analysis: Primary Nouns (1/2) <ul><li>Method of defining system objects </li></ul><ul><li>Usually could be taken from task...
Analysis: Primary Nouns (2/2) The Matrix of Primary Nouns Primary Noun Qty Representation Action Property 1/  Calendar one...
Design: User Scenarios (1/2) User   Scenario —is an overall description of how the user/persona/actor interacts with the s...
Design: User Scenarios (2/2) Persona Scenario Scenario Use Case Use Case Test Case Test Case Test Case
Design: Wireframes (1/3) <ul><li>Wireframe  allows to design: </li></ul><ul><li>Modular structure </li></ul><ul><li>Layout...
Design: Wireframes (2/3) <ul><li>How to develop wireframe: </li></ul><ul><li>1/ Take all information gathered on Analysis ...
Design: Wireframes ( 3 / 3 ) <ul><li>How to develop wireframe: </li></ul><ul><li>2/ Design wireframe using </li></ul><ul><...
Design: Prototyping (1/4) <ul><li>Prototyping allows: </li></ul><ul><li>To estimate development effort </li></ul><ul><li>T...
Design: Prototyping (2/4) <ul><li>Why should we use prototyping? </li></ul><ul><li>Helps to increase profitability, reduce...
Design: Prototyping (3/4) <ul><li>Types of prototype: </li></ul><ul><li>Paper </li></ul><ul><li>Screen Forms </li></ul><ul...
Design: Prototyping (4/4) <ul><li>How to develop prototype? </li></ul><ul><li>Choose type of the prototype and its goals <...
Prototypes: Overview <ul><li>Types of prototypes: </li></ul><ul><li>▫  HTML prototypes as replacement of storyboards </li>...
Prototypes: Approaches <ul><li>Implementation of prototypes: </li></ul><ul><li>▫  Plain and Straight Approach </li></ul><u...
<ul><li>Usability, Information Architecture, </li></ul><ul><li>User Interface Design </li></ul>Section Two 1. Usability an...
Usability Definition <ul><li>“ Usability a degree of how a product can be used to achieve specified  goals .” </li></ul>
Usability Definition  <ul><li>“ Usability a degree of how a product can be used by specified  users  to achieve specified ...
Usability Definition  <ul><li>“ Usability a degree of how a product can be used by specified  users  to achieve specified ...
Effectiveness “ Effectiveness is the amount of resources needed to achieve the goals” System Effectiveness User Effectiven...
Efficiency <ul><li>“ Efficiency is the accuracy and completeness of achieving the goals” </li></ul>User Efficiency <ul><li...
User Satisfaction “ Satisfaction is the comfort and acceptability of the work system to its users.” There is the user’s sa...
Information Architecture (1/2) <ul><li>“ Information architecture is the science of  expressing a model or concept for inf...
Information Architecture (2/2) _________ Slide by Brandon Schauer
Usability Helps <ul><li>In Development:  reduces dev  costs , increases dev  speed and quality of the  code,  profitabilit...
Levels of Usability Problems Micro Usability Problems Macro Usability Problems
Usability Principles <ul><ul><li>Ease of learning  how fast can a user who has never seen the user interface before learn ...
Usability Concepts <ul><ul><li>Composition focus and scan order one should feel where to start and where to go. </li></ul>...
Usable Systems/Products <ul><li>Features of an Usable System: </li></ul><ul><li>Consistency: </li></ul><ul><ul><li>UI Appe...
Usability: Levels of Maturity <ul><li>Levels of Maturity: </li></ul><ul><li>No usability in the company </li></ul><ul><li>...
User Interface Standards Pyramid
User Interface Standards <ul><li>ISO Standards: </li></ul><ul><ul><li>ISO 9241-11 (1998) Guidance on Usability ,   ISO 924...
Look and Feel <ul><li>“ The appearance and behavior of a system facility as  </li></ul><ul><li>perceived by the end user. ...
How do We Look on Screen? (1/3) ?
How do We Look on Screen? (2/3)
How do We Look on Screen? (3/3) 1 1 1 1 2 2 2 2 2 2 3 3 3 3 3 3
Visual Design vs. User Interface Design <ul><li>Visual Design </li></ul><ul><li>“ T he field of developing  v isual   mate...
Principles of Design <ul><li>Visual Design Principles </li></ul><ul><li>Proximity </li></ul><ul><li>Repetition </li></ul><...
Visual Design: Proximity <ul><li>What For? </li></ul><ul><li>-  Organize! </li></ul><ul><li>How to? </li></ul><ul><li>-  C...
Visual Design: Repetition <ul><li>What For? </li></ul><ul><ul><li>The purpose of repetition is to unify and to add visual ...
Visual Design: Layout <ul><li>What For? </li></ul><ul><ul><li>Unify and Organize! It is usually the specific layout create...
Visual Design: Contrast <ul><li>What For? </li></ul><ul><ul><li>One purpose is to create an interest on the page–if a page...
Visual Design: Composition and Layout <ul><ul><li>Left-right top-bottom reading order </li></ul></ul><ul><ul><li>place the...
Visual Design: Using Spaces <ul><ul><li>Pause </li></ul></ul><ul><ul><li>psychologically it gives a time to rest and to ad...
Visual Design: Proximity
Visual Design: Repetition My Details Page Layout Identified Savings Page Layout Submenu Breadcrumbs (path) Page Title Expl...
Visual Design: Alignment (Bad)
Visual Design: Alignment (Good)
Visual Design: Contrast EPAM Presentation Standard PowerPoint Template
UI Design Principles: Organizing and Grouping Organizing and Grouping Items relating to each other should be grouped close...
UI Design Principles: Consistency Consistency Repeat UI elements of the design throughout the piece. You can repeat everyt...
UI Design Principles: Alignment Alignment Nothing should be placed on the page arbitrarily. Every element should have some...
UI Design Principles: Whitespace <ul><li>Whitespace </li></ul><ul><li>There are three main properties of whitespaces: a) p...
UI Design No principles applied
UI Design: Organizing and Grouping (1/2)  Controls organized
UI Design: Organizing and Grouping (2/2) Controls grouped
UI Design: Alignment (1/2) Controls aligned
UI Design: Alignment (2/2) Further alignment
UI Design: Consistency Labels are consistent now
UI Design: Whitespace White space added
The Rule of Doubles <ul><li>Any interface can be made twice as simple as the original one </li></ul>Any interface can be m...
Information Coding <ul><ul><li>Color </li></ul></ul><ul><ul><li>metro map, Ahmad tea packs, density charts, road signs </l...
English vs. Russian <ul><li>Pay attention at: </li></ul><ul><li>абзацный отступ  vs.   paragraph spacing </li></ul><ul><li...
Web 1.0 – A Basis for Web 2.0 <ul><li>Publishing </li></ul><ul><li>Transacting </li></ul><ul><li>Communicating </li></ul><...
Web 2.0 _______________ Slide by  David Heller, www.synapticburn.com
Web 2.0
<ul><li>Spaces for collaboration </li></ul><ul><ul><li>Rates </li></ul></ul><ul><ul><li>Reviews </li></ul></ul><ul><ul><li...
AJAX <ul><li>Impacts on Design: </li></ul><ul><li>Inline editing </li></ul><ul><li>Data set manipulation </li></ul><ul><li...
Not Pages but Pathways A  page  is a metaphor of a moment  of uninterrupted context “ There is no [page], Neo” “ There is ...
Business requirements User needs Structure Test Launch Design Build _________ Slide by Brandon Schauer Web 2.0: Something ...
<ul><li>1/ Don’t Make Users Think </li></ul><ul><li>2/  Don’t squander users’ patience  </li></ul><ul><li>3/  Manage to fo...
<ul><li>Introduction to </li></ul><ul><li>Usability Testing Techniques </li></ul>Section Three 1. What is Usability Testin...
<ul><li>What is usability Testing? </li></ul><ul><li>Usability testing is a technique used to evaluate a product by testin...
<ul><li>Test it! </li></ul><ul><li>Usually it is enough to test the following four aspects of design: </li></ul><ul><li>Na...
<ul><li>1/ Respondent (participant) </li></ul><ul><li>Real and possible user of the system </li></ul><ul><li>Should not be...
Usability Testing: Regular UT Laboratory Users Room Observation Room
Usability Testing: The Future of UT Laboratory
<ul><li>Design—Test—Design— … </li></ul><ul><li>Testing with 5 users discovers 85% of problems </li></ul><ul><li>Solving u...
<ul><li>Methods of Testing </li></ul><ul><li>Heuristic Evaluation </li></ul><ul><li>Remote Testing </li></ul><ul><li>Co-di...
Usability Testing: Software 1/ 2 /
<ul><li>Eye-Tracking Camera Results </li></ul>Usability Testing: Eye Tracking Camera
<ul><li>Samples and  </li></ul><ul><li>Q&A Session </li></ul>Section Five 3 .  UI Redesign in Action 2.  The profession 4 ...
Controversial Points (1/3)
Controversial Points (2/3)
Controversial Points (3/3)
Processing without IA and UI Designer <ul><li>Major Problems </li></ul><ul><li>Not visible enough selection in top menu </...
Processing with IA and UI Designer <ul><li>Solutions </li></ul><ul><li>Graphical design improved </li></ul><ul><li>Proper ...
Processing without IA and UI Designer <ul><li>Major Problems </li></ul><ul><li>Strange organisation and design of submenu ...
Processing without IA and UI Designer <ul><li>Solutions </li></ul><ul><li>Graphical design improved </li></ul><ul><li>Cons...
Processing without IA and UI Designer <ul><li>Major Problems </li></ul><ul><li>Search form doesn’t look like a form </li><...
Processing without IA and UI Designer <ul><li>Solutions </li></ul><ul><li>Graphical design improved </li></ul><ul><li>Divi...
Question One Vlad Rybaltovsky asks: “ What is Web 3.0?”
Answer (1/5)
Answer (2/5)
Answer (3/5) This picture appears as  a search response for  “ Web 3.0” keyword in  Google.com
Answer (4/5) <ul><li>Problems of Web 2.0 </li></ul><ul><li>Information vs. Knowledge </li></ul><ul><li>Search Results </li...
Answer (5/5) <ul><li>Web 3.0 Technologies </li></ul><ul><li>Semantic Web </li></ul><ul><li>Inference Engines and Info Agen...
Answer (5/5) RDF (Resource Description Framework) RDF #1 @prefix : <http: www.example.org> . :john a :Person . :john :hasM...
Question Two As you remember 6 – 8 years ago web applications were named ‘thin client’ because client was only web browser...
Answer Thin/Thick Clients: Mainframes PCs Web 1.0 Web 2.0 ??? Thin Clients Thick Clients
Question Three Evgeniy Mironov asks: What is Jacob Nielsen  silent about?
Answer <ul><li>Jacob Nielsen keeps silence about: </li></ul><ul><li>He is a well-known  </li></ul><ul><li>theorist  not a ...
Question Four Eugene Kirdzei asks: Are there any design  criterion/rules/approaches which could be  used during designing ...
Answer Use Website Patterns: Promo, Ecommerce, Corporate, Business, Entertainment, Portal, Intranet, etc.  Use UI Patterns...
Upcoming SlideShare
Loading in...5
×

Ui Design And Usability For Everybody

3,355

Published on

1 Comment
11 Likes
Statistics
Notes
  • Here the readers can gain the visibility about the UI and UX integration process flow in the web application development. Several business enterprises like Salzer(http://salzertechnologies.com/ui-ux-branding-design-company/) and all have done an excellent work with design field.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,355
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
242
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Ui Design And Usability For Everybody"

  1. 1. UI Design and Usability for Everybody June, 2008 Slide 1 of 206
  2. 2. <ul><li>The Process of User Interface Development </li></ul>Section One 1. The Process Overview 2. Mapping on RUP 3. Best Practices 4 . Analysis and Design 5 . Deliverables
  3. 3. Common Terms in Design World <ul><li>Commerce </li></ul><ul><li>Business design </li></ul><ul><li>New product development </li></ul><ul><li>Packaging design </li></ul><ul><li>Product design </li></ul><ul><li>Service design </li></ul><ul><li>Applications </li></ul><ul><li>Experience design </li></ul><ul><li>Game design </li></ul><ul><li>Interaction desig n </li></ul><ul><li>Software engineering </li></ul><ul><li>Software design </li></ul><ul><li>System design </li></ul><ul><li>User experience design </li></ul><ul><li>User interface design </li></ul><ul><li>Web accessibility </li></ul><ul><li>Web design </li></ul>Communications Color design Communication design Content design Graphic design Information design Instructional design Motion graphic design News design Packaging design Production design Sound design Theatrical design Typography Visual communication Scientific and math Combinatorial desig n Design of experiments Physical Architectural design Architectural engineering Automotive design Cellular manufacturing Design engineer Environmental design Fashion design Floral design Furniture design Garden design Industrial design Interior design Landscape architecture Mechanical engineering Urban design
  4. 4. The Process: Two Ways to Design User Interface User-Oriented Design System-Oriented Design
  5. 5. The Process: Simplified Interface Design Process
  6. 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. 7. The Process: Mapping on RUP (1/2)
  8. 8. The Process: Mapping on RUP (2 /2) UI Modeling
  9. 9. The Process: Levels of User Interface Design Concrete Abstract Completion Conception
  10. 10. The Process: Three Angles of User Experience Design _______________ http://www.raremedium.net/
  11. 11. The Process: Features of Successful System Design _______________ Slide by Peter Morville, 2004
  12. 12. The Process: Disciplines and Factors of Successful User Experience _______________ Slide by Magnus Revang, 2007
  13. 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
  14. 14. Analysis: User Analysis <ul><li>User Analysis </li></ul><ul><li>User Profiles </li></ul><ul><li>Task Profiles </li></ul><ul><li>Environment Profiles </li></ul><ul><li>How to document gathered information? </li></ul><ul><li>Persona Decks (user profiles + task profiles + env profiles) </li></ul><ul><li>Swim Lane and Activity Diagrams </li></ul><ul><li>Primary Nouns Method </li></ul>
  15. 15. Analysis: Tasks Analysis <ul><li>1. Defining Tasks </li></ul>Task Task Task Task Task Task Task Task Task Task Task Task Task Task Task Task
  16. 16. Analysis: Tasks Analysis <ul><li>2. Defining Relationship </li></ul>Task Task Task Task Task Task Task Task Task Task Task Task Task Task Task Task
  17. 17. Analysis: Tasks Analysis <ul><li>3. Building Hierarchy </li></ul>Task Task Task Task Task Task Task Task Task Task Task Task Task Task Task Task
  18. 18. Analysis: Swim Lane and Activity Diagram <ul><li>Roles/Actors </li></ul><ul><li>Tasks for each role/actor </li></ul><ul><li>Relationship between them </li></ul><ul><li>Type of interaction </li></ul><ul><li>Conditions </li></ul><ul><li>Data flows </li></ul>
  19. 19. Analysis: Difficulties in Task Analysis <ul><li>Level of detalization </li></ul><ul><li>If-else branching </li></ul><ul><li>Defining of task ranges </li></ul><ul><li>Insufficiency of input information </li></ul><ul><li>Variance of gathered information </li></ul>
  20. 20. Analysis: Primary Nouns (1/2) <ul><li>Method of defining system objects </li></ul><ul><li>Usually could be taken from task profiles, user profiles </li></ul><ul><li>Objects (user work with) </li></ul><ul><li>1-3 objects per task </li></ul><ul><li>Primary Noun could take a couple of declarations </li></ul><ul><li>Examples : Customer Name, New Customer, New Order, Order number, Orders, Checkout, Products, Account, Account Numbers, Order History, Inventory, … </li></ul>
  21. 21. Analysis: Primary Nouns (2/2) The Matrix of Primary Nouns Primary Noun Qty Representation Action Property 1/ Calendar one <ul><li>Day </li></ul><ul><li>Week </li></ul><ul><li>Month </li></ul><ul><li>Year </li></ul><ul><li>Open </li></ul><ul><li>Create an Appointment </li></ul><ul><li>Grant Access </li></ul><ul><li>Title </li></ul><ul><li>Format </li></ul>2/ Appointment a hundred <ul><li>In a calendar </li></ul><ul><li>In a form </li></ul><ul><li>On a page </li></ul><ul><li>Create </li></ul><ul><li>Accept </li></ul><ul><li>Invite </li></ul><ul><li>Postpone </li></ul><ul><li>Delete </li></ul><ul><li>Theme </li></ul><ul><li>Date </li></ul><ul><li>Message </li></ul><ul><li>Attendees </li></ul><ul><li>Protocol </li></ul>
  22. 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. 23. Design: User Scenarios (2/2) Persona Scenario Scenario Use Case Use Case Test Case Test Case Test Case
  24. 24. Design: Wireframes (1/3) <ul><li>Wireframe allows to design: </li></ul><ul><li>Modular structure </li></ul><ul><li>Layout </li></ul><ul><li>Navigation </li></ul><ul><li>Design patterns </li></ul><ul><li>Key screens’ flows </li></ul><ul><li>Ideas and concepts </li></ul><ul><li>Data domain </li></ul>
  25. 25. Design: Wireframes (2/3) <ul><li>How to develop wireframe: </li></ul><ul><li>1/ Take all information gathered on Analysis phase </li></ul><ul><ul><li>Tasks, Users and Env. Profiles </li></ul></ul><ul><ul><li>All set of requirements (user scenarios, use cases, tech specs, etc.) </li></ul></ul><ul><ul><li>Personas </li></ul></ul><ul><ul><li>Diagrams </li></ul></ul><ul><ul><li>Matrix of Primary Nouns </li></ul></ul><ul><ul><li>Tasks </li></ul></ul><ul><ul><li>Standards </li></ul></ul>
  26. 26. Design: Wireframes ( 3 / 3 ) <ul><li>How to develop wireframe: </li></ul><ul><li>2/ Design wireframe using </li></ul><ul><ul><li>UI Specification </li></ul></ul><ul><ul><li>Conceptual model </li></ul></ul><ul><ul><li>Navigational model </li></ul></ul><ul><ul><li>Defining Patterns </li></ul></ul><ul><ul><li>Previous Experience </li></ul></ul><ul><ul><li>Data domain exploitation </li></ul></ul><ul><ul><li>Rules of Perception </li></ul></ul><ul><ul><li>Vertical and/or Horizontal wireframing </li></ul></ul><ul><ul><li>Epicentric or environmental wireframing </li></ul></ul>
  27. 27. Design: Prototyping (1/4) <ul><li>Prototyping allows: </li></ul><ul><li>To estimate development effort </li></ul><ul><li>To see on the screen like on a final product </li></ul><ul><li>To establish a good communication within the project team </li></ul><ul><li>To involve users and even customers into the project team </li></ul><ul><li>To perform early usability testing </li></ul>
  28. 28. Design: Prototyping (2/4) <ul><li>Why should we use prototyping? </li></ul><ul><li>Helps to increase profitability, reduces cost! </li></ul><ul><li>They are concrete </li></ul><ul><li>Stimulate iterative process </li></ul><ul><li>Involving users on first iterations </li></ul><ul><li>Important stage of the project life cycle </li></ul>
  29. 29. Design: Prototyping (3/4) <ul><li>Types of prototype: </li></ul><ul><li>Paper </li></ul><ul><li>Screen Forms </li></ul><ul><li>Vertical Prototype </li></ul><ul><li>Scenario Prototype </li></ul><ul><li>Full-scale Prototype </li></ul><ul><li>Levels of prototyping: </li></ul><ul><li>High Fidelity </li></ul><ul><li>Low Fidelity </li></ul>
  30. 30. Design: Prototyping (4/4) <ul><li>How to develop prototype? </li></ul><ul><li>Choose type of the prototype and its goals </li></ul><ul><li>Define minimal prototyping scope </li></ul><ul><li>Vertical or horizontal prototyping </li></ul><ul><li>Use prototyping patterns </li></ul><ul><li>Keep in mind rules of perception </li></ul>
  31. 31. Prototypes: Overview <ul><li>Types of prototypes: </li></ul><ul><li>▫ HTML prototypes as replacement of storyboards </li></ul><ul><li>▫ HTML prototypes for demo purposes </li></ul><ul><li>▫ HTML prototypes used as UI layers </li></ul><ul><li>▫ DHTML applications with client-based components (IE and Mozilla) </li></ul><ul><li>▫ Macromedia Flash interactive demos </li></ul>
  32. 32. Prototypes: Approaches <ul><li>Implementation of prototypes: </li></ul><ul><li>▫ Plain and Straight Approach </li></ul><ul><li>▫ Based on XML/XSL-Transformers (XML Spy Project) </li></ul><ul><li>▫ Based on template engines (Dreamweaver) </li></ul><ul><li>▫ Using Cookies (session emulation, role-based pages) </li></ul><ul><li>▫ Using Components (reusable code) </li></ul><ul><li>▫ Combined Approach </li></ul>
  33. 33. <ul><li>Usability, Information Architecture, </li></ul><ul><li>User Interface Design </li></ul>Section Two 1. Usability and Information Architecture 2. UI Standards, Accessibility 3. Visual Design and UI Design Principles 4. Web 1.0, Web 2.0
  34. 34. Usability Definition <ul><li>“ Usability a degree of how a product can be used to achieve specified goals .” </li></ul>
  35. 35. Usability Definition <ul><li>“ Usability a degree of how a product can be used by specified users to achieve specified goals in a specified context of use .” </li></ul>
  36. 36. Usability Definition <ul><li>“ Usability a degree of how a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use .” </li></ul><ul><li>ISO 9241-11 (1998) Guidance on Usability </li></ul>
  37. 37. Effectiveness “ Effectiveness is the amount of resources needed to achieve the goals” System Effectiveness User Effectiveness <ul><li>How fast the system work? </li></ul><ul><li>How much the system cost? </li></ul><ul><li>How much resources does the system need? </li></ul><ul><li>Is it easy to maintain and modify the system? </li></ul><ul><li>Can fast can users their achieve goals using the system? </li></ul><ul><li>How much training does the users need to start working with the system? </li></ul>
  38. 38. Efficiency <ul><li>“ Efficiency is the accuracy and completeness of achieving the goals” </li></ul>User Efficiency <ul><li>Can system achieve user goals? </li></ul><ul><li>Is system stable? </li></ul><ul><li>Are there lots of system mistakes? </li></ul><ul><li>Is system secure? </li></ul><ul><li>Can users their achieve goals using the system? </li></ul><ul><li>How many mistakes users usually do? </li></ul><ul><li>How critical are these mistakes? </li></ul>System Efficiency
  39. 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!
  40. 40. Information Architecture (1/2) <ul><li>“ Information architecture is the science of expressing a model or concept for information.” </li></ul><ul><li>Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling web sites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape. </li></ul>
  41. 41. Information Architecture (2/2) _________ Slide by Brandon Schauer
  42. 42. Usability Helps <ul><li>In Development: reduces dev costs , increases dev speed and quality of the code, profitability </li></ul><ul><li>In Sales: increases revenue </li></ul><ul><li>Users: increases the effectiveness , efficiency and satisfaction </li></ul><ul><li>Transition: decreases transition costs </li></ul>
  43. 43. Levels of Usability Problems Micro Usability Problems Macro Usability Problems
  44. 44. Usability Principles <ul><ul><li>Ease of learning how fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks </li></ul></ul><ul><ul><li>Efficiency of use once an experienced user has learned to use the system, how fast can he or she accomplish tasks </li></ul></ul><ul><ul><li>Memorability if a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything </li></ul></ul><ul><ul><li>Error frequency and severity how often do users make errors while using the system, how serious are these errors, and how do users recover from these errors </li></ul></ul><ul><ul><li>Subjective satisfaction how much does the user like using the system? </li></ul></ul>
  45. 45. Usability Concepts <ul><ul><li>Composition focus and scan order one should feel where to start and where to go. </li></ul></ul><ul><ul><li>Stereotypes and standards </li></ul></ul><ul><ul><li>(do not invent bicycle) one should feel familiar with the items used to fill comfortable. </li></ul></ul><ul><ul><li>Main success scenario each part should has one clear goal and guide one to the success. </li></ul></ul><ul><ul><li>Critical information don’t hide critical information. </li></ul></ul><ul><ul><li>Navigation path </li></ul></ul><ul><ul><li>guide your user through controls </li></ul></ul><ul><ul><li>Goal should be clear one should know what the hell he is doing here. </li></ul></ul>
  46. 46. Usable Systems/Products <ul><li>Features of an Usable System: </li></ul><ul><li>Consistency: </li></ul><ul><ul><li>UI Appearance Consistency </li></ul></ul><ul><ul><li>Visual Appearance Consistency </li></ul></ul><ul><ul><li>Behavior Consistency </li></ul></ul><ul><ul><li>Organization Consistency </li></ul></ul><ul><ul><li>Consistency with standards </li></ul></ul><ul><li>Ease of Navigation </li></ul><ul><li>Ease of Use </li></ul><ul><li>Ease of Learn </li></ul><ul><li>Hard to Forget </li></ul>
  47. 47. Usability: Levels of Maturity <ul><li>Levels of Maturity: </li></ul><ul><li>No usability in the company </li></ul><ul><li>Usability on a development level </li></ul><ul><li>Isolated usability group </li></ul><ul><li>Supported and budgeted usability dept </li></ul><ul><li>Manageable usability </li></ul><ul><li>Systematic usability processes </li></ul><ul><li>Integrated UCD </li></ul><ul><li>User oriented company </li></ul>
  48. 48. User Interface Standards Pyramid
  49. 49. User Interface Standards <ul><li>ISO Standards: </li></ul><ul><ul><li>ISO 9241-11 (1998) Guidance on Usability , ISO 9241-10 (1996) Dialogue principles, ISO 9241-14 (1997) Menu dialogues, ISO 9241-17 (1998) Form-filling dialogues… </li></ul></ul><ul><li>Accessibility Standards: </li></ul><ul><ul><li>Section 508 of U.S. Federal Rehabilitation Act § 1194.21 Software applications and operating systems , § 1194.22 Web-based intranet and internet information and applications ; </li></ul></ul><ul><ul><li>Web Content Accessibility Guidelines 1.0 (WCAG) </li></ul></ul><ul><li>Platform standards: </li></ul><ul><ul><li>The Microsoft Windows User Experience </li></ul></ul><ul><ul><li>Apple Human Interface Guidelines </li></ul></ul><ul><ul><li>Java Look and Feel Design Guidelines </li></ul></ul><ul><ul><li>GNOME Human Interface Guidelines </li></ul></ul><ul><ul><li>KDE User Interface Guidelines </li></ul></ul><ul><ul><li>SAP R/3 Style Guide </li></ul></ul>
  50. 50. Look and Feel <ul><li>“ The appearance and behavior of a system facility as </li></ul><ul><li>perceived by the end user. ” </li></ul><ul><li>“ Look”–Visual Appearance: </li></ul><ul><li>colours </li></ul><ul><li>shapes </li></ul><ul><li>layout </li></ul><ul><li>typefaces </li></ul><ul><li>etc. </li></ul><ul><li>“ Feel”–B ehaviour of D ynamic s </li></ul><ul><li>buttons ; </li></ul><ul><li>boxes ; </li></ul><ul><li>me nus; </li></ul><ul><li>navigation patterns; </li></ul><ul><li>etc. </li></ul>
  51. 51. How do We Look on Screen? (1/3) ?
  52. 52. How do We Look on Screen? (2/3)
  53. 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
  54. 54. Visual Design vs. User Interface Design <ul><li>Visual Design </li></ul><ul><li>“ T he field of developing v isual materials to create </li></ul><ul><li>an experience .” </li></ul>UI Design “ T he process of designing the interaction between a human and a machine. ”
  55. 55. Principles of Design <ul><li>Visual Design Principles </li></ul><ul><li>Proximity </li></ul><ul><li>Repetition </li></ul><ul><li>Layout </li></ul><ul><li>Contrast </li></ul><ul><li>UI Design Principles </li></ul><ul><li>Organizing and Grouping </li></ul><ul><li>Consistency </li></ul><ul><li>Alignment </li></ul><ul><li>Whitespace </li></ul>
  56. 56. Visual Design: Proximity <ul><li>What For? </li></ul><ul><li>- Organize! </li></ul><ul><li>How to? </li></ul><ul><li>- Count the number of visual elements. If you have more than 3-5 than search for similarity to organize related elements to a singular visual unit. </li></ul>I
  57. 57. Visual Design: Repetition <ul><li>What For? </li></ul><ul><ul><li>The purpose of repetition is to unify and to add visual Interest. Don't underestimate the power of the visual interest of a page - if a piece looks interesting, it is more likely to be read. </li></ul></ul><ul><li>How To? </li></ul><ul><ul><li>First, think of repetition as being consistent. Then push the existing consistencies a little further - can you turn some of those consistent elements into part of the conscious graphic design, as with the headline? And finally, make the repetitive element stronger and more dramatic </li></ul></ul>II
  58. 58. Visual Design: Layout <ul><li>What For? </li></ul><ul><ul><li>Unify and Organize! It is usually the specific layout creates a sophisticated look. </li></ul></ul><ul><li>How To? </li></ul><ul><ul><li>Be conscious of where you place elements. Always find something else on the page to align with, even if the two objects are physically far away from each other. </li></ul></ul><ul><li>Grids! </li></ul>III
  59. 59. Visual Design: Contrast <ul><li>What For? </li></ul><ul><ul><li>One purpose is to create an interest on the page–if a page is interesting to look at, it is more likely to be read. The other is to aid in the organization of the information. A reader should be able to instantly understand the way the information is organized, the logical flow from one item to another. Contrast should focus reader’s attention on the most important content and help him navigate through the document. </li></ul></ul><ul><li>How To? </li></ul><ul><ul><li>Add contrast through your typeface choice, line thicknesses, colors, shapes, sizes, space, etc. It is easy to find ways to add contrast, and it's probably the most fun and satisfying way to add visual interest. The important thing is to be strong. </li></ul></ul>IV
  60. 60. Visual Design: Composition and Layout <ul><ul><li>Left-right top-bottom reading order </li></ul></ul><ul><ul><li>place the main content in this position (Z order) </li></ul></ul><ul><ul><li>Focus </li></ul></ul><ul><ul><li>reader sees the most brightest point on the screen first </li></ul></ul><ul><ul><li>Balance </li></ul></ul><ul><ul><li>symmetrical, asymmetrical and radial </li></ul></ul><ul><ul><li>Terminator </li></ul></ul><ul><ul><li>the should be something that says that the page is over </li></ul></ul><ul><ul><li>Gestalt Theory </li></ul></ul><ul><ul><li>“ The whole is more than the sum of its parts” </li></ul></ul><ul><ul><li>Rule of Thirds </li></ul></ul><ul><ul><li>divide into thirds both vertically and horizontally; the centers of the reader's attention are located near the intersections of these lines </li></ul></ul>
  61. 61. Visual Design: Using Spaces <ul><ul><li>Pause </li></ul></ul><ul><ul><li>psychologically it gives a time to rest and to adapt information </li></ul></ul><ul><ul><li>Separator </li></ul></ul><ul><ul><li>it perfectly says where the item starts and ends </li></ul></ul><ul><ul><li>Rest </li></ul></ul><ul><ul><li>it is the place where your eye can take a rest </li></ul></ul>
  62. 62. Visual Design: Proximity
  63. 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. 64. Visual Design: Alignment (Bad)
  65. 65. Visual Design: Alignment (Good)
  66. 66. Visual Design: Contrast EPAM Presentation Standard PowerPoint Template
  67. 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. 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. 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
  70. 70. UI Design Principles: Whitespace <ul><li>Whitespace </li></ul><ul><li>There are three main properties of whitespaces: a) pause—psychologically it gives a time to rest and to adapt information; b) separator—it perfectly says where the item starts and ends; c) rest—it is the place where your eye can take a rest. </li></ul>IV
  71. 71. UI Design No principles applied
  72. 72. UI Design: Organizing and Grouping (1/2) Controls organized
  73. 73. UI Design: Organizing and Grouping (2/2) Controls grouped
  74. 74. UI Design: Alignment (1/2) Controls aligned
  75. 75. UI Design: Alignment (2/2) Further alignment
  76. 76. UI Design: Consistency Labels are consistent now
  77. 77. UI Design: Whitespace White space added
  78. 78. The Rule of Doubles <ul><li>Any interface can be made twice as simple as the original one </li></ul>Any interface can be made twice as complicated as the original one.
  79. 79. Information Coding <ul><ul><li>Color </li></ul></ul><ul><ul><li>metro map, Ahmad tea packs, density charts, road signs </li></ul></ul><ul><ul><li>Shape clocks, chess </li></ul></ul><ul><ul><li>Symbol remote controller, car panel, road signs </li></ul></ul><ul><ul><li>Location 4 meters from the wall and 6 meters to the right </li></ul></ul><ul><ul><li>Sound </li></ul></ul><ul><ul><li>Etc </li></ul></ul>
  80. 80. English vs. Russian <ul><li>Pay attention at: </li></ul><ul><li>абзацный отступ vs. paragraph spacing </li></ul><ul><li>Моя история vs. My Story </li></ul><ul><li>« » vs. “ ” </li></ul><ul><li>№ vs. # </li></ul><ul><li>3 500,00 vs. 3,500.00 </li></ul><ul><li>31 р. vs. $ 31 </li></ul>
  81. 81. Web 1.0 – A Basis for Web 2.0 <ul><li>Publishing </li></ul><ul><li>Transacting </li></ul><ul><li>Communicating </li></ul><ul><li>Collaborating </li></ul><ul><li>Documents </li></ul><ul><li>Forms </li></ul><ul><li>Frames </li></ul><ul><li>Thin Client </li></ul>_______________ Slide by David Heller, www.synapticburn.com
  82. 82. Web 2.0 _______________ Slide by David Heller, www.synapticburn.com
  83. 83. Web 2.0
  84. 84. <ul><li>Spaces for collaboration </li></ul><ul><ul><li>Rates </li></ul></ul><ul><ul><li>Reviews </li></ul></ul><ul><ul><li>Comments </li></ul></ul><ul><ul><li>Tags </li></ul></ul><ul><ul><li>Blogs </li></ul></ul><ul><ul><li>Feeds </li></ul></ul><ul><li>Re-mixing & Mashing </li></ul><ul><ul><li>Combining different content sources </li></ul></ul><ul><ul><li>Letting people use your content source </li></ul></ul><ul><ul><li>Enabling content and services to be mixed </li></ul></ul>Web 2.0 _______________ Slide by David Heller, www.synapticburn.com
  85. 85. AJAX <ul><li>Impacts on Design: </li></ul><ul><li>Inline editing </li></ul><ul><li>Data set manipulation </li></ul><ul><li>In line/in context validation(s) </li></ul><ul><li>“ instant” query results (version of progressive display) </li></ul><ul><li>Contextual intelligent navigation and information display </li></ul><ul><li>Data display from multiple interacting sources </li></ul>_______________ Slide by David Heller, www.synapticburn.com
  86. 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. 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
  88. 88. <ul><li>1/ Don’t Make Users Think </li></ul><ul><li>2/ Don’t squander users’ patience </li></ul><ul><li>3/ Manage to focus users’ attention </li></ul><ul><li>4/ Strive for feature exposure </li></ul><ul><li>5/ Make use of effective writing </li></ul><ul><li>6/ Strive for simplicity </li></ul><ul><li>7/ Don’t be afraid of the white space </li></ul><ul><li>8/ Communicate effectively with a “visible language” </li></ul><ul><li>9/ Conventions are our friends </li></ul><ul><li>10/ Test early, test often </li></ul>Summary: Techniques of Effective Design
  89. 89. <ul><li>Introduction to </li></ul><ul><li>Usability Testing Techniques </li></ul>Section Three 1. What is Usability Testing 2. Methods 3. Software and Hardware 4. Examples
  90. 90. <ul><li>What is usability Testing? </li></ul><ul><li>Usability testing is a technique used to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system. </li></ul><ul><li>This is in contrast with usability inspection methods where experts use different methods to evaluate a user interface without involving users. </li></ul>Usability Testing
  91. 91. <ul><li>Test it! </li></ul><ul><li>Usually it is enough to test the following four aspects of design: </li></ul><ul><li>Navigation </li></ul><ul><li>Contents </li></ul><ul><li>Representation </li></ul><ul><li>Interaction </li></ul>Usability Testing: What should we test?
  92. 92. <ul><li>1/ Respondent (participant) </li></ul><ul><li>Real and possible user of the system </li></ul><ul><li>Should not be developer of the product and even developer at all </li></ul><ul><li>2/ Facilitator (moderator) </li></ul><ul><li>Organizes all the process: from scratch (planning) till the end (reports) </li></ul><ul><li>3/ Observer (assistant) </li></ul><ul><li>Records all the events </li></ul><ul><li>Don’t communicate with respondent! </li></ul><ul><li>Helps facilitator </li></ul><ul><li>Participates in analysis and reports’ preparation </li></ul>Usability Testing: Participants
  93. 93. Usability Testing: Regular UT Laboratory Users Room Observation Room
  94. 94. Usability Testing: The Future of UT Laboratory
  95. 95. <ul><li>Design—Test—Design— … </li></ul><ul><li>Testing with 5 users discovers 85% of problems </li></ul><ul><li>Solving usability issues </li></ul><ul><li>Testing with 5 users discovers 85% of problems </li></ul><ul><li>Solving usability issues </li></ul><ul><li>Testing with 5 users discovers 85% of problems </li></ul><ul><li>Enjoying! </li></ul><ul><li>N = (1-0.85) * 0.85 * 0.85 ~ 0.1 084 ~ 90% of problems resolved! </li></ul>Usability Testing: Methodology
  96. 96. <ul><li>Methods of Testing </li></ul><ul><li>Heuristic Evaluation </li></ul><ul><li>Remote Testing </li></ul><ul><li>Co-discovery Learning </li></ul><ul><li>Coaching Method </li></ul><ul><li>Performance Measurement </li></ul><ul><li>Question-asking Protocol </li></ul><ul><li>Retrospective Testing </li></ul><ul><li>Shadowing Method </li></ul><ul><li>Teaching Method </li></ul><ul><li>Thinking Aloud Protocol </li></ul>Usability Testing: Methods of Testing
  97. 97. Usability Testing: Software 1/ 2 /
  98. 98. <ul><li>Eye-Tracking Camera Results </li></ul>Usability Testing: Eye Tracking Camera
  99. 99. <ul><li>Samples and </li></ul><ul><li>Q&A Session </li></ul>Section Five 3 . UI Redesign in Action 2. The profession 4 . Questions and Answers 1. Controversial Points
  100. 100. Controversial Points (1/3)
  101. 101. Controversial Points (2/3)
  102. 102. Controversial Points (3/3)
  103. 103. Processing without IA and UI Designer <ul><li>Major Problems </li></ul><ul><li>Not visible enough selection in top menu </li></ul><ul><li>Tab control used for wizard </li></ul><ul><li>Inconsistent design of “Next” button </li></ul><ul><li>No Page Header </li></ul><ul><li>Different length of controls </li></ul><ul><li>Bold label text </li></ul><ul><li>Strange alignment and grouping </li></ul><ul><li>Etc. </li></ul>
  104. 104. Processing with IA and UI Designer <ul><li>Solutions </li></ul><ul><li>Graphical design improved </li></ul><ul><li>Proper wizard design </li></ul><ul><li>Consistent button design </li></ul><ul><li>Page header added </li></ul><ul><li>Controls length </li></ul><ul><li>Plain label text </li></ul><ul><li>Grouping and alignment </li></ul>
  105. 105. Processing without IA and UI Designer <ul><li>Major Problems </li></ul><ul><li>Strange organisation and design of submenu </li></ul><ul><li>Inconsistent design and position of “Save” button </li></ul><ul><li>Controls are not grouped </li></ul><ul><li>Not obvious design of “Propose login” functionality </li></ul><ul><li>Bold label text </li></ul><ul><li>Labels are inconsistent aligned </li></ul><ul><li>Etc. </li></ul>
  106. 106. Processing without IA and UI Designer <ul><li>Solutions </li></ul><ul><li>Graphical design improved </li></ul><ul><li>Consistent button design and position </li></ul><ul><li>Controls are grouped </li></ul><ul><li>“ Propose login” improved </li></ul><ul><li>Labels are consistently aligned </li></ul><ul><li>Plain label text </li></ul>
  107. 107. Processing without IA and UI Designer <ul><li>Major Problems </li></ul><ul><li>Search form doesn’t look like a form </li></ul><ul><li>Inconsistent use of icons </li></ul><ul><li>Unusable navigation </li></ul><ul><li>“ New” button is not on the right place </li></ul><ul><li>Number of found records is not properly located </li></ul><ul><li>No hints on the icons </li></ul><ul><li>Etc. </li></ul>
  108. 108. Processing without IA and UI Designer <ul><li>Solutions </li></ul><ul><li>Graphical design improved </li></ul><ul><li>Division on group and action buttons </li></ul><ul><li>Search form has unique background and “search” button </li></ul><ul><li>Decreasing amount of icons </li></ul><ul><li>Reorganazed data sheet </li></ul><ul><li>Improvements in navigation </li></ul><ul><li>“ Found N items” is in place </li></ul><ul><li>Etc. </li></ul>
  109. 109. Question One Vlad Rybaltovsky asks: “ What is Web 3.0?”
  110. 110. Answer (1/5)
  111. 111. Answer (2/5)
  112. 112. Answer (3/5) This picture appears as a search response for “ Web 3.0” keyword in Google.com
  113. 113. Answer (4/5) <ul><li>Problems of Web 2.0 </li></ul><ul><li>Information vs. Knowledge </li></ul><ul><li>Search Results </li></ul><ul><li>Tagging problems </li></ul><ul><li>User generated content </li></ul><ul><li>Uncontrollable content stream </li></ul><ul><li>Too open, too unsecured </li></ul>
  114. 114. Answer (5/5) <ul><li>Web 3.0 Technologies </li></ul><ul><li>Semantic Web </li></ul><ul><li>Inference Engines and Info Agents </li></ul><ul><li>Specialized Media Search </li></ul><ul><li>Enhanced Search Engines </li></ul><ul><li>Knowledge vs. Information </li></ul><ul><li>Ontology as Meta Information </li></ul><ul><li>Auto tagging, Auto Abstracting </li></ul><ul><li>One-button Interfaces </li></ul><ul><li>Simplification of everything </li></ul><ul><li>RDF, OWL, SPARQL, SWRL, etc. </li></ul>
  115. 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. 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. 117. Answer Thin/Thick Clients: Mainframes PCs Web 1.0 Web 2.0 ??? Thin Clients Thick Clients
  118. 118. Question Three Evgeniy Mironov asks: What is Jacob Nielsen silent about?
  119. 119. Answer <ul><li>Jacob Nielsen keeps silence about: </li></ul><ul><li>He is a well-known </li></ul><ul><li>theorist not a practical </li></ul><ul><li>man </li></ul><ul><li>Good design </li></ul><ul><li>doesn’t mean following </li></ul><ul><li>JN’s rules </li></ul><ul><li>In Fact he loves </li></ul><ul><li>Flash </li></ul>
  120. 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. 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/
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×