DM Message Design & Content Creation

Week 11 – Course Wrap Up

kegill — Wed, 19 Mar 2008 00:41:09 +0000

Agenda:

Interesting Ad (VW.uk – tip)
Guest Lecture
Amir Khella, Founder & Creative Director, Fictiv
Group Pitch
Wrap-up thoughts

Closing Thoughts

Accessibility & Usability Links
Deployment
- Dreaded 404
- Incremental versus Replacement
Thoughts from others:
- “Any darn fool can make something complex; it takes a genius to make something simple.”
  – Albert Einstein
- “It’s not the plan that is important, it’s the planning”
  – Dr. Gram Edwards
- “A goal without a plan is just a wish.”
  – Antoine de Saint-Exupery
- “Thinking is the hardest work there is, which is the probable reason why so few engage in it.”
  – Henry Ford
- “The most common user action on a Web site is to flee.”
  – Edward Tufte, Information Design Author & Professor
- “A bad web site is like a grumpy salesperson.”
  – Jakob Nielsen, Usability Author & Consultant
- “For each dollar a company invests in developing the usability of a product, the company receives $10-$100 in benefits and wins customer satisfaction and continued business. Furthermore, industry data shows that for each dollar spent to fix a problem during product design, $10 are spent to fix the same problem in product development, and $100 or more are spent to fix the same problem after product release.”
  – Claire Marie Karat, “A business case approach to usability cost justification.” In, R. Bias and D. Mayhew, Eds. Cost-Justifying Usability, Academic Press, NY, 1994 (cite)
Three Circles of Truth (from WebSitePipeline)

Week 10 – Class Notes

kegill — Wed, 12 Mar 2008 00:56:06 +0000

Agenda – Sitemaps, Wireframes and Storyboards

Housekeeping (grades)
Lecture/Discussion (ppt)
Project-Hands-on

Questions – Standards

Rebekah:

It seems as if there are many different standards for web design. Are all of these groups that are creating these standards attempting to work together to create one main document?
What are some examples of the rich visual feedback that Cooper mentions on page 543?
How does one draw the line between relying too heavily on standards versus using standards too lightly?

Sarah:

How should designers promote program learning without the use of error boxes?
How can designers avoid error box complacency? (Accepting a box without reading it & so on…)
What are some situations when dialog boxes might be helpful?

Nate:

Cooper advises against overuse of alerts and confirmations, as they interrupt the user experience. What are some situations that require keeping these alert boxes (i.e., when is it smart to “second guess” the user?)
Are there any examples of standard-setting committees that develop controversial standards, or standards that have been found to benefit specific institutions, governments, or corporations?

Questions – Site Maps

Rebekah:

On page 305 Brown says that creating quick and dirty wireframes before the requirements process is over (paragraph 4) will help prevent from missing website requirements (paragraph 1 & 2). How does this help?
Brown states that wireframes shouldn’t be created if they don’t need to be. However, he also states that wireframes are helpful for the engineers in creating the website. When should they be used and when shouldn’t they be used?

Sarah

What are your views on the advantages of site indexes over sitemaps?
What are the best organizational philosophies for sitemaps?
Why do you think some designers choose not to include sitemaps?

Nate

What makes comprehensive list of categories in a navigation bar different from a site map? (e.g., IGN)
Must a site map be comprehensive for it to be a site map?
What are the drawbacks to having a site map on your website?

Good SiteMaps:

Questionable Site Maps:

Steve Krug’s Site

AskTog: Interfaces That Kill

WebDev Firm Promo

Week 7 – Personas

kegill — Wed, 20 Feb 2008 01:59:21 +0000

Agenda:

More Tasks!
MCDM Info Meeting
Rebekah leads reading discussion
Personas Lecture (ppt)
Personas Hands-On

More Tasks!

Try to find hours of operation
Linear navigation example!
Find times and purchase info for guided tours (odd bread-crumb exampl

Compare & Contrast: what assumptions might we make about audiences?

Air Canada … Orbitz
Pitchfork Media … VirginRadio … CBC Radio 3
Dave Matthews Band … Blitzen Trapper
Minnesota Parents Know … Hubble

Reading Discussion
(Nate, Rebekah, Sarah – questions)

How can a team benefit from personas when there is no access to “real” hard-hitting evidence?
In a situation where there are a handful of unique personas, how does the team prioritize them?
How does a design team integrate personas when designing a site used by all types of users, such as for a government website?
What are some tactics that the designers can use to keep their own biases out of persona development?
What other project deliverables can use personas?
What are some strategies for discovering user goals that will ultimately help develop personas?
In the context of the Journalism Department’s site, how should we examine the users’ life goals?
What are effective ways to prevent self referential design?
What is your response to the following criticism of personas?
“Personas are fictional and therefore there is no clear way to determine how many users are represented by any given persona. For this reason, critics have claimed that personas have no definite relationship to real customer data and therefore cannot be scientific.” (from http://en.wikipedia.org/wiki/Personas)

Details for Defining Personas

A name (a real name like Greg or Madeline, etc.)
Age
A photo
Personal information, including family and home life
Work environment (the tools used and the conditions worked under, rather than a job description)
Computer proficiency and comfort level with using the Web
Pet peeves and technical frustrations
Attitudes
Motivation or “trigger” for using a high-tech product (not just tasks, but end results)
Information-seeking habits and favorite resources
Personal and professional goals
Candid quotes

Source: Alan Cooper, The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, Indianapolis: Sams, 1999, Chapter Nine. (Wording condensed and modified.)

From InfoToday

Examples & Resources:

Practical Personas (blog supporting book)
Memsix (wiki/project – sick mother)
Evegnii (wiki/project – the split personality guy)
Royalty Free, Stock, and Free pix
- dreamstime
- freephotosbank
- freerangestock
- istockphoto (royalty free photos – use the watermarked image with credit)
- openPhoto
- stockVault
- stockXchange
Adobe Design Studio

Week 6 – Competitive Analysis

kegill — Wed, 13 Feb 2008 01:54:29 +0000

Agenda

Reading Discussion (Nate, Rebekah, Sarah)
Review Friday Assignment
Lecture (ppt) & Workshop (card sort) – Kathy
Work on project (wiki)

Framing: Paper Prototyping (listen for verbs, watch for task focus)

Reading Discussion (Nate, Rebekah, Sarah)

In what ways could right-hand navigation deliver a better experience for the journalism site?
What criteria are most important to compare when looking at our competing journalism program websites?
Out of the variety of ways to present Competitive Analysis data that was discussed in Communicating Design what do you think would be the most effective for, example, the Journalism website? Why?
What do you think is the best way to determine how many sites should be used in a competitive analysis?
How many different design problems should be attempted to solve with a competitive analysis before it becomes too large?
In what ways can competitive analysis be a drawback if used the wrong way?
What are some components of an effective competitive analysis?
What is your argument for the ideal number of competing firms to examine?
How do you take a competitor’s concept without being obvious?

Review Friday Assignment

Nate (mini-scenarios)
Rebekah (scenarios!)
Sarah (specific steps)

Lecture

Card sorts and design
- Card sort as integral to design process (how-to)
- The definitive guide (boxes and arrows)
- Affinity diagram (adjunct to card sort)
- Structure comes before design (how-to)
- Two case studies
In this class, the purpose of the competitive analysis is primarily to justify the overall strategy for the design of the journalism site
What questions are you going to try to answer for each website? Criteria are critical!
The competitive analysis is a strategic document but it should acknowledge assumptions (or ‘knowns’) about site users
Some examples:
- Competitive Analysis Report – Web Presentation Technology (doc)
- Palm (pdf)
- Flinders University Web Redevelopment (doc)
- Metrics to consider
- HireCloud (student project, not unlike this one)

Competitive Analysis Tools (who links to your competitors?)

Work on project (wiki)

Audience identified? Success criteria identified?
What are the criteria to use to analyze each competitive site? What is the format to use for each site? Once you have the data, then think about how to best present the results. At a minimum:
- Org name, URL, home page screen shot
- Each criterion analyzed, with results
- Analytical summary, including “do-s” and “don’t-s”
Content inventory (tonight)
- This is the foundational information needed for the site map, one of your deliverables
  - Inventory content on current site (sticky notes)
  - Consider inventorying content on at least two competitor sites as a means of identifying needed content for the new site (sticky notes)
- Affinity diagram – white board

Resources:

Using Google Alerts (YouTube, Wikipedia, TopTools)
Norman and Schneiderman

Week 5 – Task Identification and Information Architecture

kegill — Wed, 06 Feb 2008 01:43:42 +0000

Agenda:

Reading Discussion – Nate
Lecture (ppt) & Workshop – Kathy
Review Friday Assignment
Work on project (wiki)
- Develop Tasks
- Suggest y’all fill out the schedule page, working backwards!

Framing:

Your Assignments:

Nate – Alibris & Gestalt – Aesthetics & Usability
Rebekah – MN Parents Know & Gestalt – Aesthetics & Usability
Sarah – Experience WA.com & Gestalt – Aesthetics & Usability

Reading Discussion – Nate

Lecture/Discussion/Workshop

Example of a specific user task (and horrible company anticipation/response – tip)

Other Resources:

Search Behavior Patterns
Wikipedia Mashup (tip)
Web Site Architecture 101 (process)
Wayfinding (and how it relates to navigation)
10 Ways to Orient Users on Your Site
What Is Information Architecture?
YouTube – PhD Student Rob Capra presents the results from a user study of the relationships between search tasks, information architecture, and interaction style. Results demonstrate that faceted user interfaces that accept automated structuring of data compare favorably to manually developed website structures. Back-end interest.
Starbucks & User Experience
A Medical Check-List (a task list)

Possible Discussion Questions:

Regarding the UW Journalism site: in a generic page hierarchy (as shown in Wroblewski’s article), which elements should never deviate from this template?
What are some ways to resolve hierarchy issues within the design team? (i.e., what content is most important, etc.?
What other sites besides Epicurious have you found to place the choice of browsing or searching back on the user instead of letting the design team decide?
What parts of our web redesign for the journalism school will we need to rely on the users short term memory (if at all)?
How should advertisements that have a similar design as the content be handled?
Why is it important is it to impact an audience member’s memory with design?
How do we minimize negative transference?
What do you think of Cloninger’s 10 fresh styles of web design in the context of usability?
How does usability vs. design effect the average audience member?
Visual hierarchies are common in print — how are they used on the web?
What is the difference between transference and perceived affordances?

Closed-Ended Questions

Are there examples where used facets to categorize information can take a turn for the worse?
Are there examples where facets can become a crutch for designers?
Are there any guidelines for categorizing information by graphical icons? (e.g. – Alibris navigation bar)
Is there ever a scenario where Gene Na’s quote (”the less the client talks to us, the better it is”) actually creates a win/win outcome???
Are there scenarios where visual communication that “speaks loudly” actually make for good design?

Week 4 – Conceptual Models

kegill — Wed, 30 Jan 2008 01:46:30 +0000

Agenda

Discussion, conceptual models (ppt)
- Videos – “desktop” metaphor”
Discussion BBC
- Nate, Rebekah, Sarah
  - What technologies have you used where the design makes good use of metaphor?
  - How should we use concept model(s) in our website redesign? How do we keep the familiarity of the Mechanical-Age and still utilize all the possibilities of the Information-Age in the context of design?
  - What do you think about the BBC’s lack of continuity in the layout of each facet of the website? The site doesn’t seem to stay consistent with color. For example, different categories use different colors, and the new main page (and BBC logo) is now green. Is there a benefit to mixing up color?
  - How have Web 2.0 philosophies effected the design and content of media sites?
  - Why would a neutral color – gray in the case of the BBC site — be a good idea for the toolbar anchor point? Wouldn’t a bright color be better at guiding the eye to it?
  - Is there a downside to offering too many customizable tools? Can this alienate some beginner and intermediate users?
  - What are some examples of perceived affordances that you can think of?
- Video – interview with Steve Rogers”
- Review Glass Wall (login required)
Team project
- “Competing” programs
  - WSU (future students & current students), Northwestern, Missouri, UGA, Minnesota, Madison WI, UTexas

Resources

Week 3 – Web Site Genres

kegill — Wed, 23 Jan 2008 01:43:42 +0000

Agenda – Web Site Genres

Lecture/Discussion
Group project — scoping document
This week’s assignment: web genre examples

Housekeeping:

Picking a week to lead discussion
Assignment due dates to Fridays
Communicating Design supplemental website

The importance of patterns:

“Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice”

Patterns: micro and macro

A process for moving from a collection of “bits” to a “whole” (webpage)
Yahoo Patterns (micro)
Interaction Design Library (micro and macro)

Other Thoughts:

Student reading reflections & questions for discussion:

Nate
1- How have website design and technologies changed since the Ivory and Megraw study was undertaken? (ex – Number and types of links, use of non-HTML technology?)2- What are some specific examples where it is important to design for experts?
Rebekah
1- What is your response to the Ivory and Megraw finding that “Most links pointed to pages that were within the site, as opposed to pages that were external to the site.” Do internal links seem like a good practice for web design? How should readers be directed to further information that is not on the site?2- What was your response to the statement in the Ivory Megraw study that advertisements by reputable companies [may have] improved the users view of the website?3- What functions can be included in web pages that would be strictly for the expert or daring intermediate? To take Cooper’s example in chapter 3, what are the black-diamond expert functionalities that an intermediate user can aspire to?
Sarah
#1 – -> What are some basic interface designs that might cater to the lowest common denominator user?

#2 – -> What can we do as designers to prevent beginners from abandoning usage?

#3 – -> How do you create a design that is accessible to beginners and lower intermediates, without alienating experts?

Student analyses – post-week 2:

Nate -
Rebekah – al dente blog
Sarah – al dente blog

Handouts

Week 2 – User Centered Design

kegill — Wed, 16 Jan 2008 01:56:00 +0000

Agenda:

Lecture/Discussion
Project Discussion
Personal Goals

TedTalks: Philippe Starck on Design
NYTimes: David Pogue iPhone
TedTalks: Jeff Han on Multi-Touch Interfaces

Notes from Nathan:

Core Skills of Design (from Designing Interactions)

Synthesize a solution from all relevant constraints
Frame (or reframe) the problem and objective
Create and envision alternatives
Select from those alternatives
Visualize and prototype solutions

We have to train our brains to analyze. Let’s start here:

Questions:

What is this site about? How would you explain it to a friend?
Who do you think is its audience?
Observations on design, navigation
Suggestions for the designer

Week 1

kegill — Mon, 26 Mar 2007 23:24:52 +0000

Agenda:

Introduction, review syllabus and expectations
Optimal design team members and roles
Why planning is essential to effective digital communication
In-class lab: set up WordPress blogs

Lecture: PPT, Slideshare

MultiMedia:

The Machine Is Us/ing Us (info, YouTube)
Forget Technology (YouTube)

Lab:

Create Student Blogs using Word Press ; use your UWNetID as your login. That will make your WordPress URL . It will make my life easier.
Create an initial blog post, 200-300 words on how you use digital media (web, podcasts, cellphones, etc) in your life every day. Categorize the blog post “assignment”
Before 10.00 pm, e-mail the blog post URL (permalink) to me at kegill – at – uw
- Required settings
  - Make the name (separate from the login) distinctive (not “Com585″!) – This setting is found under “options – general”
  - Change the time (options tab) to -8 Greenwich Mean Time so that we all have the same timestamp
  - Change the design (presentation tab)
  - Create the following blog post categories — we will be categorizing all blog entries
    - Assignment
    - Reading
    - Discussion Leader
- Recommended settings:
  - Make the blog public but not included in search engines or public listings unless you want the outside world to easily view your blog. This setting is found under “options – privacy”
  - To avoid spam, enable “Users must be registered and logged in to comment.” This setting is found under “options – general”