1 / 28

Info Design and GUI

Info Design and GUI. Master of Advanced Studies in Interaction Design Designing Advanced Artifacts & Networks. SUPSI - 2011. In this presentation:. Course objectives 2 types of web sites 2 specializations: IA en ID Features of web based applications

yaakov
Download Presentation

Info Design and GUI

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Info Design and GUI Master of Advanced Studies in Interaction Design Designing Advanced Artifacts & Networks SUPSI - 2011

  2. In this presentation: • Course objectives • 2 types of web sites • 2 specializations: IA en ID • Features of web based applications • Data: the entity-relationship model (ERM) • Working approach: the methodology • Summary of deliveries • The redesign process • Time line and deliveries • The importance of documentation • Samples of documentation • Site to redesign • References Maurizio Gnot

  3. Course objectives • Analysis of GUI for web applications • Transfer of a working approach aiming at: • Control and manage the design process • Design solutions user centred • Manage actors of the project by means of documentation and prototypes • ….in order to redesign some workflows of a web application Maurizio Gnot

  4. What is a GUI • In computing, a graphical user interface (GUI) is a type of user interface that allows users to interact with electronic devices with graphic elements rather than text commands. • What is Information design? http://en.wikipedia.org/wiki/Graphical_user_interface http://searchwindevelopment.techtarget.com/definition/GUI http://boxesandarrows.com/view/information_design_the_understanding_discipline Maurizio Gnot

  5. 2 Type of web site • Web as Hypertext system: information-oriented • Magazine on-line • Wikipedia…. • Web as software interface: task-oriented (doing things) • Webmail • E-commerce • Web forum • CMS: content management systems • Social network ….. Maurizio Gnot

  6. 2 specializations: IA en ID • Information architects (IA)focus on information-oriented sites • Organize content (structuring, organizing, and labeling) • Design navigation systems • to help people find and manage information • Interaction designers (ID) focus on task-oriented sites to translate the conversation between technology and users • Human/machine communication • Action/Reaction • State • Workflow • Malfunction http://www.boxesandarrows.com/view/introducing_interaction_design Maurizio Gnot

  7. Features of web based applications • Main goal: facilitating the completion of one or more tasks • Database driven web sites: automatic generation of pages (Dynamic sites) • Allowing manipulation of data • Insert (storing) • Modify • Delete • Displaying rules • Operations accomplished by two types of pages: • “views” for viewing and navigating, and • “forms” for editing and manipulating stored data.  http://www.boxesandarrows.com/view/what_is_a_web_application • http://www.boxesandarrows.com/view/views_and_forms_principles_of_task_flow_for_web_applications_part_1 _ Maurizio Gnot

  8. Features of web based applications • Viewing and Navigation • Creating Consistent Sorting, Filtering, and Navigation Behaviors • Editing and Manipulation • Using HTML Input Controls to Accurately Capture Users’ Data • User Assistance • Communicating with Users Through Help, Status, and Alerts More information Maurizio Gnot

  9. Data: the entity-relationship model (ERM) Behind Dynamic sites: the entity-relationship model (ERM) Employee Firm Entity Classes of Objcets with common properties Works in Belongs to Relationship Logical connetion Unit http://en.wikipedia.org/wiki/Entity-relationship_model Maurizio Gnot

  10. Data: the entity-relationship model (ERM) • Each entity has attributes describing it (labelling) Employee Download it Attributes Classification systems: controlled vocabulary Maurizio Gnot

  11. Working approach: the methodology The user experience: bottom up approach To User interface From Functionalities Jesse James Garrett’sThe Elements of User Experience diagram (PDF): http://www.jjg.net/ia/elements.pdf Diagram explanation (PDF):http://www.jjg.net/elements/pdf/elements_ch02.pdf Maurizio Gnot

  12. Working approach: the methodology 1. Analysis phase Discovery and define: conceptual design 2. Design Phase Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design What Increasing the selling on-line How: tools Using a shopping cart Tool behaviour The work process steps Relationship with the tool Elements used by the users to interact with the tool (button) How it looks Graphic aspect of interacting elements Maurizio Gnot

  13. Working approach: the methodology 1. Analysis phase Discovery and define: conceptual design 2. Design Phase • User needs balanced with goals of the site • Business goal (make 1 billion in one year) • Or inform voters about the new plans of a candidate Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design Deliveries Business requirements, users’ needs and tasks Maurizio Gnot

  14. Working approach: the methodology 1. Analysis phase Discovery and define: conceptual design 2. Design Phase • Detailed description of Features set • Shopping cart • Save previously shipping address Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design Deliveries Scenarios Processes description List of features Defining Feature Sets Through Prototypinghttp://www.boxesandarrows.com/view/defining_feature_sets_through_prototyping Maurizio Gnot

  15. Working approach: the methodology 1. Analysis phase Discovery and define: conceptual design 2. Design Phase • How the system behaves in response to the user (story board, choreography) • How a user got a shopping cart, and where the user goes once finished (ID) • Categories to browse products (IA) Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design Deliveries Workflows (ID) Site index, Navigation maps (IA) Page types Data structure Maurizio Gnot

  16. Working approach: the methodology 1. Analysis phase Discovery and define: conceptual design 2. Design Phase • Arranging interface elements enabling users interacting with the System functionalities • Interface elements (Buttons, controls, texts…) on a shopping cart page • Presenting the information in a way it facilitate the understanding • Navigation elements to browse/search products by category Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design Deliveries Detailed Navigation maps Wireframes (medium fidelityprototype) Maurizio Gnot

  17. Working approach: the methodology 1. Analysis phase Discovery and define: conceptual design 2. Design Phase • Modular layout system and components • Graphic style Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design Deliveries Modular layout system Graphic style HTML Prototype (high fidelity) Maurizio Gnot

  18. Working approach: the methodology Maurizio Gnot

  19. Summary of deliveries 1. Analysis phase Discovery and define: conceptual design 2. Design Phase Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design Deliveries Business requirements, users, needs Deliveries Scenarios Processes description List of features Deliveries Workflows (ID) Site index, Navigation maps (IA) Page types Data structure  Deliveries Detailed Navigation maps Wireframes (medium fidelity prototype)  Deliveries Modular layout system Graphic style HTML Prototype (high fidelity)  Concept  Maurizio Gnot

  20. The redesign process Skeleton Surface 2.2 Interface design Information design 2.3 Visual design Deliveries Detailed Navigation maps Wireframes (medium fidelity prototype) Deliveries Modular layout system Graphic style Prototype (high fidelity) 1. Analysis phase Discovery and define: conceptual design 2. Design Phase Strategy Scope Structure 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture Project Guidelines: the concept Result of the Analysis pahse Deliveries Business requirements, users’ needs and tasks Deliveries Processes description List of features Deliveries Workflows (ID) Site index, Navigation maps (IA) Page types Data structure Maurizio Gnot

  21. The redesign process Strategy Scope Structure Skeleton Surface 2.2 Interface design Information design 1.1 Site goals, Users’ needs and tasks 1.2 Functional specifications 2.1 Interaction design Information Architecture 2.3 Visual design Project Guidelines: the concept Input for the design phase Deliveries Business requirements, users’ needs and tasks Deliveries Processes description List of features Deliveries Workflows (ID) Site index, Navigation maps (IA) Page types Data structure Deliveries Detailed Navigation maps Wireframes (medium fidelity prototype) Deliveries Modular layout system Graphic style HTML Prototype (high fidelity) 1. Analysis phase Discovery and define: conceptual design 2. Design Phase Maurizio Gnot

  22. Time line and deliveries 17 Nov 24 Nov 1 Dec 15 Dec 22 Dec 12 Jan 4 h. 4 h. 1. Analysis phase 2. Design Phase 1. Site description 1.1 Strategy 1.1.1 Site mission ad goals 1.2.2 User: profile, goals, needs and tasks 2.1 Functional specifications 2.1.1 List of features 2.2 Anatomy of the structure 2.2.1 Site index 2.2.2Structural model diagram 2.2.3 Workflows (simple: 2-3) 2.3 User interface analysis 3. Interaction design Revised or new 3.1 Site index 3.2 Structural model diagram 3.3 Workflows (simple: 2-3) Definition of 3.4 Data structure 3.5 Page types 5. Visual design 5.1 Templates 5.2 Modular layout system 5.2.1 Grids 5.2.2 Components 5.3 Graphic style 5.2 HTML Prototype 4. Interface design 4.1 Detailed navigation maps 4.2 Wireframes 2. Concept: project guidelines Maurizio Gnot

  23. Time line and deliveries • 24 November • Strategy, Functional specifications, the site index and proposal of 2/3 workflows to revise • 1 December: delivery of analyses phase • Completion of Anatomy of the structure, User interface analysis + Concept • Presentation of the analyses phase in two ways • In brief as PPT presentation • In detail delivering a paper document Maurizio Gnot

  24. The importance of documentation • The documentation represent a memory of the project especially if the implementation takes long time and several actors are involved • Paper prototyping: it is useful to concentrate the client and stakeholders in general on functionalities, avoiding the client falls in love with visual (graphic) details (the way a functionality cab be turned visually can be several) • Prototypes: the dimensions of fidelity: http://www.boxesandarrows.com/view/integrating Maurizio Gnot

  25. Sites to redesign • Lifeknothttp://www.lifeknot.com/Shared interests, hobbies • SoundCloudhttp://soundcloud.com/Repository of original music pieces and networking • Wakoopahttp://social.wakoopa.com/For computer fans that want to discover new software and games • Athlinkshttp://athlinks.com/Atleths • Goodreadshttp://www.goodreads.com/Library cataloguing, book lovers • LibraryThinghttp://www.librarything.com/Book lovers Redesign of at least Sign-in and finalize my profile Add a friend Collecting Social network Features map (PDF)  Maurizio Gnot

  26. Samples of documentation • Concept phase: simple case – complex case • Structural model diagram: sample1 • Workflows: simple1 – simple2 – Complex and visual • Site index: sample • Navigation map: template with legenda – high level map + article • Workflows, Site index and navigation map: in one doc • Navigation maps and wireframes: case 1 – case 2 – case 3 • Interactive Prototypes with PowerPoint: Wireframes in PPT: sample 1 + Article • Modular layout system  see an on-line handbook Maurizio Gnot

  27. References • Jesse James Garrett, The Elements of User Experience, Second Edition: User-Centered Design for the Web and Beyond, New Riders, 2010 • http://my.safaribooksonline.com/book/web-development/9780321688651 • Bob Baxley, Making the Web Work: Designing Effective Web Applications, Sams, 2002 • http://my.safaribooksonline.com/book/web-design-and-development/0735711968 • Christian Crumlish; Erin Malone, Designing Social Interfaces, O'Reilly Media, Inc. 2009 • http://my.safaribooksonline.com/book/web-development/usability/9780596803117 • Jesse James Garrett’sThe elements of User Experience diagram (PDF): http://www.jjg.net/ia/elements.pdf • Diagram explanation (PDF):http://www.jjg.net/elements/pdf/elements_ch02.pdf • George Olsen • Expanding the Approaches to User Experience http://www.boxesandarrows.com/view/expanding_the_approaches_to_user_experience#comment_1236(PDF):http://www.boxesandarrows.com/files/banda/expanding_the_approaches_to_user_experience/uxapproachesmodel.pdf Maurizio Gnot

  28. References • What is a web application • http://www.boxesandarrows.com/view/what_is_a_web_application • Introducing interaction design • http://www.boxesandarrows.com/view/introducing_interaction_design • Defining Feature Sets Through Prototypinghttp://www.boxesandarrows.com/view/defining_feature_sets_through_prototyping • Entity-relationship model • http://en.wikipedia.org/wiki/Entity-relationship_model • Principles of Task Flow for Web Applications Part 1, Views and Forms: • http://www.boxesandarrows.com/view/views_and_forms_principles_of_task_flow_for_web_applications_part_1 • Part 2, Wizards and Guides: • http://www.boxesandarrows.com/view/wizards_and_guides_principles_of_task_flow_for_web_applications_part_2 • Design patterns • http://ui-patterns.com/patterns • Site Diagrams: Mapping an Information Spacehttp://www.boxesandarrows.com/view/site_diagrams_mapping_an_information_space • Integrating Prototyping Into Your Design Process: The dimensions of fidelity • http://www.boxesandarrows.com/view/integrating • Interactive Prototypes with PowerPointhttp://www.boxesandarrows.com/view/interactive • Bringing User Centered Design to the Agile Environment http://www.boxesandarrows.com/view/bringing-user Maurizio Gnot

More Related