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
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.
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.
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 Angeles, Creating 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.
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:
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 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.
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
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
The attention to Design Pays Off. Lots of awards and people buying the software at 2x the size of the earlier versions.