Introduction to Information Architecture
449 likes•119,586 views
The document provides an overview of information architecture in web development, including its definition, key concepts of users, context, and content. It outlines the importance of wireframes, mockups, and prototypes in the design process, detailing their characteristics and purposes. A practical exercise is suggested to create a prototype for a new website, emphasizing user feedback and design considerations.
Introduction to Information Architecture
- 1. webdev@rgu introduction to information architecture posh term that includes wireframing/ mockups/prototypes
- 2. overview what is architecture? architecture in computing Users, Context & Content Designing Information architecture wireframes Mockups Prototypes Creating information Architecture
- 4. The process and product of planning, designing, construction of buildings
- 5. Days 366 From the first shovel hitting the ground to the first guest through the gates (try asking any academic what they coulddo in that amount of time!)
- 11. Information Architecture The structural design of shared information environments The combination of organisation, labelling, search, and navigation systems within web sites and intranets
- 12. Logo searchprimary links secondary links Picture (content) News (content)
- 15. users Understanding users Who are they? Demographics? What information do they want from your system? the right answer to an information need? all possible candidate answers? everything? How do they behave? Are there different types of behaviour? Are they satisfied or frustrated?
- 16. context All web pages / apps exist within some context Primary business (e.g. facebook) Part of a organisation (e.g. RGU website) Part of the context is Business needs what should the information system do? Mission and goals and strategy
- 17. content Anything that a user might want to find Articles External Links / Sources Mixed Media (videos / images / etc) Content Concerns Ownership Formats, Metadata, Structure
- 19. wireframe Basic illustrations of the structure, layout and components of a site. First step in the design process mockups Focus more on the visual design of a site. Closer to the final product prototype Semi-functional layouts, implemented in HTML and CSS
- 22. a wireframe is a low fidelity representation of a design it should show the main groups of content the structure of the information description of the user-interface reaction (What) (where) (hOW)
- 23. wireframe Content Structural elements of the interface Headers, Navigation, Main Content, Sidebars Layout of structural elements Position, Size Labelling of elements Types of content should be displayed Text, Pictures, Video
- 26. a mockup is a low/middle fidelity representation of the design it should improve on the wireframe and show What colours it is you will be using What fonts you will be implementing It should not show the overall content of the web page
- 27. a mockup is a low/middle fidelity representation of the design a good mockup should represent the structure of the information, visualise the content of the site and demonstrate the functionality of the site in a static way
- 30. a prototype is a middle/high fidelity representation of the website A prototype should allow the user to experience the content and interactions with the interface test the main interactions in a way that is similar to the final product
- 32. use general traits Wireframe Documentation, quick communication sketchy, black/white/ grey representation mockup Getting feedback, buy in from stakeholders Static Visualisation prototype User testing, backbone for development Interactive RECAP…
- 34. lets get started! We’re going to spend the rest of the day creating a prototype for a new website. We are going to look at making a new website for the department
- 36. What do other department websites look like? Are they better/worse than ours? What about other universities? • Aberdeen Uni? • MIT?
- 37. time for post it notes(PS - I love post it notes)
- 38. spend 5 minutes looking at a few different school/university websites once you’ve done that I’ll put some questions up. Answer each as many times as you want, one answer per post it
- 39. 1what is the main thing that comes to your attention when you visit the site?
- 40. What information would you expect to see on the website that Is there 12
- 41. What information would you expect to see on the website that Isn’t there 13 2
- 42. what pages are present on the website (home,contact…) 14 3 2
- 43. think about the home page. What content is there? 15 4 3 2
- 44. fin.
- 45. lets go through your answers what is the main thing that comes to your attention when you visit the site? What information would you expect to see on the website that Is there What information would you expect to see on the website that Isn’t there what pages are present on the website (home,contact…) think about the home page. What content is there?
- 46. use what you learned to design your own site 1024960 8001024 960800 1024960 8001024 960800 1024 960 800 1024960800 use paper browser sheets to do this think about common features that would stay the same on each page
- 47. recap what is architecture? architecture in computing Users, Context & Content Designing Information architecture wireframes Mockups Prototypes Creating information Architecture
- 48. get in touch! @mike_crabb Lecturer in Web Development at Robert Gordon University (Scotland) @rgucomputing Robert Gordon University - School of Computing Science and Digital Media