Author: embloger

What I’m Reading: The Design of Everyday Things

What I’m Reading: The Design of Everyday Things

The Design of Everyday Things, by Don Norman, the Revised and Expanded Edition

My Thoughts

Oh where to begin with this book. I loved it so much I read it twice. The first time in a fascinated way, and the second carefully with a highlighter in hand. This book was life changing. Especially from a place of wanting to be a user advocate. I can claim life changing because, really understanding the concept that “users are not stupid, its just that somethings are poorly designed” has been incredibly freeing. It has changed my outlook about how I interact with the world of things around me. My level of frustration with particular software systems decreased immediately when I realized that not understanding, or remembering, or being able to find how to do something was not a failure on my part, but a design flaw. I started seeing the self blaming tendency in everyone around me; when people can’t figure out how to use the soap dispenser in the bathroom, when someone can’t figure out how to change the settings on their phone, when I can’t use the online system to make a doctors appointment! People blame themselves- I’m stupid, I’m too old, I must be doing something wrong- when really the design is to blame. I’ve spent the last several months going around pointing out design flaws and letting people know they are not to blame.

What I’m taking away:

The Design of Everyday Things is jam-packed with information that designers who really care about their users need to understand.

Discoverability and Understanding

Norman writes that the “two most important characteristics of good design are discoverability and understanding.” What an object, item, or program tells you about what, where, and how to perform an action is discoverability. Knowing what to do with those actions, the why, is understanding.

According to Norman there are 6 psychological concepts that lead to discoverability:

  • Affordances: perceivable and invisible possibilities of interaction
  • Signifiers: signs, labels, drawings, diagrams, symbols
  • Constraints: physical, logical, semantic and cultural limits that guide action
  • Mappings: relationship between elements
  • Feedback: communicating the result of an action
  • Conceptual Model: highly simplified explanation of how something works

Understanding Error

Although there a myriad of ways in which errors occur, mostly they occur because users are expected to behave in unnatural ways. We need to design not just for the alert, attentive, focused user, but for the tired, the bored, the interrupted.

Slips and mistakes are two different types of errors:

  • Slips: the wrong action is performed- either action based– the wrong action is performed, or a memory lapse the action is forgotten.
  • Mistakes: wrong goal is established- either rule based– deciding on the wrong course of action, knowledge based- wrong or incomplete knowledge, and memory lapse- forgetting goals or plans.

Designers should design with error in mind- making actions reversible, giving users feedback or error messages when error occurs. Don’t require users to keep all the knowledge perform an action in their head, “assist rather than punish or scold.”

Human Centered Design Process

Norman details the Iterative Cycle of Human Centered Design as having four activities repeated over and over.

  • Observation: research about the users- observe to understand motives and true needs of users.
  • Idea Generation: generate numerous, creative, potential solutions without regard for constraints.
  • Prototyping: build mock-ups and sketches.
  • Testing: get users and see how they use your prototypes.

“A usable design starts with careful observations of how the tasks being supported are actually performed, followed by a design process that results in a good fit to the actual ways the tasks get performed.”


-Don Norman

Who should read this book?

Everyone interested in the world of things should read this book. Especially those designing, funding, marketing, and or conceiving of solutions to our interactions with the world around us. I must admit, I’m likely to read it for a third time!

What I’m Building: Art and Art History Redesign: Part 5 Project Management: Identifying and collecting content.

What I’m Building: Art and Art History Redesign: Part 5 Project Management: Identifying and collecting content.

I have been leading a project to redesign Seattle University’s Art and Art History Department webpages.  I must admit that I have fallen woefully behind in keeping up with posting about this project. I finished the project in October! Previously I have written about Identifying the objectives, developing the new IA, page layout, and elements and content.  With all the templates designed and built out, it became time to start collecting the assets and content.  

Process: 

The very first step was to get organized.  I started by generating a large spreadsheet listing out each asset, or content piece that needed to be collected, written, or built. This master list would help me track all the individual items, build a timeline, and keep the team members apprised of our progress.  Once I identified all the pieces it was time to devise a timeline. We set the goal of having all of the content collected from the faculty by the end of a quarter, which gave us about 8 weeks to complete this phase of the project.  I divided the content into four groups: Degree pages content

  1. Degree Pages Content
  2. Student work Current student spotlights 
  3. Alumni spotlights and Classrooms and Galleries
  4. Innovative programs

Implementation:  

At a Faculty Meeting I introduced the concept of a sprint, showed them the templates.  Although these talented individuals are experts in their fields, and have the greatest knowledge about the “product” aka the majors, they are not necessarily adept in writing for the web.  I directed each person to try to keep their paragraphs to 70 words and never over 120 and pointed them to the usability.gov article writing for the web.  I created template document for each area (Visual Art, Photography, Art History, and Design) and gave them the current content from their site to get them started.  Finally, I included the reminder of the categories in the IA, indicating that they did not need to describe each program, but could link to further descriptions.  

On my end, I started tracking all the individual assets and where we were in the collection process. My spreadsheet started looking like this: 

Outcome:  

For the most part this was a successful implementation.  I did get back the template from the individuals, and was able to track the pieces.  If I had this to do over, I would send more reminders to the faculty.  I had only sent a single email at the beginning of each sprint, and therefore some of the faculty forgot, or fell behind.  Some of them skipped ahead, and gave me items out of sequence, which meant I did not get a chance to dictate the format that I needed, and therefore had to spend extra time formatting or extracting content. 

Next Steps: 

Finishing up and going live! 

What I’m Building: Art and Art History Redesign: Part 4 Degree Page Elements and Content

What I’m Building: Art and Art History Redesign: Part 4 Degree Page Elements and Content

In my last post, I wrote about Initial Sketches and Page layout.  At this stage I will use our content management system’s “playground” to build each page offline and experiment with content types as solutions to the limitations and constraints. Once I have built each page, it will be a matter of migrating the content to the live pages.

One of the most important pages to design is the degree page.  As we have learned from our analytics analysis, our target audience navigates directly to degree pages from our search bar.  This means we need to pay careful attention to the language we use on our page for the best SEO.  We also need to include all of the elements that the university has mandated for inclusion on this page.

We will need to include:

  • a call to action,
  • the degree summary
  • program description
  • application information
  • learning outcomes
  • links to degree requirements
  • transfer information
  • ranking information

We have decided to include:

  • alumni testimonials
  • Department contact information
  • Link to the events calendar
  • Entrance requirements
  • Careers outcomes
  • Unique banner
  • 2 hero images

We may also include:

  • Additional opportunities
  • Study abroad
  • Honors
  • Specific course offerings
  • Internships
  • Exhibitions opportunities

Zones:

The site has three zones: A (central), B (right) and C (Left). 

In our web layout and structure explorations, we have decided to eliminate left hand navigation and so we will be working with a layout that just included zones A and B.

After much experimentation, I will be using the following basic web structure:

Banner
Horizontal Navigation
Hero Image Call to action
Degree Description Degree Requirements
Secondary Image Program of Study
Secondary Description Alumni Testimonial
Learning Outcomes Ranking Information
Portfolio review information Contact Information
Technical/Equipment information Calendar of Events link
Emphasis/ Honors Information
Internships and Careers
Exhibition Information
Transfer Call to Action
Standard University Footer

Which once I chose the content items from the types available in our CMS, we have this as a basic structure:

Of course when we are optimizing this for mobile we are working with a single zone.  So our chart will look like this:

Banner
Horizontal Navigation
Call to action
Degree Requirements
Program of Study
Hero Image
Degree Description
Secondary Image
Secondary Description
Alumni Testimonial
Learning Outcomes
Portfolio review information
Technical/Equipment information
Emphasis/ Honors Information
Internships and Careers
Exhibition Information
Transfer Call to Action
Ranking Information
Contact Information
Calendar of Events link
Standard University Footer

I will use this basic pattern to create the photography, Digital Design, Art History, and Visual Art Degree pages. Standardizing this content will also serve another function.  Departmentally we have many content contributors, and this will allow us to standardize how we check for updates.  It will be easy to create a form that says: “Check your alumni quote, your primary content, images, and submit any updates to the web manager.”

Overall, I am pleased with this layout and I think we are going to have an exciting page that informs our target audience.

Next steps:

Project Management: Identifying and collecting content, teaching others how to write for the web, introducing a sprint.

What I’m Building: Art & Art History- Part 3 Page Layout

What I’m Building: Art & Art History- Part 3 Page Layout

I recently led a redesign for the Art and Art History departmental web pages at Seattle University.  Previously I wrote about Identifying the Objectives, and The New IA.  My third step was designing the initial page layout.

My foremost design goal was to adhere to the identified objectives of:

  • navigation
  • redundancy
  • relevance

Limitations:

In the previous iteration of this site, the navigation and IA were limited by the structure, the content types available in the Content Management System, the university branding guidelines, and elements mandated to be included in particular places and on particular pages.  These limitations are still at play in the redesign although we will attempt to work with and around them when possible. Maintainability is a primary consideration, as there are staff and time constraints to keeping the information on these pages current. 

Design limitations will include:

  • Layout
  • Color
  • Content types
  • Content items
  • Branding guidelines

As determined in the restructuring of the IA, the new menu structure will be horizontal and fixed to six items:

Pages that need to be Built:

  • The Main department page: Art and Art History “splash page”
  • Degrees and Minors Page
    • Digital Design Degree Page
    • Art History Degree Page
    • Photography Degree Page
    • Visual Art Degree Page
    • Minor in Studio Art Page
    • Minor in Art History
  • Innovative Programs Page
  • Classrooms and Galleries Page
  • Alumni Page

As a personal preference, I usually start designing with a sharpie and paper, making quick outlines of elements and general placement.  In this particular case, these sketches were very important to illustrate to the web team where we were heading.

Art and Art History departmental “Splash Page”

This page serves an introduction to the department. The Department needs to keep the content current and fresh. This page is not as important as it would seem, most of the audience will not be searching for the department, but the degree pages.  Nevertheless, the page should be impactfull and needs to be representative of a dynamic and diverse department. 

I envision the department page as a carousal of rotating content highlighting; the faculty, gallery exhibitions, visiting artists, student features, events, and courses produced by the department. The page will also feature an overview of the department.  I will need to update the content quarterly.

Degrees and Minors Page:

This page will include the educational philosophy for the department, a mission statement so to speak, brief descriptions and hero images for each of the degrees offered and links to the degree pages.

This page is a provides a brief overview of each degree, serves as a landing page for prospective students who’d like to explore additional degrees offered by the department.

Individual Degree Pages Photography, Design, Art History, Visual Art

The Individual Degree pages are arguably the most important pages.  The university does do analytic tracking and has concluded that prospective student are landing at particular degree pages through the search bar.  This is the most important audience as prospective students are our customer base.

There are elements mandated for inclusion on this page. Including: a call to action, the degree summary, program description, application information, learning outcomes, links to degree requirements, etc.

My first inclination with these pages is to make them very similar to each other, this way the pages will be learnable, and maintainable.  This sketch will be the general degree page plan.

Faculty and Staff Page

Directory pages are straightforward, images and basic contact information.  This is a content type maintained at the college level, and it will just be a matter of including the banner, navigation and organizing into an understandable hierarchy.

Innovative Programs

The section we are titling innovative programs is a bit of a catchall.  It is a navigational summary, and a concentrate of content that in the past has contributed to the spread of the IA. It is also a way to introduce our audience to the breath of what we offer. The web committee went around in circles trying to name this section, before eventually landing on innovative programs.  It is a difficult thing to categorize partnerships, endowments, assistantships, internships, and residency programs into a single menu heading.

This page will have photos and descriptions in similar content blocks, with links were applicable, to standalone program pages.

Classrooms and Galleries

The Classrooms and Galleries page will have photos of the spaces and descriptions of what happens in those spaces.  In the case of the Galleries, there will be links to individual gallery pages. This seemingly simple page is vital to selling our prospective students on enrolling.  Students will need to imagine themselves in the space so dynamic photos and strong enticing descriptions will be imperative.

This page will have a list of spaces with links to content further down a long scroll page.

Student work

This page is a bit of a conundrum.  Ideally, this page will include work from students in each major, and likely will have a slideshow of images for each degree. The trick will be careful asset management to ensure swift load times. If multiple slideshows are not reasonable, I will explore alternative designs.

Alumni

The Alumni page resolves to contain images and news features on departmental alumni.

Next steps:

Because this is a redesign of a site controlled by a content management system that has a “playground, instead of moving to design comps, I will begin to build each page offline and experiment with content type solutions. Once I have built each page, it will be a matter of migrating the content to the live pages.

What I’m Building: Art and Art History – part 2 the new IA

What I’m Building: Art and Art History – part 2 the new IA

I am in the process of leading redesign for the Art and Art History departmental web pages at Seattle University.  Previously I wrote about the first step in the process: Identifying the Objectives and concluded the redesign would focus on:

  • navigation
  • redundancy
  • relevance

I have since worked on restructuring the IA of the site so we have a solid plan, a map, of where we are heading.

Initial Structuring Brainstorm Meeting:

Because so many of the items on our site are constrained by convention.  I scheduled a meeting with our college’s Marketing Director.  I knew she would have a handle on the latest elements available in our content management system and would know which elements required by the college. We started our meeting with a discussion on the current structure of the site.

            Current Site Structure:

We talked in length about navigation and concluded the following:

  • From the analytics reports, we know that prospective students are accessing our degree pages through search.
  • Although we understand that the degrees are part of a department, which is part of a college, the target audience is not aware of that distinction. Our pages do not need to reflect the internal structure if it is not pertinent information to our customer base.
  • The department is unique compared to other departments in that the Art and Art History degree programs share resources, spaces, internship programs, and scholarships. We need to represent this without duplicating content in the subsections.

Simplifying the Structure

We started restructuring with a brainstorm session.  We pulled out the post-its and identified all the categories that are as standalone pages.  We grouped and revised as we found common features, and eliminated where we found unnecessary elements.

For instance, we found it unnecessary to have landing pages for Visual Art, Photography, Art History, etc, when we could instead structure everything from a departmental page with a common horizontal menu.  This would eliminate the need to include elements like scholarship, and facilities information under each degree page.  We decided forgo the inclusion of both “breadcrumbs” and left hand navigation, elements generated by the content management system, because they are reflective of internal structure and not relevant to our target audience.  When all was said and done, here was the initial plan:

This new streamlined structure eliminated about 50% of the pages we had previously maintained, going a long was to achieve our objectives of making the site easier to navigate and less redundant.

Navigation Build & Revisions:

Working with a CMS, can be restrictive.  After an initial structure build out of the pages and the navigation, I discovered that the navigation content type we chose is limited to six items.  This required us to combine categories strategically, resulting in our finalized IA structure:

I really enjoyed this process, it requires a lot of problem solving and reflection, but our blueprint is now complete and designing of the inital templates can begin.

Up Next;

Step Three: Content Design

 

What I’m Reading: Don’t Make Me Think

What I’m Reading: Don’t Make Me Think

Don’t Make Me Think- Revisited a Common Sense Approach to Web and Mobile Usability, by Steve Krug

Don't Make Me Think Cover Image

My thoughts:

Don’t make me Think is a book about building, assessing, and testing for usability. I found this to be a fascinating read.  Krug has a conversational writing style, and the book is full of visual examples.  The content of this book reinforced my instincts to design with the user in mind. Krug is straight forward and sticks to his claim that most of the ideas he outlines are “common sense” and indeed, I did find that his theories reinforced my instincts as a designer and named many of my frustrations as a user. The concept of “not making your users think” is simple, it should not be hard for users to use sites.

What I’m taking away:

This book is packed with useful information and outstanding guidelines that I want keep in mind as a move forward as a developer/designer.

Whatever you are designing should be as many of these things as possible:

In the first chapter Krug introduces this list of guidelines to help keep you on track when reviewing or building. I’m working on memorizing this list, but until then I will keep it handy as a checklist.

  • Useful
  • Learnable
  • Memorable
  • Effective
  • Efficient
  • Desirable
  • Delightful

Language matters

Using common naming conventions and simple titles is important.  Naming buttons is not the time to get clever.  Call things what they are.

Sites are not read, they are scanned

Users scan pages and look for the first reasonable option.

Stick to the following to support scanning:

  • Conventions (use standards that are common and recognizable)
  • Visual hierarchies (use headings to highlight importance)
  • Clearly defined areas (use blank space and boarders to keep things visually organized)
  • Distractions (limit these as much as possible)
  • What’s clickable (should be obvious with standard visual cues)
  • Support scanning (use short paragraphs, lists, and highlight key terms)

Clicks matter

To a degree clicks matter, but what matters more is how hard those clicks were to achieve. Did your users have to spend mental capital to figure out what to click?

Writing for the web

Try to eliminate “Happy talk,” and keep instructions to a minimum. Keep paragraphs short and eliminate all extra words.  Effective writing for the web is about being concise.

Navigation

Every site should have the following:

  • A sense of Scale (how big and deep does this go?)
  • Direction (where am I heading, how do I get there?)
  • Location (where am I?)
  • Home (How do I start over?)
  • Search (Where is the thing I’m looking for?)

Krug recommends trying what he refers to as the “Trunk Test,” which basically means that users should at a glance be able to quickly and easily find the following:

  • Site ID
  • Page name
  • Sections
  • Local navigation
  • You are here indicators
  • Search

What goes on the Home page?

The Home page is a place to spell out the big picture.  A unique and informative tagline, a welcome blurb, and a way to learn more. Remember space is your friend, and you don’t need to promote every feature on the home page, but rather draw visitors in.

Arguments about usability are a waste of time-
Here I will directly quote Krug: “It’s not productive to ask questions like “Do most people like pull-down menus?” The right kind of question to ask is “does this pull-down, with these items, and this wording in this context on this page create a good experience for most people who are likely to use this site?”

User Testing

There is a difference between a focus group, and a user testing group.  A focus group can help you determine if a product should be developed, and user testing group will help you determine if you are designing it right. Krug recommends testing early and often and includes and entire section that covers user testing frequency, number of users, who to test, how to find test users, where to do the testing, who observes, what to test, and a step by step guide for testing, including a script and possible problems, and deciding what to fix.

Reservoir of Goodwill

Krug introduces a user’s patience with a site as the “reservoir of goodwill: it’s size varies from person to person, its situational, and refillable, and a single mistake can empty it. Hidden information, forced conventions (dashes between phone numbers), asking for unneeded information, and looking amateurish all deplete the reservoir. While making choices obvious and ease, information informative, saving steps, and anticipating and answering user questions work toward filling the reservoir.

Accessibility

Accessibility benefits everyone and it is the right thing to do. Although it can seem like more work, and sometimes can compromise design, designing with your users in mind means adopting as many accessibility standards as possible.

Who should read this book?

I found this book incredibly informative and can recommend it whole heartedly.  Web developers should read this book, application designers, CEO’s and Project Managers should read this book.  Web users should read this book and start demanding better from the products we use.  Our lives are better lived with better experiences, and that starts with designing for the user.

What I’m Building: Art and Art History Redesign Part 1 Identifying Objectives

What I’m Building: Art and Art History Redesign Part 1 Identifying Objectives

Art and Art History Department Redesign

Step one: Identifying the objectives

Background:

I could start here by going into the history of this website, and the different iterations and content managements systems we have used during my tenure it my position, but that would be boring.  Suffice to say that the site has grown organically in the way a vine creeps up the side of a building, with branches all willy-nilly and far reaching without a structured plan. It’s time for some pruning.

Menu Navigation- Based on physical Location:

menu structure diagram

Constraints:

The Art and Art History Department pages encompass the department, four individual majors, two tracks of an interdisciplinary degree, and two minors.  There are three different main audiences- Current students, faculty and staff, and prospective students.  The University has declared designing for the “prospective student audience” the priority but the pages needs to work for current students and faculty as well because those are the high frequency users.

Although the art department considers itself special, and there are comparable examples of other institution’s art departments having a separate look and feel that that of the rest of the institution, we do not have that flexibility and will need to work within the Universities branding guidelines and content type library.  There are elements that will need to appear on every page, and standard components that will need to be included.

Additionally, there are structural constraints.  From an internal structural viewpoint, we consider all branches of the site to originate from the department, but the college, our hierarchal parent, separates things into undergraduate degrees and departments:

Internal structure

Internal structure diagram

Website structure

web site structure diagram

Internally this creates some problems because we have structured as if visitors are starting from our department page.  The navigation takes them away from the department and to the undergraduate degree pages.  The reasoning behind this structure stems from the fact that “prospective students” do not care which department houses their major, and I would agree with that as a statement, but a logical navigation structure is also paramount.  A structure that has users jumping sections without a clear way back does not follow best practices of usability.

Objectives:

This redesign will attempt to address three key issues: navigation, redundancy, and relevance.

Confusing navigation:

The current navigation is confusing. This is largely a structural issue, the requirements that individual degree pages live under “undergraduate degrees” and departments somewhere else causes navigation jumps between the department and the degree pages. For example when you navigate using a left hand menu from the department page to the degree page, the “breadcrumbs” do not match the path you took to navigate to the degree page:

SU Home College of Arts and Sciences/ Departments/ Art and Art History Department

Links you to this:

SU Home College of Arts and Sciences/ Undergraduate Degrees/ Art History

The inclusion of breadcrumbs should:

  • Show where you’re at, so you don’t feel lost
  • Show how a large, deep website is structured (or how products are organized)
  • Provide a way to get back a level to explore related content

Using breadcrumbs that do not adhere to these principles deteriorates the usability of the site, so our new design will address this issue with consistent menus.

Redundancy:

The department does not have a dedicated content manager.  The vastness of the site needs to scaled back.  If there are pages that can be combined, they will be combined.  If there are pages that can be eliminated, we will eliminate.  When the site structure was originally determined, we were not yet designing for mobile platforms and much has changed.  The old observance of keeping information “above the fold” or keeping users from scrolling is outdated.  We will use long scrolling pages were appropriate.

While our content management system will allow us to mirror content, we will try to keep shared information in centralized locations. This will help with the ongoing task of updating content and keep the workload manageable for our staff.

Content:

One of the key tools we use to promote ourselves is not surprisingly our website.  Prospective students use our site to find out about our programs.  We are in need of creating interesting pieces of content that showcase our programs and inform prospective students what about our degree programs and department can offer.  We are after all trying to sell something. We need to replace our content with fresh images, current information, personal quotes and news.  Highlighting our unique programs and accomplishments in a maintainable manner is one of our chief intentions.

Next steps:

The department has formed a committee of faculty volunteers to aide in the completion of this redesign initiative.  To approach this project in the most effective manner we will need to start with developing the information architecture (IA).  I did have to do some explaining and persuading as the committee is most concerned with the look and feel of the pages.  However, if we start with a solid plan for the IA and identify the major content types that need we will have a solid base from which to build on.  I have scheduled a meeting with the college’s director of marketing to build out the new IA.

Up Next:

Step two: The new IA