A couple months back I heard a good talk by Steven Krug. The talk was entertaining and had a simple core point.

• Let people know where they are on your site so they don’t get lost.

Lately I’ve noticed a bad trend in web-design that sites make it very difficult to tell where you are:

Instead of using some visual indication to tell you what section of the site you’re on these sites choose to do nothing. This makes it difficult to tell where you are on the site.

It’s super easy to bold or highlight the section you’re on. Why aren’t these sites doing this? Perhaps in a ‘page view’ culture they want to confuse you and get you to click all around the site looking for the page you need. Twitter in particular highlights a tab that has nothing to do with the page that you’re on.

Well designed sites tend to have primary and secondary navigation elements and it should always be obvious where on the site you are simply by looking at the navigation area. You can bold the text, use a tab graphic, highlight the text, etc, etc. Make it obvious when you’re on a particular section of the site.

LinkedIn, Facebook and Flickr also use hover menus. In general hover menus can cause all sorts of accessibility problems. They also cause obstruction problems as you move your mouse through the screen you pass through the menu and obscure the area you’re trying to click. Lastly since these hover menus contain secondary navigation elements you can’t tell where you are on the site because typically the hover menu is closed.

There are ways to use hover menus and make your navigation clear. Staples is an example of this. The primary navigation is always obvious and althouh the secondary navigation is a hover menu the currently selected page is expanded and shown within the header area making it easy to move around the site.

This is not another post about how bad performance is on twitter. There are planty of other people talking about that. Instead this is a post on how you can define performance expectations in terms of the user experience.

For example:

• When I open a file that’s very large I have a different performance expectation from when I open a small file.
• When I send a large package by mail I expect that it may take longer then a postcard or a letter (unless I pay more).
• When I travel I expect it’ll take longer to get somewhere if it’s further away.

These expectations are defined by the task at hand. Consider how the Twitter service is trying to scale and provide performance expectations.

• A person that is tracking 10 friends has the same user experience performance as a person that is tracking 10,000.
• A person that is being tracked by 10 friends has the perception that their messages are delivered as quickly as a person being tracked by 10,000
• My stream of data is updated in real time regardless of if I visit the site once a year or once an hour.

Basically the way the user experience is ‘unfair’ in it’s balance of resources.  Regular users of the site are punished by the super users. If you think of the site as a utility then each person using the site should be entitled to a somewhat equal share of the site resources.

The Twitter status blog makes no secret that they believe they should be architected as a messaging system. Each time a person posts a message it’s ’sent’ to the followers of that person. So each time a popular users posts a message it may be sent to 20,000 ‘inboxes’ this can result in a mass ammount of back-end servrver requests to process the messages.

Consider how the performance expectations could be set through a simple user interface change:

By simply telling users that updates for that user are being sent and a percentage of those updates is complete it begins to set expectations for how the performance of the service will scale.  For a user with 50-100 followers the sending performance will continue to be relativly quick but for users with tens of thousands of followers there is the expectation that it could take several minutes to get all updates out.

If you define the user experience you want to achieve you can architect your system with this in mind. The above implies that each user would have their own outgoing message queue. This is similar to an outbox in email. A collection of worker machines could then cycle through all the users and process a certain number of operations per user.

• If the user has messages in their outbox process X messages and deliver them to the appropriate end-points, sending to the most popular people first when possible.
• If the user has no messages in their outbox process Y people that they are following and pull messages from those peoples message queues.

The above is a fairly simple system that is similar to how a CPU kernel will perform process time-slicing allocating a consistent amount of time to each system process. Similarly each person is allocated an equal slice of the sending/fetching pie. The above process has the following nice characteristics:

• If you follow few and few follow you you’ll have a very responsive experience.
• If you follow few and many follow you most of your time is spent sending updates.
• If you follow many and few follow you most of your time is spent fetching updates.
• If you follow many and many follow you your updates don’t slow down the system they just get added to the queue. Additionally people with lots of followers are able to carry on conversations with other popular people. (The Techcrunch chatting with Scooble problem)

The systems would scale in a more linear way. Certain users would experience slow sending durring peak times but this would be more isolated and a problem that is easier to solve with more worker machines. The key thing is that by setting the user experience expectations of performance with an outbox or a sending status the users of the system can visually see the health and performance of the system.

A wireframe is an early design that can help you and your team get agreement about what the design should look like and how it should behave. This is similar to how an architect may create a sketch of a building or how a director may create a pencil storyboard of a movie. The purpose of the wireframe isn’t to have a completed product it’s to get high-level agreement on the overall flow.

There are many specialized tools to create wireframes but I believe that many of these actually get in the way of the creative process. The most common problem is that they often render visuals that could be confused for an actual design. This can make people think that they are looking at a specification and they will critique the minor points and word-smith instead of engaging in a discussion about the high-level work-flow.

The other problem with highly specialized tools is that they tend to make the designer behave like a programmer wiring up pages with links and actions.  The wireframe is not meant to be a working prototype. It’s meant to be fluid presentation of the high level application structure.

I often wireframe using a pencil, a ruler and a stack of paper:

Paper has the property that you can do anything you want. You don’t need to find a checkbox in a dialog you simply draw a checkbox.  You don’t need to wire-up events you just draw what you want it to look like.

The advantage of wireframing in pencil is that the design is obviously not complete and it gives you and others creative freedom to try things out and move things around.

I took the same principal and applied it to a Powerpoint template. All the parts can be easily moved around and customized. The parts have a pencil drawn appearance. Making it easy to edit, customize and add.

It’s not as flexible as paper & pencil but it does make it easier to get executives and developers to edit a wireframe and explore UI concepts and ideas.

This sample includes a number of sample screens showing how various web-page parts and techniques can be mocked up.

I love designing applications for mobile phones. It forces you to think about the essential features. Often times this is exactly the type of design you want on larger applications but it’s tougher to convince clients that the application gets better when you take away features. Many larger applications can learn from this.

• Do one thing, do it well
• Linear flow top-down
• Purposeful word choice
• Large fonts for readability
• Keyboard accessibility
• The details matter

Over the last few months I’ve started exploring twitter.  It seemed like a fad. I signed up and said… Now what this is lame.

Having used it a little longer I’m starting to see some value. Not as a site for expressing ‘what I’m doing’ but as a modern megaphone. A way to shout something for anyone willing to listen.  Of course not everyone  can be bothered to listen to what you have to say especially if you’re busy telling people about the boring minutia of your life.  Don’t be that guy, rookie mistake.

Twitter can be best explained by thinking about communication tools:

• Telephone - one to one synchronous  (balanced)
• IM - one to one async  (balanced)
• Blog - one to many async (un-balanced)
• Twitter - one to many (balanced)

For this reason twitter is often called a micro-blog. The issue for writing an actual blog is that it takes time.  Writing an article can take anywhere from 10min to several hours.  Some posts may peculate over months.  Compare that to twitter where your writing is constrained to 140 characters. This means that anyone with 2 minutes can write a mini-blog post and get their ideas, questions or opinions across.

Instead of this long blog post I could have just written:

Twitter - strange service, somewhat useful. Forces ideas to be clean, simple and direct. Limited space makes people think before they write.

Exactly 140. Not bad. Add a comment and I’ll follow you.  - @graiz

The price per megabyte of storage and data transfer is going to approach a per user cost that is less then the value of one advertisement per year. Assume that a typical user generates 5mb of content per day. I may generate more from photos while most of my relatives will generate far less. Over a year that’s that’s under 2GB of new data.

If we use Amazon S3 as a pricing guide the current cost of storing and uploading 2GB is conservatively about $16/year.

That’s not terrible but now consider that while the speed of transistors has been following Moore’s law of doubling every 18 months the storage density of drives has been doubling about every 12 months.

This means that 12 months from now the cost will drop to $8… $4… $2… $1 and so on. In 5-10 years we can expect storage costs to be well under a penny for a 1GB of storage. At that price it’s essentially free since any add on services or products sold will be far more significant to the bottom line then the actual cost of the storage.

Since content is personal and sticky the companies that will succeed in this space are the ones that can provide such a service today at a loss in order to aquire the customers of tomorrow.

If you’re in New England and interested in design, software and usability you’ll want to check out the Mini-UPA one day conference. It’s a one day event so you won’t be tied up all week and it’s jam packed with great speakers. There are over 30 speakers talking about all sorts of things from Web Apps, Interaction Techniques, Analytics, User Experience and design. Best of all the event is really affordable for a full day of speakers and classes. The event is May 28th so go put it on your calendar and sign-up now.

I’m on the board of UPA Boston and my company is also co-sponsoring the event but don’t let that stop you from showing up. I hope to see you there.

The key feature of a phone is to be able to place a call. This IP based phone fails at this task in a spectacular way. Not only was I unable to place a call using this phone but in the process it displayed a nice error messages telling me that it couldn’t render a web-page.

The problem arrises from the fact that most companies have a special code to dial outside the company. If you guessed “dial 9″ you guessed wrong, and so did I. No matter what I tried I couldn’t get an outside line. I couldn’t get a dial-by-name directory. I couldn’t get an operator and there was no help available.

There have been several companies that have tried to automate tagging of images with meta-data to allow end-users to easily search pictures. The techniques currently break down down into three categories:

- Recognize the images through facial or image recognition (riya)
- Allow others to tag them for you (tagcow/google/facebook)
- Inherit tags from objects that someone else tagged (photosynth)

Image recognition can get 80-90% accuracy. While this sounds pretty good it’s actually pretty frustrating because 10-20% are incorrect.

If you allow othes to tag your photos they only tag or recognize things that are obvious. The first image just looks like a building while to me it’s Coolidge Corner, Brookline. The second photo looks like a car while to me it’s a Ferrari I saw in Itally while on my honeymoon. While strangers can solve part of the problem they lack the context to do so correctly. (Plus you give up on privacy)

Auto-tagging based on other people’s photos has a ton of potential. But only for comonly shared items or locations. It may be able to tag the Golden Gate Bridge but it’ll be a lot harder to find photos taken inside or photos of non-descript locations.

For true auto-tagging to work facial recognition needs to improve. Cameras need to save their GPS coordinates and those coordinates need to be translated into the names of locations and places. Historical data (email, twitter, facebook) can be correlated by inference and proximity to photos. A lot of tagging solutions focus on creating new meta-data while ignoring the mountains of un-tapped data that already exist.

I love logos and a while back I tried to compile the logos of all the Fortune 500 companies. This was a while back and I ran out of steam at 150. I had started compiling these for a financial services company that wanted logos next to company symbols when we realized that there wasn’t a central database for company brands and logos. Perhaps one day one will exist, until then this makes for an interesting reference.

(more…)