Real World Example: Signaling to bus driver to stop at night

While going for my daily walk a couple weeks ago, I noticed that certain bus stops now have a new feature that 1) enables bus riders to signal to bus drivers to stop when it's dark out and 2) subsequently for bus drivers to see that a certain bus stop has passengers. It's the first time I've seen this and although I've never used it I hope it serves its purpose well. The text describing users how to use it is clear. See the photos below.



The one concern I have is if it's too dark for a bus driver to see a person(s) waiting for the bus wouldn't it also be too dark for a passenger to feel comfortable waiting in the dark for the bus?

Update & Happy New Year

As you can see, I am no longer regularly updating my blog. I still plan to post thoughts on design and user experience as time or if time permits. For more recent thoughts if really interested, check out my twitter feed.

Happy new year everyone!
...and for my french followers...
Bonne Année à tous!

Interesting Ideas: Wind-Powered Ball to Clear Mines

The Mine Kafon (teaser) from Callum Cooper on Vimeo.

Sign of the month: No fishing between arrows

Seen at the Santa Monica pier.
Note: there are no other arrows than the ones on the sign.

Designing for Multiple Devices

I have been looking for a while for a specifications sheet for designing for multiple devices and today I've come closer to what I am looking for. Today's UX Magazine feature article lists common resolutions for different devices and offers some great guidelines for beginners on how to plan your design strategy when designing for multiple devices. The article outlines some great reminders for those

Here are three reminders that are not emphasized enough in my opinion:

1. When possible, design for mobile first since the mobile environment offers the most constraints both real estate-wise and feature-wise.
2. Make sure to identify the users' goals for each separate type of device (tablet versus smartphone versus PC, etc). The user's primary and secondary goals depend on the context of use of each device and therefor the users' goals need to be defined for each type of device. You might be surprised at what you discover!
3. Design low detail wireframes then high detail wireframes followed by visual design mockups scaled to each screen size and containing the essential elements common across all devices types. This helps to create unity across devices in the early stages of design.
4. Establish and document design style guidelines and patterns noting the specifications for each device type when the design differs because of constraints.

In addition to other tips, the article also includes a table comparing native mobile apps to mobile web apps. Check it out!

Forms: using mad libs layout

Interesting article on a different way to style a web form.

Make sure you test it out on your users if you feel creative. Just because it works for some doesn't mean it will work for your primary users.

Don't know what mad libs is? Check out the definition from wikipedia.

Changing Room Experience

A couple of weekends ago, I found myself in the dreaded position of needing some long sleeve tops. I write "dreaded position" because unlike the majority of women, I don't especially like the shopping process whether it's finding something for me or for someone else. A part from the "I have better things to do than shop" point, the main issue for me surrounds the decision making process in the environment. Juggling the items in the changing room on a minimal amount of hooks while trying on items and then deciding what items are a "yes", a "no" or a "maybe" is a process I prefer to avoid.

Anyhow, I decided to go to Marshalls because it's walking distance from where I live.  Walking there and back creates a separation from the negative part of the experience (the actual shopping) and by adding the walk, which I enjoy, I can increase my enjoyment level of the overall shopping experience.

After carefully choosing my eight -- since eight is the limit -- long sleeve options, I make my way to the changing rooms. (It would be more accurate to write "changing stalls" but that would require me to write up a new posting on the topic of labeling :)). The store had been making renovations to the changing rooms (stalls) for a while and on this visit they had finished one section that now had new paint, wallpaper, and stalls.

Upon entering the changing stall, I was pleasantly surprised and noticed two differences with the old ones which were a huge improvement.


The two improvements:

1. Hooks: There were actual three hooks to hang the hangers. Now this might not seem like much but it's a huge accomplishment to actually be able to hang things on hooks instead of on the door or door knob. It seems like replacing missing hooks in changing room is way down on the list of priorities for most clothing stores. Usually if you're lucky, there's one hook present and several hooks missing. There's a lot of motor and cognitive skills involved to hang eight hangers on one hook while trying on clothes and swapping items off and on hangers while remembering which item is a "yes," a "no" or a "maybe" which is why I usually end with all "No's" and leave the store feeling frustrated and unproductive. But now with the improvement, I could actually hang four hangers each on two hooks and have an empty hook for my own clothes when trying on the different options.

2. Labels: Each hook had a label. The three labels were: "Definitely", "Possibly" and "Tomorrow."
See the images (below) which were taken with my cell phone so they're not super sharp.

I immediately identified with the labels "Definitely" and "Possibly." After trying on each item I could classify them into the "Definitely" (yes) pile and the "Possibly" (maybe) pile. I wasn't entirely sure what the "Tomorrow" label referred to though. This caused some confusion because it could refer to items that I might want to purchase tomorrow, maybe put in layaway, though I wasn't aware that Marshalls offered that option. Or it could mean a more philosophical tomorrow as in "maybe another day" or "not now," ultimately meaning "no." I decided on the latter meaning.

Even though the third label "Tomorrow" caused some confusion I could easily give it a meaning. Furthermore, by not using a negative label such as "No" or "Not Now", the marketing team is subliminally preventing the user, in this case the shopper, from focusing on the "no" because from a sales perspective they want to increase the likelihood that we buy an item. Very clever. Secondly the negative label might cause the shopper to associate a negative feeling with the store and it's brand which of course Marshalls' marketing team would want to prevent.

During this shopping experience, the maximum allowance (eight hangers) fit the environment (the stall and its hooks). I had space to see my inventory and could perform a preliminary classification after trying on each item. This enabled me to make clear and fast decision and I only needed to re-focus on the "Maybe" items. I was in and out of the changing rooms in record time, purchased a top and left the store with a smile.

This example shows a great balance of a how to help the user while staying aligned with the business goals and improve the user experience!

What do you think? Do you have an alternative suggestion for the "Tomorrow" label? Leave a comment below!

Launching a Web App?

I see that my blog posts have become much shorter in the last few months. I'd like to blame the warmer weather but I know it's not an excuse.

I just came across some great reminders...If you are developing or think of developing and/or then launching a web app (a.k.a web applications), read about what to do once it's launched. Yes, launching is just the beginning...

HTML 5: Demos and Techniques

HTML5 has had a slow start but slowly demos and techniques are emerging on the web. It will still take a while for it to become the standard but it's making progress and looking really cool so far.

Consistency in UX

Great article from UX Booth on how consistency is crucial and directly impacts the user experience.

The first commentator brings up a interesting point regarding the term 'consistency' and suggests that "coherence" should be used instead.

Both consistency and coherence are needed of course but consistency should never be followed if it's at the detriment of the user experience. If being consistent doesn't make sense from a UX standpoint, you might have bigger problems than you thought. In this case, look back at the business goals and UX design strategy and make sure the decision is valid before moving forward.

Dilbert on UX

Something light for a change :) ... Enjoy! Dilbert on UX

UX Design: the What, How and Why.

Great presentation on UX (user experience) design. It's very simple but it's a great overview for anyone unfamiliar with the field.

Great metaphor on slide 15 that shows that the visual design should only account for 10% of what goes into the design process and that 90% of the time should be dedicated to the rest of the process. yes 90%! I'm still shocked at the importance people put on visual design. If the aesthetics are pleasing but there isn't function, users will not be happy, there will be little satisfaction, conversion or adoption. Visual design should be the last step in the design process, at the top of the pyramid. Every house needs a solid foundation and structure before the paint and decorations can be added.

When UX Design is implemented correctly, the savings are astonishing (see slides 29-32) Check it out!

iPad UX Guidelines

For all UX designers, interaction designers and engineers out there...Apple published its first iPad Human Interface Guidelines Read them when you have a good chunk of time to dedicate to them because it's not light reading material. :)

Or need a summary? Check out UX Mag's concise outline or ZDnet's first look at these guidelines.

Updated March 4, 2010

Lessons learned from Apple: the iPad

What can I say more than what's already been said and written about the name for Apple's attempt of a Kindle and smartphone all bundled into one tablet.

You would think a large and successful company like Apple, Inc. would have the best market researchers and could have prevented the unstoppable mockery and ridicule surrounding the chosen name. Any 13 and older female could have given Apple's market research department a solid list of the negative connotations the iPad term invokes. At the least, they could have googled the term and seen that it had already been ridiculed in 2007 in a MadTV sketch (I won't post the link but google it if you're really intrigued) . Watching this sketch would have saved them from the everlasting negative press. With so much talk regarding the name "iPad", I am surprised that Apple hasn't issued an explanation of the rationale behind the name to at least defend it's choice. Silence has been their strategy, only time will tell whether it's the right strategy.

As mentioned before, so much has been said already so instead of analyzing it more here are some lessons learned and reminders:

1. First impressions are hard to forget:

Negative first impressive are impossible to forget however taking user feedback and showing them you heard their frustration and dissatisfaction and incorporating it into the next product version will positively impact the user experience going forward and over time lessen the negative first impression and build back some user trust.

2. Choose your labels and product names carefully:

Labels, their understanding and their usage are the easiest way to communicate 'something' to someone. If a label isn't understood or used in a way that fits the users expectations then confusion and other negative emotions will always arise. There's always time for another round of focus groups or user testing to gather feedback because once rolled out to the public, negative connotations, reactions will always hinder the user's experience and will ultimately affect the product adoption process and therefore sales. User testing doesn't require a large budget to be successful as long as you are testing your target user group and you are getting uncontaminated feedback. Contaminated feedback is data gathered from a user that has been contaminated by factors such as desire to please, dishonesty, knowledge level of the product or system, etc. and is therefore unusable.

3. Test early and test often:

Test early: The earlier you test in the design process, the better you can gather and modify the design accordingly before anyone gets too attached to the design and before resources and time is put in to later design stages. Start testing the low-fidelity -- meaning the less detailed -- designs before developing any high-fidelity -- meaning the more detailed -- designs and you will see how early tweaking will solve a lot of usability and user experience problems sooner.

Test often: test as often as needed to validate your user's mental model, meaning their expectations to their goals and tasks) before moving onto more detailed prototypes. Remember anything can be tested at any time in the design process and by 'anything' I mean 'every thing' can potentially be testing if there's any doubt to its validity. This includes internal testing (remember the risk of contaminated data), internal reviews and user testing to gather quantitative (data that can be defined using metrics) and/or qualitative data (data that can be described) related to, but not limited to layout, navigation, labels, information architecture, interaction design, user experience, visual design, feedback, flow, aesthetics, etc.

4. Fill a need:

Does your product fill a need and by need I mean 'a practical need' not a 'I need that because I want to be cool' need? Even though early adopters will think they need, want and buy the latest gadget, if it doesn't fill a practical need the hype and sales will be short-lived because late adopters won't understand the validity or the necessity and the product won't turn into a long-term success.

Update on May 8th, 2010: From the Huffington Post: One woman's iPad review

Video: Change Blindness

UX Magazine just posted an interesting article about an occurrence called "change blindness." The article includes videos of the experiments carried out that support the phenomenon.

The experiments are enlightening, mainly because it's amusing to see the scenarios unfolding. As a spectator seeing how evident the differences are, it's surprising how the subjects in the videos are oblivious to the changes. It would be interesting to see the full quantitative data from the experiments to see the percentages and variation by variable. The videos clearly reinforce that user behavior needs to be tested to validate expectation and minimize the difference between actual behavior and desired behavior. I would have expected more participants to notice. Then again the video is probably not be representative of the participant sample.

The end of the article states:

"What are we failing to capture when observing people using the products we design? We [as UX professionals] need to reserve space in our work for uncovering those things that we don't know we don't know, and make it an official part of the process."

This is quite obvious and a good reminder especially when rolling out new features that seem evident to those working closely on the project.

Color Scheme Tool - Review

As a designer, I'm always looking for color scheme tools and wheels that are efficient and fun to use. Color Scheme Designer is the most interactive and fun one to use I have found thus far. It also has numerous features for a free color scheme tool as well.

Dislikes:

• Absence of Reset Button: the only way to reset the colors and start fresh is to refresh the page from the browser refresh button
• Overlay Interaction: certain examples pop-up as an overlay (notably the light color & dark color page examples). These pop-ups lack a 'close' button. The only way to close out is by clicking beside the overlay so by clicking on the backdrop or by pressing on the 'ESC' key which wouldn't be evident for the average user.

Likes:

• Interactive, clean interface design, detailed features.
  
• Several Color Models: choose whether you want a monochromatic, complimentary, tetrad, or analogic color scheme. Do you want to use one or several colors and how they should contrast each other.
  
• Color Vision Simulation: shows you how people with color deficiencies will see the chosen palette and what percentages of people have the deficiency. (A dislike is that the percentages lack information on whether the percentage relates to the world population, a specific country, or a continent.)
  
• Export: you can export the color palette (hue blocks, color list and hexidecimal values) as: html and css, xml, text, Photoshop Palette and finally GIMP Palette
• Undo - Redo buttons: enables you to easily undo or redo a color change you've made while tweaking your color scheme
• Random Option: random option gives you ideas of palettes to use if you're lacking inspiration
  
• Adjust the Theme: You can adjust specific hues in the theme
• Light Page & Dark Page examples of the scheme once chosen
• Show or Hide Tool Tips: in case you need a refresher or what a 'tetrad color model' is.

Another color scheme tool I've used in the past is ColorBlender.

Google's new fade-in experience

Google recently rolled out a fade-in effect to their homepage.

After playing with the fade-in experience for a few minutes, I really didn’t see the advantage of the new fade in experience. The article does mention that after months of testing they’ve rolled it out. So my first question is what exactly were they testing? The page seemed minimalistic enough that new and existing users wouldn't find too many hindrances to their tasks since the search engine page had limited tasks to begin with. The official Google blog mentions they tested several variants of the fade-in experience. But why change the homepage experience to begin with and why was it a priority? I haven't found any answers yet.

I'm the first to agree that less in more but in this case it seems like it was a either a waste of time and resources on Google's part or simply a clever way to generate buzz about themselves because of the imminent release of their Chrome browser...Looking forward to the next version of the Google homepage.

When Was a Web Page Last Updated?

Are you eager to know when a web page was last updated and don't see a last modified date anywhere on the page?

Here's an easy tip that will give you that much needed information. Type the following code into your browser's address bar: javascript:alert(document.lastModified)

After clicking on the "Enter" key, an alert box will appear telling you the exact date and time the page was last modified. Voila!

CAPTCHA : double-edged sword

A CAPTCHA is, in technical terms, a challenge-response authentication process. In plain english, it's simply a question on a webform that requires a correct response from the user who is filling out the form to make sure the user is human and is not a computer. The process consists of a computer generated image displaying text, usually a combination of numbers, upper case letter and lower case letters, and a text field below it. The feedback was developed by humans in order to reduce spam created by robots filling out web forms.

Upon filling out a form, the user reads the CAPTCHA (they started out as a simple words such as 'boat', 'goat' and so forth), types in the exact word or sequence of letters/numbers in the CAPTCHA field and finally submits the form.

The thought behind it was fairly simple: humans can read text in an image format whereas robots (non-humans) wouldn't have the ability to do so. However, technology has been catching up and can now easily read certain CAPTCHA images and therefore different methods now need to be used to prevent technology from reading the CAPTCHA. The only way to prevent them from reading it is by rendering the text less legible which of course make it less legible for humans as well. Methods such as striking out the text, crowding the text together and distorting the text are all currently being used and in certain instances all being used at once. which makes the CAPTCHA unreadable.

See below the latest CAPTCHA image I encountered. Can you unambiguously say what the sequence is?







Now what was once a solution to avoid spamming is creating a huge usability an user experience problem. My average number of attempts to validate, or get the right answer, when filling out a CAPTCHA is three attempts. Frustrating to say the least.
What have your experiences been or what solutions have you found to solve the problem?

What font is that?

Web designers, developers and web enthusiasts ask no more! With Font Finder, a new Firefox add-on, you can now quickly get the answer without scrolling through the Web Developer Add-on "View CSS" option or guessing what it might be.

1. Install Font Finder
2. Restart Firefox
3. Select text on a web page
4. Right-click on any text on a web page
5. Choose Font Finder > Analyze Selection. On the mouse-click an alert box will appear and display the color, font, spacing, decoration/transformation, and attribute details, all in selectable text.

Pros:
More features. There are also options to "Copy element's" attributes or "Adjust element's" attributes.

Cons:
1. The pop-up is an alert box so you need to close it before switching browser windows, tabs, screens or applications.
2. You need to select text within an element or an alert will pop-up notifying you of the error.