ACIT 2811 - Session 3

--- tags: ACIT-2811 --- <style> .markdown-body h1:first-of-type { margin-top: 24px; } .markdown-body h1 { margin-top: 64px; } .markdown-body h1 + h2 { margin-top: 32px; } .markdown-body h2 { margin-top: 48px; } .markdown-body h3 { color: goldenrod; } .exercise { font-size: 150%; font-weight: bold; color: rgb(227,112,183); } .note { color: red; } </style> # ACIT 2811 - Session 3 ### Personas & User Stories [Personas](https://www.interaction-design.org/literature/topics/personas) are fictional characters designed to _represent your target users_. Personas can help us empathize with our users by identifying their characteristics, goals, and behaviours. ![](https://dpbnri2zg3lc2.cloudfront.net/en/wp-content/uploads/old-blog-uploads/alex-persona1.jpg) In contrast, [User Stories](https://www.interaction-design.org/literature/topics/user-stories) are designed to help you identify _features_ of your product. User stories can help you define what features are needed when starting a project, and can be used at the end of the project lifecycle to verify that those defined features were implemented. The format of a User Story is simple - a single sentence that follows this template: "As a [user], I want [goal or action] so that [outcome or reason]" For example, "As a [student], I want [to be able to check my calendar easily] so that [I do not miss my final exam]" Note that User Stories should always be written **from the point of view of a user of a system**, not you the designer! ### Information Architecture Information Architecture (IA) is the science of organizing and labelling content in a clear, logical way, so that users can easily find information. _IA connects people to the content they are looking for._ Good IA takes into account its users, the content that they need, and the context within which they are searching for this content. Bad IA can cause users to become frustrated and abandon the product. <img src="https://i.imgur.com/5sFyRXn.png" style="width:100%; margin:0"> The practice of Information Architecture typically comprises the following activities: 1. User Research - understanding why and how users are using the product (students/faculty? desktop/mobile? quick reference or deeper research?) 2. Content Inventory - creating a categorized list of all content available on the product 3. Sitemap - creating a hierarchical diagram that shows the structure of the content 4. Navigation - identifying types of navigation to be used (global, local, related), and menu hierarchy ([flat vs deep](https://www.nngroup.com/articles/flat-vs-deep-hierarchy/)) 5. Wireframes - creating a two-dimensional outline of a product's layout and functionality Group Exercise: Categorize Content into Menu Items Imagine a fictional theatre company that puts on live shows and offers camps for kids during the summer. Their website contains the following pages (in alphabetical order): Accessibility Audition Info Contact Us Current Shows Dining Options Donate Getting Here Join Our Team Musical Theatre Camp Our Story Past Shows Ticket Information Venue Information Visitor Questions (FAQ) Volunteering In your project group, create a menu that supports this content: group the pages under 3-4 menu headings that signify to the user what type of content they can expect to find. Note: the menu headings should be labels that your group creates – do not use the page titles above. Example: **Heading 1** - Accessibility - Audition Info - Contact Us **Heading 2** - Current Shows - Dining Options - Donate Individual Assignment: Categorize Content into Menu Items Following the example exercise above, create a menu for a fictional online store selling housewares. Organize the following products into menu headings (minimum four, maximum 6) that are consistent (see example below), and clear. Your menu headings, at a glance, should convey the type of store and types of products that are available. __Products:__ Baskets & Storage Bath Towels & Robes Bath Accessories Books Brooms & Brushes Candles Clothing Gardening Tools Incense Kitchenware Multipurpose Cloths Outdoor Tools Tableware Shears & Scissors Stationery For this assignment, focus on making the menu headings *consistent*, e.g. make each menu heading a location in the home, or use only [gerunds](https://www.grammarly.com/blog/gerund/), or use only product categories, etc. As an example, assume you are building a menu for a sporting goods store instead. Below are some examples of how you could use different, but _consistent_ approaches to labeling your menu items: __Gerunds:__ Swimming Running Cycling __Locations:__ Indoor Sports Outdoor Sports __Categories:__ Racquet Sports Water Sports Submit a .pdf file to the Learning Hub containing a list of menu headings and products, as well as a short paragraph detailing the thought process behind your menu organization and labels. Group Assignment: Personas, User Stories, and Sitemap For your chosen project, create: 1. Two Personas that define different users of your site/app. Your personas do not need to be as detailed as the example, but must include at a minimum: - Name - Age - Occupation/Role - Needs & Goals - Pain Points 2. Three to four User Stories that define features related to the goals of your users. Remember that each User Story is a single of the form: "As a [user], I want [goal or action] so that [outcome or reason]" 3. A Content Inventory (list of all possible screens/pages of your site or app) 4. A Sitemap that organizes all the content listed in part 3 into logical groupings and menu headings. Consider amongst your group whether you want to use a [flat or deep menu hierarchy](https://www.nngroup.com/articles/flat-vs-deep-hierarchy/). Submit a .pdf file to the Learning Hub containing containing your two Personas and three to four User Stories, as well as a graphical sitemap created in Figma. ### Further Reading * [User Flows](https://www.nngroup.com/articles/user-journeys-vs-user-flows/) * [Wireframes](https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/) ## Tasks To Complete Before Next Class - [ ] Complete [Individual Assignment](#ia1) - [ ] Complete [Group Assignment](#ga1) - [ ] Complete the readings listed above under [Further Reading](#Further-Reading) Quiz (Thursday) on the Learning Hub will be based on today's content: Personas, User Stories, and Information Architecture