Tag Archives: User interface

Stepping out of dating and relationship on Facebook

I’ve been fascinated with Facebook relationship decisions for a while now. One of the more interesting challenges with this complex term is that it’s not fully transitional. You don’t just go single -> complicated -> dating -> engaged -> married  and the same way back. Sometimes you also want to step out from the whole dating thing and say, I’m not even single (as it implies that you’re available for persuasion) but that you’re just not playing the game.

So how do you express this with the user interface? Simple, you make an empty box that anyone can assign meaning to it, but its mostly there to have the most private option and to dissolve any implications of labeling yourself.


Facebook remove relationship status drop-down
Facebook remove relationship status drop-down

With drop-downs, it’s often the case that we want to undo our option but the form won’t allow us. It takes extra attention to detail to allow such option.


Reblog this post [with Zemanta]

Hi-fidelity prototyping with OmniGraffle Pro

Getting a chance to work in industry that you’ve heard so much in school is a really great experience. Today I’m hyped up about designing user interfaces and writing specifications for how things should work.

UB example wireframe
Image by snowcrash via Flickr

Personally, I’m a big fan of paper prototypes. A technique where you create low-fidelity prototypes that allow you to iterate quickly and without need to invest a lot of time in creating ideas. Trying this for a while now, I’ve learned that just paper prototypes are not enough. People just doesn’t take them too seriously.

This time around, I’m experimenting with upgrading my paper prototypes with computerized version. Nothing too high-fidelity, just printed wireframes in nice boxes and with a rough copy in place.

What about tools? I decided to experiment with OmniGraffle Pro (being a Mac Head) and some excellent stencils from Graffletopia.

To make the whole process easier, I followed a great video from Michael AngelesCreating prototypes with OmniGraffle, it shows you how to use Actions->Jump tool to create interactive PDF’s that you can use to simulate actual user interaction. It also quickly presents good layout technique, how you’re supposed to have a Master layer with overall grid and then just create different canvases for new layers. Best spent 5 minutes of last week, watching that.

Summary: Go watch the video, and give a bit more hi-fi prototypes a chance, after being happy with your paper ones.

Reblog this post [with Zemanta]

Use Firefox extension to solve your AJAX problems

This are the slides from my talk at Widgets Web Expo, earlier this month. While the original title was a bit more conservative, the main purpose of the talk was to inform the interested public about the issues regarding AJAX, cross-domain post request and how it affects your application.

What I tried to do here, is to discuss the User Interface decisions that you have to make, when you’re talking to remote servers. Namely:

  • progress delay and emulation of instant gratification with non-smart recommendations
  • quiet parsing in background, to not give user the need to watch progress
  • limited HTML inclusion as lots of blog platforms limit what you can do with HTML and CSS
  • teaching of users how to use widgets and where and how they are activated as we don’t have true conventions yet

More details in presentation:

Reblog this post [with Zemanta]

Mobile Attentive interfaces – the next iPhone killer app

Thanks to a nudge from Tomaž Štolfa (via his blog post), I decided to dive deeper into Mobile Attentive Interface, next generation of smart User Interface for your mobile device. The idea here is simple, we have lots of image and video processing power that we can then pair together with different geo-positioning techniques and online data storage to provide rich, contextual data, while walking around the city.

The reference project in this case is MobVis.org, developed at my home university. What they’ve done is that you can take a picture of pre-processed building with your camera-phone and they’ll give you extra information about it, directly on the photo. This is perfect for a device like iPhone, where you can take pictures, has a big touch interface, where you can then manipulate further provided information.

Example image they came up with is:

Mobile Attentive object Awarness
Mobile Attentive object Awareness

So, why it’s a potential killer app? Because it allows you to use your knowledge of physical space to influence behavior of your friends. Be it collaborative rating of cafe’s or tagging different clothing for your friends.

The idea here is to take this visual processing software and mash it up with your (social) network of friends in first step and then expend it in a crowdsourcing way. Instead of having to (boringly) rate geo-locations, you can take pictures and visually annotate them with information that’s important to your peer-group.

Only question that remains is if the group developing this in university environment, will have an ability and guts to spin it off into a proper startup.

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