Posts Tagged ‘User Interface’

The Big Red Button of Product Management

February 25, 2011
A Big Red button

Image via Wikipedia

A fictional dialog between an investor and a product manager:

Investor: Why isn’t our user interface as simple as Google or Twitter or DropBox?

Product Manager: Did you have a chance to login into our application lately?

Investor: Never. But I really want us to have just one single button, so anyone can use it.

Product Manager: You do know we are constructing nuclear weapons? (Drum Roll)

The B28 Type Thermonuclear Bomb

The B28 Type Thermonuclear Bomb

Advertisements

Enhance Your User Exprience – Visual Attention Service

February 5, 2011

3M Offers a great tool to find the best User Interface for your application. In less than five minute it analyzes the attention attractiveness of a web application.

The score indicates the probability that each area of interest would get attention in the first 3-5 seconds.

CloudShare ProPlus Screen Area Of Interest Visual Attention Service

Visual Attention Service - CloudShare ProPlus Screen Area Of Interest

Here is an Example of Original CloudShare ProPlus Screen.

CloudShare ProPlus Screen Original

CloudShare ProPlus Screen Original Screen

Heatmaps highlight areas of the image that are likely to get attention in the first 3-5 seconds.

See how the feedback button(lower right corner)  gets a lot of attention, but the Upgrade button (top right corner) does not.

CloudShare ProPlus Screen Heatmap Visual Attention Service

CloudShare ProPlus Screen Heatmap Visual Attention Service

And a similar discrete view.

CloudShare ProPlus Screen Regions Visual Attention Service

CloudShare ProPlus Screen Regions Visual Attention Service

To try if for your own application or design:

1. Take a screenshot of your application(full screen, high resolution).

2. Sign Up for 3M https://vas.3m.com/.  Activate by email.

3. Upload your screenshot. Select “Web Application” under Type.

4. Mark important functional areas that you want to compare(optional)

5. Press “Analyze”.

The results are fast and simple to understand and downloadable as PDF.

While attention studies have their limitations and cannot be used as the only usability parameter, they can be quite useful.

The service is not cheap ($12-$20 per picture), but you can try five pictures for free. Moreover, It can save hours of stupid arguments between product managers, developers, designers and even VP’s of Marketing.

p.s – it runs on Azure.

The Best Tool for Creating GUI Mockups

February 10, 2010

Digressions, objections, delight in mockery, carefree mistrust are signs of health; everything unconditional belongs in pathology.

Friedrich Nietzsche, Beyond Good and Evil

I just found (Thanks Uri) the greatest tool for UI Mocuups – Balsamiq Mockups. If you are a product manager, a UI developer or a techie marketing person, I highly recommend it.

The traditional ways of creating Mockups are quite annoying.

  • Visio is expensive and is not really suitable for this task, although It is a wonderful tool in other cases.
  • MsPaint requires some artistic sense, and using the fill brush to erase screen bits feels so 80’s 🙂 .
  • Coding is time-consuming and not relevant to many product managers.

The things I like about Balsamiq Mockups :

  • It works ! I created Seven mockups screens in 5 hours for a complex feature
  • It feels “Just Right” . It does not try to create a real application, but it comes with many components to make life easy
  • The UI looks great, but it is intentionally “sketchy” to avoid Graphic Design distractions
  • The developers seem nice and “get it”. I even got an evaluation copy as a blogger.
  • Fair price – just $79
  • It’s really cute. For example this is how the comments look like, within the mockup.
Comment in Balsamiq

Comment in Balsamiq

Some minor issues:

  • The properties pane behavior is quite bizarre, it keeps popping up in the wrong place and fading away. Should be dockable.
  • Sometimes the Flash application feels a bit sluggish.
  • The regular evaluation is very limited, and does not allow one to save their work.

I’m looking forward for the SaaS version that would allow easier team work and revision control. A grouphub and TRAC plugin would be cool as well.It would also be amazing to generate “applications” from the Mocks.

To summarize

try it out , it is well worth your $79 and would put a smile on your face.

Alas, poor Yorick! I knew him, Horatio: a fellow of infinite jest, of most excellent fancy. He hath borne me on his back a thousand times; and now, how abhorred in my imagination it is! my gorge rises at it. Here hung those lips that I have kissed I know not how oft. Where be your gibes now; your gambols, your songs? your flashes of merriment, that were wont to set the table on a roar? Not one now, to mock your own grinning? Quite chap-fallen? Now get you to my lady’s chamber, and tell her, let her paint an inch thick, to this favour she must come.

William Shakespeare, “Hamlet”, Act 5 scene 1

Easy Is Hard, Simple Is Harder

November 28, 2009

It is easy to mistake a programming task to be simple. This is especially true in user interface.

The executive is looking at the “trivial” two fields login screen and innocently estimates it to be a two hours job.

This is a common mistake, similar to some extent to The Three Body Problem in physics. Taking a simple, solvable problem and changing one parameter can result in an exceptionally complex problem. While the two-body problem is integrable and its solutions completely understood, solutions of the three-body problem may be of an arbitrary complexity and are very far from being completely understood. See a nice graphic example.

Login screens are not that complex, but take a look at the next example and see how many open questions\bugs can you come up with ?

Simple Login

Simple Login

  1. Is it “Log-in” “Login” or “Log in”?
  2. Is it clear that email is equivalent to user name?
  3. Do you need a “Cancel” button?
  4. Should there be a visible mark for the mandatory fields? Which mark?
  5. Seems like a “Forgot My Password” link and screen are missing.
  6. Is a Captcha needed to fight bots?
  7. Simple Login Form

    Simple Login Form

  8. Is validation done on the client side or the server-side ?
  9. How is the feedback given to the user? Where?
  10. Security demands that we don’t tell the user what’s the exact problem (missing email or password). Usability does.
  11. Where is the sign-up page? Where does Log-Out go out to?
  12. “Email” , “eMail” or “email”?
  13. Nice Login Form

    Nice Login Form

  14. Do we use SSL for the login but move to clear HTTP for the rest of the application ?
  15. Cross browser testing?
  16. How shall we do unit testing for the screen?
  17. It turns out that validating an email address can be a nightmare.
  18. After the user made a mistake, which events clear the warning notification?
  19. Shall we support Hebrew? How about the German umlaut?
  20. Shouldn’t “email” and “password” be left aligned?
  21. Is the colon required after “Login”?
  22. Do we want to limit the length for any of the fields? Minimum password strength?

Notice how we got to twenty non trivial questions without discussing the actual user authentication or the graphic design, which can be huge topics on their own.

My simplistic recommendation is to use of the shelf components whenever possible and go through the annoying step we used to call “feature design” even in this agile world we live in.

Sample Login Screen

Sample Login Screen

Give me the head of HP Printers’ Product Manager

January 24, 2009

Or better yet, Bring me my missing USB cable.
In my private life I’m also known as the PC technician for the family.
I just had to install two brand new HP printers this week and I’m ready to explode.
I recommended to my family to buy HP, despite the higher price, because I thought it would be reliable and easy to use.
Both printers came with no way at all to connect them to the laptop !
No USB, No Ethernet, No RS 232.
They did come with 120 pages manual in 40 different languages.

By the way, it is unreadable and useless in each and every one of them.

It also came with ton of useless software that takes ages to install and reboot. Funny, I was under the impression that HP makes the money from the Ink and loses money on the printers.
With 2 Trillion dollars a year, can’t they buy a decent product manager from Apple ?

This post is sent to you from a 1Ghz 256MB PC conencted to a 8 years old HP DeskJet 5150, please ignore the typos. I’m babysitting two two years old twins and a blind cat.

State Of the Art in User Experience Feedback

August 23, 2008

Here are some great ideas collected from over the web. The main theme found is being wordy and explicit in the user interface. Instead of old world tedious help files, the UI explains itself as much as possible (click on the pictures to see them in actual size).

In Experts Exchange, when you sign-up, the form checks the user name as-you-type to validate that’s is free.

And a Positive feedback.

There are four positive feedback signs – Green Color on text box,green color on check box, the check box itself and the caption below (“The user name ‘ophirk’ is available” ).

Sign Up for Dummies

Sign Up for Dummies

Google Calender has cool feedback as well, their feedback bar is used for positive and negative feedback for just about any action done in the application. This data can also be used for action logging  and undo functionality. Parts of the toolbar message contains links to objects related to the action ( e.g. guests ).

Another cool idea by goggle is text interface. If the Subject of the new meeting has “with alex@itstructures.com” Google Calender understands Alex is a guest and adds him to the appointment.

LinkedIn has nice tool tips. The old yellow window tool tips were not as helpful as people wanted them to be. There was no indication where tooltips existed, they were too short for helping out and disappeared too quickly.

In this case the tooltip explains not only what the button does, but also the social context of the action.

It seems that leading web consumer sites are influencing Enterprise based applications and the prosumers. Becoming more “wordy” and explicit helps the users grasp the context and implications of the applications.The principles used are not new, but they struck the right balance between helping and annoying the customers.

Where in the world are the great user interface developers? – Part III, The Conclusions

February 7, 2008

1. Hire a person that loves to create and program user interfaces.

The ones that “will do it”, “can do it” and “might do it” are not the ones that produce “it”.

Explicitly validate their love during the interview, as most people find it harder to lie when they answer a direct question.

  • “Do you love to program UI?”
  • “Wouldn’t you be bored  of debugging CSS bugs in IE  24 hours a day ?”
  • “Do you use tooltips to remember the names of your kids?”

2. Get a great programmer.

No big surprise here except one – maintain all your regular expectations from your best kernel master.

Look for a developer that understands how UI frameworks work, remembers  binary search and grasp how networking  is a part of the web.

A prior knowledge in UI is a plus, but isn’t mandatory. Core capabilities are the key.

Some representative tasks :

  • “Analyze MonoRail and compare it to WebForms”.
  • “Make sure our website loads quickly over WAN , although the IE team thinks HTTP pipelining is a risky technology.”
  • “Make sure we have a single method for error reporting”

3. Outsource wisely.

Hire excellent usability experts and graphic artists. If needed , augment them with Flash gurus and CSS wizards.

For a start-up you probably don’t have full time positions for these people anyway. For a big organization you should try and get them in-house. However, it is hard to convince the great ones to work in a big corporate with more than 3 employees.

4. Choose people who posses extremely high aesthetic qualities.

No, they don’t have to look like Top Models. They don’t even need to be able to draw a straight line.

God knows my drawing skills reached their prime in kindergarten.

monalisa.png

Actually, I was almost thrown out of the army’s officers course, because the psychological screening suggested my image of a house is seriously flawed.

Still, I can be quite obsessive to get others to make it look good. In my younger days I opened  a few bugs over a one pixel misalignment in a firewall dialog box. I did apologize to the programmer before doing so…

5. Pay them accordingly.

If you think UI is as important as the rest of your system, put your money behind it.

BTW, it is probably the most important part of your system.

Where in the world are the great user interface developers? – Part I

January 11, 2008

UI Guru Ad

After a six months long search, we have finally filled our UI Guru position. While recruiting is not easy these days, it is next to impossible to find an excellent UI developer on any given date.

There is vicious cycle preventing good people from programming UI and pushing good UI programmers to other domains. I will try to describe this flawed process and maybe even start a movement to fix it…

Here is how it works:

1. Development managers unusually come from the server, networking, kernel and database walks of life.

2. Software mangers tend to be arrogant .They presume UI programming is easy, boring and can be done by anyone.

3. UI developers earn less money than kernel\networking developers.

4. The best programmers do not want to become UI experts, as there is less money and prestige in it.

5. As most UI developers are not excellent programmers, they write the code in non modular, non reusable fashion. Thus it really becomes boring and manual to fix. Even if an excellent programmer happens to start in UI, he soon wants to move on to the server side, or at least become a team leader.

6. As a result of the above, the development manager belief is encouraged, since most of their UI coders are not very impressing. They pay them less and distance them form the real interesting product decisions.

Examining the myths leading to this outcome, I believe they are flawed and irrational.

“UI is not an important part of the application”– thankfully, people have largely grown out of this perception. The success of Outlook, iPod, Nokia, Google and others has demonstrated that exceptional user experience carries a huge premium.

Even in more traditional enterprise based security software the rule applies.  If the feature does not have a visible, clear, user interface it might as well be removed. When I worked in Check Point, we sometimes tried to roll out features with no UI, because UI always seemed to be the bottleneck. We rarely succeeded.

In one famous case, we added a dialog to features that existed in the product for two years. The interface was simple and we assumed the task would be quick and easy. We were very wrong. Not only the UI was complicated, it turned out the features themselves are not working and need to be designed from scratch.

The features were turned off by default when they were first released, so they never ran in the field. Off course, no bugs came from support and everyone assumed they work well. QA stopped testing them, as they were pushed to the magical “Test Cycle 3” which never actually takes place. Our sales and marketing people did not really promote the features and customers did not even know they existed.

“UI Programming is Easy” – Yeah, right. If it is so easy, how come it is always the bottleneck?  I managed software projects in multiple programming language and various organizational structures. X\Motif, MFC, C++, Java, Swing, AJAX etc. I experimented with UI programmers as a separate group, as integral part of the main application team and as outsourced team. The projects domains were in enterprise, consumer and Telco .The developers were Israeli, American and Belarusian.

The one common aspect was the UI effort was almost always the bottleneck in the development process.

Server developers tend to think UI is easy, because one can create a trivial application very quickly. Sadly, most applications are far from trivial. Generating high quality user interface, which is maintainable, modular & pretty is extremely difficult. Unlike backend programming, every mistake is highly visible and everyone has an opinion on the subject.

“UI Programming is boring, tedious and manual”

Strangely, many people think programming kernel drivers with VI in “C”, armed with printf debugging, is more tedious than writing a modern application in C# & Python, using Visual Studio.Net.  Personally, I find the internals of kbuf, mbuf, ioctl & NDIS tiresome and frustrating. If one wants to hand craft assembly code, he might as well become a hardware engineer.

It’s true the debugging Cascading Style Sheets can be frustrating, but so is analyzing core files on Linux machine and the memory is one big mess. Sometimes it seems that the typical male programmer finds it more prestigious to hunt down the prey with bare hands 🙂

The truth is that UI programming and design can be extremely challenging. When done right there are sophisticated modeling, design and coding involved. There is always some manual, event customized code that needs to be written, and this tends to be less generic than server code by nature. However, the usage of more modern programming frameworks compensates for that and makes it much more fun.

Stay tuned for the second part of the post – Binary search and the UI Guru.

Debugging Core Files