Month: April 2018

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