Tag Archives: Design

How do you design? – Free E-Book

How do you design? by Hugh Dubberly
Image by See-ming Lee ??? SML

I’ve always been a bit of methodology junkie, so imagine my delight when I stumbled upon this great Beta E-book on design methodologies. Author Hugh Dubberly walks us over 100 different processes and methodologies in his book How do you design?

Having this kind of resource always with you must be really handy if you’re still strolling the halls of university and need t figure out who and what to quote based on actual work you did. It should also be handy to any consulting as Hugh breaks models into different sections like Academic models, Consultant models and even Complex linear models.

Now that I’ve read this book I can say that my personal beliefs that good (UX) Design is cyclic falls mostly within teories of Spiral Path after Paul Souza (1996 in Dubberly 1995) and Iconic model of the Design process after Mihajlo D. Mesarovic (1964 in Dubberly 1995).

The one that looks really intriguing is Extreme programming planning/feedback loops after Don Wells (2000 in Dubberly 1995) as it defines very concrete time lines for each step of design process:

feedback loops
From How Do you Design? p. 127

The book is a very nice read for these dark December nights and I can’t wait for the day that it’s going to get published in a paper form as I’d really like to own it.

Reblog this post [with Zemanta]

3 must read documents for usability experts

Doing usability in startups is often very confusing as you don’t have time for proper process and you’re always wondering how good you could do it, if you had proper resources. With time, you wish you would just be able to read some of these resources in order to be in touch with your industry.

Luckily, there are two incredible startups that open-sourced their usability and redesign process – WordPress and Acquia’s Drupal.org redesign.

Lets start by two documents published by WordPress – wireframes for upcoming 2.7 release and results of their usability studies, that were used in order to actually produce wireframes and from there designs.

1. Usability Testing Report: 2.5 and Crazyhorse

This 25-page document describes what they’ve learned while observing bloggers while using WordPress 2.5, and also posts gaze trails from eye tracking, to get better idea how they used surroundin visual information while achieving their goal.

2. WordPress 2.7 Wireframes

The same team also produced these excellent wireframe documents, detailing changes and behavior, allowing programmers and product manager to use it as an initial input for more detailed specification, without having to go back and ask any bigger conceptual questions. Good example to learn from.

3. Drupal.org prototype

Drupal.org is taking an interesting approach towards redesign, where the usability experts and designers do everything out in open, getting community feedback and input into almost everything they do.

As such they’ve produced a wide range of interesting documents and videos. For now I would like to focus on their prototype, which is built in HTML, with no design, but includes something more important – notes. This is a great way to talk about information distribution, without the noise of actual design.

Modern civilization is built by standing on shoulders of giants. This is the reason why studying examples of other practitioners while doing your own work, will make you better UX expert.

Reblog this post [with Zemanta]

Facebook as a giant relationship gossip feed

Lots of comments on realtionship changes
Lots of comments on relationship changes

I was looking at my Facebook feed today as a pattern suddenly occurred to me. From all the things people post to their account or change, almost the only one that consistently gets at least one comment from someone is when they change relationship status to a lower level. Going from married to single or declaring that it’s complicated.

A few months ago I speculated that it’s unfortunate that Facebook doesn’t allow you publicly lose a friend, but luckily enough it allows you to publicly dump someone.

As evidence I present this nice rendering of my Facebook time line of today.

I’m going to be short today and spare a lenghty rant about the importance of relationships in human society.

Reblog this post [with Zemanta]

Drupal.org redesign wireframe for projects

At DrupalCon, Leisa and her team introduced their efforts to redesign drupal.org page. They want to make it a community driven process where all the existing and potential users can give input at all the design stages.

The latest step in this effort is her invitation to the community to send in wireframes and sketches of our ideas.

Here is my effort, done fast and rough, as these things by definition should be done. I went to re-sketch Drupal module page for Zemanta Drupal module as this is something I’m involved with professionally and it bothers quite a lot.

First the wireframe:

Drupal Wireframe for projects
Drupal Wireframe for projects

There are two basic ideas behind this wireframe:

  • make it more visual by adding image gallery and screenshot as  integral part of the page
  • downplay the fact that it’s a developer thing and make it easier for end-users.

Going from top left downwards:

  • the title is made prominent, with author name next to it, but much more discrete
  • folksonomies bellow the title, with possibility that it’s driven by the trusted community and not just authors themselves. Uses like tag Works7x, or similar could then emerge
  • The description text is then presented around the image gallery

The design behind this part should be tight in order to fit all the catchy information within one screen, without scrolling and help “sell” the author the modules itself.

Below this description area, there is a new section – Download, which is a quick call to action, find the module that works with your Drupal installation and download it now. Release notes and release dates are there to provide extra information of any special requirements and to see how fresh is the release.

The third section is support/developer part. In current release one can’t easily see latest issues without going to a separate page.

This design does following things:

  • Visually separates support and developer sections in order to not confuse end users with developer things (patches, etc.)
  • Provide a short list of latest support issues, together with a link to a full support forum sub-page (the same as it’s done now)
  • The developer tab works the same, it just visually changes the <div> and presents the developer information
  • This section possibly needs some sort of legend on top of the table

It’s also important to note the things I removed:

  • No more authentication stuff on this page. There is no “create new issue” link here, as we want to drive people to full support page in case the last few answers don’t help; auth is done from there
  • The documentation and homepage are downlplayed; they can be mentioned at the end of description if required from the author

Other ideas:

  • It should be possible to disable support forum and dev forum on the page and drive to alternative location: either author forum or places like getsatisfacition. Drupal could then just read some sort of standard RSS feed of this information.
  • Reasoning behind previous points is: some companies (like my company) have a number of different modules and they don’t want to scatter their support resources around the web. Alternative reason is that for some popular modules advertising on their forums/support pages is actually substantial sources of income and drupal.org could help drive the traffic towards original developers
  • Being able to group modules into arbitrary groups could be a neat feature. It would work in a way that one could create a group of “e-commerce necesseties modules”, and then list all the modules one should download in order to have the optimal/initial set of modules for such task.
Reblog this post [with Zemanta]

Jensen Harris – The Story of the Ribbon (Office 2007) [uxweek08 notes]

Microsoft Office Word 2007Image via Wikipedia


Jensen Harris lives at http://blogs.msdn.com/jensenh/


The story of the Office


Conventional wisdom said that the Office is good enough.

Asking real people told different story, which was that the user interface was failing users.


Symptoms they noticed:

They added new features, but hardly anyone found them

Office was supposed to be done, and that everyone though that it’s not going to change


How did they get to the first office?


The first version – Word 1.0 (1989) -Two toolbars, quite simple.

Word 2.0 – 640×480 (1992), Number of toolbars: 2

Word 6.0 – 800×600 (1994) – Toolbars: 8

Word 95 – 800×600 (1995) – Toolbars: 9 (defined red-squiggle spell checking)

Word 97 – 1024×765 (1996) – Toolbars: 18 (added clippy); people used to describe it as bloat

Word 2000 – 1024×765 (1999) – Toolbars: 23 (reducing the perception of bloat)

– IntelliMenu; the menus are too long, we can shorten them. But instead of shorting them we can just hide the things in the menu. But to make it extra tricky to the user, we’re intertwine the showed and hidden. On top of that, the computer learns how to arrange the visible/invisible menu.

  – Rafting; all the menu items that wouldn’t fit, fell of the screen

– It proved out to not work really well

Word 2002 – 1024×768 (2001) – Toolbars: 30

– Created the Task pane (the right column). Since anyone couldn’t find anything in the menu, they added the things into right column.

Word 2003 – 1024×768 (2003) – Toolbars: 31


Word 1 – 50 menu items to 300 in the end.


Menus and toolbars we designed for less full-featured programs. The feature set of Office had grown and stretched the existing UI to full limits.


A new UI was needed .. To reawaken the soul of software


The Design process of Office 2007


Part 1: The Art part – Research


People have an emotional relationship with their computer.

They learned from “real people”. Video, visiting, interviews etch.


The fish – Framework for understanding the different kinds of feelings that people had at the overall using the office.


When people are frustrated, why are they frustrated. Which of the factors are important and which less.


Revelation: The sense of mastery of our software was gone


We don’t know just what the software is capable of, but we actually understand how to go around it.


Science: The Role of Data

Over 3 billion (anonymous) data sessions collected from Office users

Every month, tracked 150 million command button clicks in Word

Tracked nearly 6000 individual data points

We couldn’t have done this without the data


The data doesn’t lie


Part 2: Design tenets


Design tenets – a set of principles that your team believes in, and it allows your team to have a shared goal.

Igor Stravinsky – [I feel] a sort of terror when, finding myself before the infinitude of possibilities that present themselves, I have the feeling that everything is permissible… 

…If nothing offers me any resistance, then any effort is inconceivable, and consequently every undertaking becomes futile.”

[Showing Office 2007 UI Design Tenets]


Design tenets have to be religion


Part 3: Prototypes

Created hundreds of discrete prototypes


Conceptual prototypes

Designed to explore a few key concepts deeply (as opposed to broadly)



Part 4: Evaluation  Is it Good or not


Standard Usability Tests – give you a good sense of what someone’s first 30-90 minutes turn out. But it’s different from the other users.

Longitudinal Usability Tests – Weeks or months of observing users. Singular most usable usability testing tool.


Eye Tracking – “special monitor that watches you”. It turns out that users mouse is in a totally different spot that what the user looks at. Heat map and screen gazing.


From initial design to final product – ITERATION


Iteration Built Into the Product Cycle – Planning to iterate. From product schedule to changes in code that allowed late prototype


Happy ending


The attention to Design Pays Off. Lots of awards and people buying the software at 2x the size of the earlier versions.



Reblog this post