DSID 131: Fundamentals of UI Design

The central theme of the course is that design is a human-centric problem solving activity,based upon the ideas of conversation and rhetoric towards achieving simple, focused, elegant solutions. Each week we will delve deeper into what this means in terms of visual design, digital interaction/behaviors, and language/content. By the end of the semester, students will understand the overall design process, address typical interaction design problems/issues, and be able to generate compelling solutions in a variety of forms: sketches, mock-ups, and prototypes (a movie, a click-through, or more advanced per student skills). Students will also develop a basis for how to critique designs and present themselves effectively.

Homework Assignments

Below are the homework assignments for each class session, as assigned...

Project Description

The main semester project for the course explores "digital media/entertainment" interfaces across a range of platforms: web, mobile, set-top box, and desktop RIA widgets. It could be movies, videos, tv shows, radio/music, file sharing, other forms of media--I'll leave that to the teams to identify and scope down. The intent is to explore the issues/challenges of designing for different UI situations, while dealing with some highly relevant innovations and problems of digital interfaces confronting us today (ie, web 2.0, social stuff, presence, ratings, etc.). Also this project provides ample fodder for getting deep into typical UI principles yet have some creative, imaginative fun with this problem space.

The idea is to work with your team to identify the problem/scope (focus on just a few core tasks that comprise an ample set of screens to design, including a signature home page), and then solve the UI problems of flow, story, metaphor, interaction, emphasis, hierarchy, organization, and so forth accordingly for most of the semester (as described in the course syllabus weekly break-down), designing a set of screens that constitute a nicely defined solution. Finally, we'll spend the last few weeks of the semester pursuing an alternative solution (possibly blue-sky, etc.), to be described later.

You may want to look at YouTube, Hulu, Netflix, iTunes, Flickr, Adobe Media Player, Vimeo, Tivo, Apple TV, iPhone, Pandora, Last.fm, Apple Front Row, Microsoft media player, etc. for inspiration and to get your head around this space and the opportunities. Think back to the initial audit exercise (HW #1) and apply some of those critiques as you look at these existing UI's. Also leverage the first few lectures', the concepts contained therein.

Main tasks your solution should support

• Find some media (search or browse)
• View information about it
• Play and/or Record it
• Share/rate/comment on it
• Something specific to your platform, for example Location-based service for Mobile UI

In the end you'll have a set of key screens that represent these tasks in some form. We'll discuss this further as the semester and project progress.

Project Teams

The following are the teams for the project this semester. You will be graded individually in the end but your collaborative efforts will be evaluated as well throughout the term.

Problem Statement

The problem statement has the following elements:

• User Profile: A brief bulleted description (around 10-12) of the targeted user, including basic demographics, education, technical skills, employment, income level, goals, aspirations, attitudes, lifestyle, etc. No need to create a full-blown persona (with photo, name, etc.) but you have that option if you'd like, if it helps make your point.
• Context: A brief bulleted list or narrative description (just a paragraph or so) of the general scenario of use, physical environment, overall context, what's the setup for the story you're about to reveal with the UI solution and tasks, pre-conditions, activities, help me paint a picture in my mind of the overall scene of action. If you want to show photos or video clips to help make your point, go for it but not required.
• UI Attributes/Values: A brief bulleted list of core attributes (around 5-7) or values that will be used to define the overall look/style/feel and general brand of your UI. This will help guide your colors, images, etc. down the road. For example: Tivo is "playful, witty, friendly, empowering, useful". What are your core identifiers?
• Value Proposition (aka mission statement): What's the basic gist of what you intend to accomplish in a concise sentence or two? We'll use this as a benchmark to measure against throughout the course and at the end, to see how close you match your original intent.
• Use Cases: Just do a couple for now as a warm-up per the template/example in class, then we'll iterate over next few weeks per feedback in class, etc. As part of the final project deliverable, your team will be expected to hand in a full set of use cases for the core tasks later on.

Final Project Package

The final project package will consist of the following items, created over the course of the rest of the semester, until 11/24:

• Use Cases: All use cases including the ones from the problem statement
• Metaphor Drawing: What's the central metaphor for your UI design, a nicely rendered sketch with brief text description
• Screen Architecture: One main drawing of where the UI components live
• Wireframes: The main set of wireframes you created in the process
• Spec Sheet: Itemize the fonts (with samples), color palette, and primary grid structure used
• Comps: Of the key screens (around 5-7)
• Prototype: Could be just a clickthrough of the comps, or more interactive