(:Summary:Contains the 'action' links (like Browse, Edit, History, etc.), placed at the top of the page, see site page actions:) (:comment This page can be somewhat complex to figure out the first time you see it. Its contents are documented at PmWiki.SitePageActions if you need help. :) * View * Edit * History * Print

(:nl:)!! Information Design 2 Syllabus

Jump to Week: 1 2 3 4 5 6 ----

'''Week 1: User Experience Flows'''

''Topics:'' * Identifying the customer / user needs and expectations * Capturing business goals and strategies * Identifying the components of user experience and their relationships among one another yet independent of: ** Site architecture and navigation ** Wireframe and page layout * Diagramming the User Experience

''Example UEX Flows:'' ->A few sample diagrams for different types of visitor experiences.

''Readings:'' ->The Anatomy of an Experience Map (HTML) ->Sample journey maps: Broadband Provider | Rail Europe | Social Gamer

''Exercises:'' ->Identify the key tasks (and behaviors), scenarios, and experience components for:

# Online banking (alternate); for example, a customer who has saving and checking accounts, uses BillPay, has a bank credit card, and who has a debit/ATM card. Map the interaction paths (flows) through the components of the digital and physical experience and creating a ''single'' flow diagram that describes ''multiple'' paths and user experiences.

# Vacation-Maker, a fictional web site for assembling complete vacation packages at discount prices. Packages include flight, hotel, car rental, and optional activities and excursions.

# Suggest a familiar activity that takes place at least partially online (web and/or mobile), identify the components of the experience (digital and physical), and define the steps, information, and actions necessary to complete the range of tasks (e.g., making a grocery list and shopping for the items; creating a wishlist or gift registry (online and/or in a store), managing it, monitoring it, and sharing it with others.)

''Assignment:'' ->Create a user experience flow diagram for the "Hearts of San Francisco" web site and illustrate two (2) ''different'' user experiences with it.

''Project:'' ->"Hearts of San Francisco" is a web site accessible via desktop and mobile devices (smartphones and tablets) to help tourists find, visit, learn about, and share photos, videos, stories, and experiences with the philanthropic, artist-created heart art installations found around the city. The web site may use Responsive Web Design principles to adapt layout and functionality based on screen size and device type or it could have separate web and mobile site versions; although a native mobile app is possible, it is not the path we will take for this class project.

''Scope:'' ->Proposed features, functionality, and content for the "Hearts of San Francisco" web site (web and mobile friendly) that can be used in potentially device-specific ways.

->Hearts of San Francisco web and mobile site requirements

----

'''Week 2: Schematics / Wireframes IV'''

''Topics:'' * Interaction Design (IxD) ** Common design patterns (hide/show, load on demand, infinite scroll, carousel, etc.) ** Conditional and contingent page elements (items that are displayed or hidden based on specific conditions) ** Single Page Architecture (SPA) ** Rich Internet Applications ** AJAX * Storyboarding & Animatics ** Representing motion,transitions, and transforms ** Motion has meaning * Multi-Screen Design ** Mobile web design (web vs. native apps) ** Responsive Web Design I *** Break Points *** Navigation

''Readings:'' ->Ten Principles for Designing Rich Internet Applications (Wiki) ->Rich Internet Application Screen Design (HTML) ->Responsive Web Design (A List Apart) (HTML) ->The Goldilocks Approach to Responsive Design (HTML) ->You Say Responsive, I Say Adaptive (HTML) ->Responsive Web Design and How to Use It (HTML) ->Design Process in the Responsive Age (HTML) ->A Richer Canvas (HTML) ->Content First (HTML) ->Fluid Grids (HTML)

''Responsive Web Design Resources:'' ->Responsive Resources (HTML) This is an EXCELLENT resource. ->Web Apps and Resources for Responsive Mobile Design (HTML)

''Exercises:'' ->1. Using storyboards (and animatics) to illustrate the changing states of a dynamic page or application for online banking. Annotating storyboards to describe and define the dynamic behaviors. Review the interactions found on the following sites and discuss how they could be represented in storyboards and wireframes:

->The Gap
NikeID
MarketWatch
Yahoo!
Twitter
Facebook

->Interaction Annotations (PDF)

->2. Adapt an existing web site home page (select one from the ID 1 list or take a suggestion from the class) for display on: ** Small screens - Smartphones (portrait and landscape?) ** Medium screens - Tablets (portrait and landscape?) ** Large screens - Laptops / Desktops ** Very large screens - Televisions (the "10-15 foot view" has different demands...)

->Focus on adapting the navigation and content layout. Complex web applications are more difficult to design responsively, so focus on common content (e.g., text, bullet lists, images, simple forms, simple interactivity.) Create LOW fidelity sketches for each of the sizes - note that we typically design responsively based on the content not the screen size, so it is possible that some layouts will be the same across two more screen sizes.

->Why do we design responsively based on the content first and the screen size second? What are situations where the screen size MAY have an impact on the design?

-> (Alternate) Use storyboards (and animatics where relevant) to illustrate complex interface behaviors and transitions that could be utilized on a banking web site. Create sketches that illustrate a BillPay web application (e.g., select Payee, a Payee, select Pay by date, specify payment amount, mark eBill as paid, perform transfer of funds to debit account, etc.) and include information and indicators for how the different components might behave.

''Assignment:'' # Choose ONE of the following "Hearts of San Francisco" experiences: ## '''Heart Locator''' - interactive map of the heart locations with available details on the location, directions to get to a selected heart, recommended paths among selected hearts that can be overlayed on the map (walking routes, no hill routes, award-winning hearts, MUNI routes, driving routes, etc.) and brief data about the selected heart ## '''Heart Details''' - list of all hearts, interactive page of the details for a selected heart (address / location, artist info, heart owner, supported charitable organization), links to the artist web site and the charitable organization web site, comments (with shared photos if available) that visitors have shared about the heart, and if the selected heart design is available on any merchandise with a link to the web store if it is ## '''Heart Game''' - leaderboard of people who have visited AND shared the most information about the greatest number of hearts, info page or screen about how to play the "visit all the hearts" game (including badges that can be won as the game is played), info page about the point values for the hearts (more remote and less visited hearts are worth more points; easy to access and commonly visited hearts are worth fewer points) # List or map out the sequence of pages (and/o page states) necessary to describe the selected scenario. # Create wireframes for the selected scenario these two screen sizes: ** Small screens - Smartphones (portrait and landscape?) ** Large screens - Laptops / Desktops ** (HINT: Start with the smartphone layout... Why is this recommended?) # Create animatics / storyboards to describe the interactive elements of ONE wireframe (you can choose which wireframe and screen size) to illustrate the transitions and behaviors of the interactive components on this pages of the selected scenario.

----

'''Week 3: Schematics / Wireframes V'''

''Topics:'' * What comes first? ** Content ** Mobile ** Users ** Research * Storyboarding II ** Wireflows ** States and Conditional or Modal Interactions * Responsive Web Design II ** Scaling ** Layout * Progressive Enhancement vs. Graceful Degradation * Direct vs. Indirect Manipulation ** For example, clicking/tapping directly on a map to choose a location vs. viewing a map but selecting from a separate list.

''Readings:'' ->For those of you "designing in the browser" with responsive HTML and CSS, here are some more technical articles (though these may also be interesting even if you are drawing your wireframes): ->Making your Mockup in Markup (HTML) ->Device Agnostic Approach to Responsive Web Design (HTML) ->Progressive and Responsive Navigation (HTML) ->Responsive Web Design Techniques, Tools, and Design Strategies (HTML)

''Discussion:''

->Review key design differences between page-based site design and Single Page Architecture (SPA) designs. ** '''States''' - persistent changes to the entire screen or application ** '''Conditional or modal interactions''' - temporary changes to the current screen that returns to the parent screen or state when the interaction is complete.

''Exercises:'' -> 1. Sketch out simple wireflows or storyboards for a sequence of interactions from one of the following. ** How would you represent when a path might branch or diverge based on user actions or choices? ** How might we combine wireframes, workflows, storyboards, and animatics to create wireflows that tell a more specific story of a user experience based on a scenario? ** What are some opportunities to progressively enhance the experience based on device, screen size, known user data and context, etc.?

->Kayak
Hipmunk
Pandora
Grooveshark
Hulu
Groupon
Slideshare
Aviary Tools
Evernote

->2. Improve the sign-up experience for a content site that has a paywall. The London Times newspaper charges for access to news content, but the modal intercept that appears when people attempt to read a news story from the homepage does not clearly communicate what their options are. ** Is it obvious that there’s a free trial available? How long does it last and what content does it apply to? ** How do you feel about being required to enter your date of birth into a registration form? And your full postal address? And being asked to enter your phone number? ** What paid packages are available? What’s the difference between “subscription” and “membership”? ** What tangible freebies do you get with membership? ** Screenshots and Design Challenge (HTML)

->3. Design a BillPay application for online banking: ** Design as a single page architecture (SPA) experience. ** Identify and storyboard the key states of the application for the common task scenario below. ** Identify and storyboard conditional or modal interactions for the common task scenario below - what are some elements of the experience that may be optional or change under different conditions (e.g., cannot pay a bill in full if there are insufficient funds in the account.) ** List any transitions or motion graphics and produce simple animatics as part of the storyboards / wireflows. ** Create the experience using a common task: Pay the entire monthly balance for a PG&E utility bill by the due date.

''Assignment:'' # Choose ONE of the following "Hearts of San Francisco" experiences that you have NOT already designed: ## '''Heart Locator''' - interactive map of the heart locations with available details on the location, directions to get to a selected heart, recommended paths among selected hearts that can be overlayed on the map (walking routes, no hill routes, award-winning hearts, MUNI routes, driving routes, etc.) and brief data about the selected heart ## '''Heart Details''' - list of all hearts, interactive page of the details for a selected heart (address / location, artist info, heart owner, supported charitable organization), links to the artist web site and the charitable organization web site, comments (with shared photos if available) that visitors have shared about the heart, and if the selected heart design is available on any merchandise with a link to the web store if it is ## '''Heart Game''' - leaderboard of people who have visited AND shared the most information about the greatest number of hearts, info page or screen about how to play the "visit all the hearts" game (including badges that can be won as the game is played), info page about the point values for the hearts (more remote and less visited hearts are worth more points; easy to access and commonly visited hearts are worth fewer points) # Create wireframes for TWO pages on the project site that include changes in state or mode (e.g., displaying artist information for a heart while looking through the gallery of hearts, taking a photo with a smartphone of heart then sharing that photo via smartphone.) # Identify and design for any adaptive interface elements (e.g., form fields that change conditionally, modal components that present options or explanations) and include annotations describing them. # Identify and describe opportunities to progressively enhance the user experience based on the device, screen size, and known user data and context. Annotate the wireframes and include sketches of alternate states or modes (if necessary.)

----

'''Week 4: Schematics / Wireframes VI'''

''Topics:'' * Interactive Page Elements (video player, charts, etc.) * Web Applications ** Productivity (e.g., getting work done) ** Creativity (e.g., creating, expressing, generating) ** Fun and games (e.g., play) * Complex and Dynamic Input Methods: ** Keyboards, mice, and pens ** Spatial gestures ** Device sensors ** Voice recognition / voice synthesis ** Context-aware experiences * Feedback: ** Visual ** Auditory ** Haptic

''Exercises:''

->Calculators are boring but necessary. They give us valuable information based on our inputs, but they are often mired in old-fashioned input methods and form designs.

** Financial Calculators (HTML) ** Mortgage Payment Calculator (HTML) ** Mortgage Affordability Calculator (HTML) ** Credit Card Debt Payoff Calculator (HTML) ** Savings Calculator (HTML) ** Retirement Calculator (HTML)

->How might we re-design these calculator experiences to be more: ** Interactive ** Contextually and personally aware ** Visual ** Effective with feedback ** Fun

->The New York Times published this interactive graphical calculator for helping people determine if they should buy or rent: ** Buy or Rent? (HTML)

->Sites for social communities (e.g., Facebook), financial services, and media sharing (e.g., YouTube) are good examples of complex web applications.

''Assignment:''

# Choose the ONE "Hearts of San Francisco" experience that you have NOT already designed: ## '''Heart Locator''' - interactive map of the heart locations with available details on the location, directions to get to a selected heart, recommended paths among selected hearts that can be overlayed on the map (walking routes, no hill routes, award-winning hearts, MUNI routes, driving routes, etc.) and brief data about the selected heart ## '''Heart Details''' - list of all hearts, interactive page of the details for a selected heart (address / location, artist info, heart owner, supported charitable organization), links to the artist web site and the charitable organization web site, comments (with shared photos if available) that visitors have shared about the heart, and if the selected heart design is available on any merchandise with a link to the web store if it is ## '''Heart Game''' - leaderboard of people who have visited AND shared the most information about the greatest number of hearts, info page or screen about how to play the "visit all the hearts" game (including badges that can be won as the game is played), info page about the point values for the hearts (more remote and less visited hearts are worth more points; easy to access and commonly visited hearts are worth fewer points) # Create wireframes for TWO pages on the project site that demonstrate multiple input methods that may vary by device (e.g., keyboards, touch, voice, camera.) # Identify and design for different feedback mechanisms appropriate to the experience and interaction. For example, a vibration (haptic feedback) might be used with error messages on mobile devices or to draw attention to the interface when the user might not be looking at it (e.g., if they are walking to a heart and are nearing it.) # When presenting your design concepts, be prepared to discuss the balance between productivity and fun (or play), because the Hearts of San Francisco web application is a combination of both (e.g., getting directions to a heart is a productive task, but checking in at a heart, sharing it, and earning points in a game are a fun and playful experience.)

----

'''Week 5: Usability: Heuristics & Best Practices'''

''Topics:'' * Information Design Best Practices * Heuristics Evaluations * Functionalist Approach to Page Type

''Readings:'' ->10 Things I Learned in Web School (HTML)
Usability Heuristics (Psychological) (HTML)
Usability Checklist (HTML)

->DWR Heuristics Review (sample) (PDF)
Sanrio Heuristics Review (sample) (PDF)

''Exercises:''

Use these Heuristic Review Factors (PDF) to guide your review and analysis of one of the following web sites:

->The Abundant Life Health Food Store
Notah Dineh Trading Company & Museum
Kokopelli Bike & Board
Colorado's Used Bookstore
The City of Ponchatoula, Louisiana
The Gonzo Inn

->Review information design best practices. Conducting an heuristics evaluation of an existing site.

''Assignment:''

->Hahn's Hibachi Restaurant

->Conduct an heuristics review of the Hahn's Hibachi web site, capture screenshots, annotate violations of information design best practices, review two or three similar or competitor sites' for similar content and functionality, and identify recommendations for improvements in a report. You do not need to review the Hahn's Fishing Team site, but you'll probably want to comment on the link to that site being in the main navigation of the restaurant site...

->Bring a copy of your heuristics report (either printed or digital on a laptop or tablet) so that you have access to it during the final class.

----

'''Week 6: Brainstorming'''

''Topics:'' * Brainstorming Techniques * Encouraging Creativity * Describing, Visualizing, and Prioritizing Concepts

''Exercises:'' ->Running a brainstorming meeting. Exercises to encourage idea generation. Using interaction design sketches to capture concepts.

->Brainstorming

->Problem Solving

''In-Class Assignment:'' ->Select a site from the sample site list or use the site from the Heuristics Report and generate as many site improvements and interactions as possible. Sketch and annotate the concepts, list pros and cons, and define priorities based on technical feasibility (i.e., can this be built?), user experience value, and business strategy relevance.(:nl:)

Design by N.Design Studio, adapted by solidGone.org and IDUX
Powered by pmwiki-2.2.86