archives

How the art of visual design plays a role in usability: A usability review of Microsoft and Apple websites.

Beyond the initial PC vs. Mac appearance of this article, it really points to how a great design team has worked to unify a company and present a unified message. No matter the size of your company, I think every design team struggles with focusing the company in one direction, especially when there are many people contributing to product development and content.

No small feat.

posted by emmy on Friday, Sep 11, 2009 · 2 comments

Found this accessibility plug in for Firefox by Jon Gunderson, Illinois Center for Information Accessibility. It includes information on your site’s navigation, scripting, styles; generates reports for accessibility and validation based on FAE rules and W3C standards; and provides keyboard enhancements to test binding.

posted by emmy on Monday, Apr 13, 2009 · 2 comments

Netvibes just released several upgrades to their personal dashboard product.

Several of the features I’ve enjoyed have been the customizable layout into various grid-based designs. They’ve also improved their thickbox modal experience by allowing the modal box to be draggable, and making the 70% opaque background become lighter if I need to view changes made in real time to the screen behind the modal (specifically when I’m choosing my template design). I also enjoy their RSS feed reader and inline podcast for both audio and video.

Thanks to Cameron for the tip on Netvibes earlier this year, it’s been a great resource.

posted by emmy on Friday, Dec 12, 2008 · 0 comments

Today I give up Twitter and go back to reading blogs, talking with friends, and paying attention to life instead of tweeting it.

What I have gained from using Twitter? An amazing ability to write brusquely in 140 characters or less, and a timeline of my thoughts and experiences over the last six months. The timeline is the most valuable, but being brusque is a skill I’d rather not have.

posted by emmy on Friday, Oct 31, 2008 · 16 comments

posted by emmy on Thursday, Jun 12, 2008

I appreciated both 37Signals and Jeff Croft’s take on why and why not to use Photoshop or a visual comp as part of a prototype workflow. Jeff makes excellent points that established patterns, maturity of a product, and the client’s ability to visualize all influence the need for or lack of a high fidelity visual prototype.

posted by emmy on Wednesday, Jun 11, 2008

Using a bit of psychology on your users

I cleaned out my garage this weekend and looked through a few of my old college text books (why do we save these?). I found a book on art criticism and another on operant conditioning – reflective of my degree in Art Education and Psychology. I was reminded of the article on Coroflot about how interaction designers never start out that way and often find their way into the career. I come from varied fields having little to do with computers, but everything to do with human behavior. I’m a people watcher – portrait artist and behavior analyst, to be specific. So I’ve studied a bit on human anatomy, facial features, gestures, and a little more on operant conditioning of behavior. It’s the latter I’d like to elaborate on because it has an influential place in manipulating the user experience by using our designs to encourage or discourage user behaviors.

Operant Conditioning is best understood using the box model, B.F. Skinner’s box model. It’s a method of increasing or decreasing behavior based on reinforcement or punishment. Take a quick detour and read a simplified discussion of the Skinner box model.

Thanks for coming back. Now you know a little more about positive and negative reinforcement, punishment, and extinction. (If you still think punishment means spanking, go back and read the definition.) So the idea is that you can increase a behavior by giving something (positive) or decrease behavior by not giving something (negative). A real life example is I will give my child a half hour of Wii time if she cleans her room. The cleaning behavior increases because of positive reinforcement.* An interaction design example: the user clicks on a part of the screen that is designed to look like a metal button and they get the desired results. The behavior of clicking on metal looking pixels will increase because it provided positive reinforcement. A user could learn to use a different colored button, but consistency across a site or OS will help them learn the behavior faster. An example of negative reinforcement: a user scrolls down to hide the top 15% of the web page which is covered in banner ads. The behavior of hiding the top of a screen is increased because it stops the flashing banner ads. And last, an example of extinction: a web site has broken links. The user will stop clicking on links when nothing occurs. Because neither positive or negative reinforcement occurs (nothing happens), the user’s action of clicking on links eventually stops – and they will most likely leave the site.

This is a little more technical than I planned, but the concept is that we teach our users to use technology through providing rewards for their behavior. If not careful, we can also teach incorrect behavior by reinforcing the wrong actions, leaving our web sites and applications a messy user experience. If our users are struggling with a part of a web application, identifying how the design is teaching behavior through operant conditioning can help us resolve and correct the user experience.

Human behavior is an amazing thing that evolves as our environment changes. As interaction designers, we play an important part in teaching the users to evolve and adapt to new experiences.

Or maybe our users are teaching us...

*A bit friendlier approach to operant conditioning of your children: Love and Logic

posted by emmy on Saturday, May 17, 2008

Beautiful URLs like omniti.com/is/hiring are some of the small details that Jon Tan and Chris Shiflett worked on for a redesign for OmniTI.
Which reminds me, northtemple.com/is/hiring.

posted by emmy on Thursday, Apr 24, 2008

How to conduct a homemade vision test on your website

Over the last six months, my eyes have gone through an interesting transformation. In October, I went under the laser and with Lasiks, changed my eyesight to 20/15. Prior to the surgery, I had several tests on my eyes, including a “super” dilation. I’m not sure of the medical term, but it meant my eyes stayed dilated for 48 hours, I had a big headache, and really cool farsightedness (hyperopia). I could completely relate to my parents and their trombone reading style. Anything closer than my out stretched hand was completely out of focus.

Before surgery, I had 20/60 vision. Not bad, but I couldn’t read an alarm clock in the dark without squinting. I’ve been near-sighted most of my life and for most of my computer work, I could work without glasses. I also preferred smaller fonts and tiny details.

During my 48 hours of super dilation, being a bit of a computer addict, I kept working. I noticed an interesting effect with my eye sight and the computer screen. The text on most sites was hard to read, so I increased the browser text size. On most sites, this was enough to make it legible. There were a few sites that were almost impossible to read, no matter how large I made the fonts. These were pages that had a dark background and light text. The words danced on the pages and had a halo around them. I confirmed this situation with my eye doctor who has “real” farsightedness. I had never realized how difficult it was to read white text on a black or dark background. It was enough to make me angry because of dizziness I felt after looking at the text.

That experience was six months ago, and today, I went in for a follow up appointment. I received the lucky experience of receiving the dreaded eye drops and the uncontrolled dilation of my eyes. I decided to use the situation to my advantage and perform a vision test on websites.

To confirm my initial thoughts and to add a few:

If you’d like to perform this test on your own, and you’ve never suffered from hyperopia or age-distinguishing presbyopia, I suggest you ask your doctor on your next eye exam for dilation drops and do some web surfing shortly after. This useful test has real world application in web design, as most of the population over 40 has some form of farsightedness, or other eye disorders such as macular degeneration. In making our sites truly accessible, visual markup is as important to consider as our html markup.

~ For my next article, I plan on writing about the effects of Lasik surgery: being intolerable of LCD TVs less than 1080p, and any type of monitor except for a glossy Mac Cinema Display.

posted by emmy on Monday, Apr 21, 2008

Adobe TV. Not a competitor with YouTube, Flickr, or Apple TV, and not completely accessible, but a nicely designed resource for Adobe tutorials.

posted by emmy on Wednesday, Apr 09, 2008

This WI-FI SD camera memory card looks cool. It connects to your computer or website, such as Flickr, Picasa, Facebook or Snapfish, through wi-fi, and automatically uploads your photos when within range of your authorized networks.

posted by emmy on Saturday, Apr 05, 2008

Offices and The Creativity Zone. Why it’s important to have office space that allows you to concentrate and get in “The Zone.”

posted by emmy on Sunday, Mar 30, 2008

Mike Rhode’s sketchnotes from SXSW, best viewed with PicLens.

posted by emmy on Saturday, Mar 22, 2008

Patterns of Interaction design: a collection of popular patterns from language selectors, searching, and date pickers. Compiled by Martijn van Welie, Design Director of Satama Netherlands.

posted by emmy on Sunday, Feb 17, 2008

Snowdrifts from a recent snow storm in Riverton, Utah. Perfect homecoming for my brother, returning from two years in Hawaii.

posted by emmy on Sunday, Feb 17, 2008

A nice use of the blueprint grids from Sean Sperte.

posted by emmy on Saturday, Feb 09, 2008

posted by emmy on Saturday, Feb 09, 2008

Have user skills improved on the web? “Even though users are remarkably good at repeated tasks on their favorite sites, they’re stumped by the smallest usability problems when they visit new sites for the first time.” Jakob Nielsen’s recent study suggest that usability guidelines remain constant.

posted by emmy on Thursday, Feb 07, 2008

Adobe.com launches redesign, and fails

Visit adobe.com today and receive a shocking surprise of a look that resembles more of a junk pile of web trends, then the website of an industry leader in digital design products. The purpose behind the redesign was to put more emphasis on the content rather than the UI, and work better on wider screens. Unfortunately, I believe the UI is so disgracefully designed it hinders the readability and usefulness of the content and becomes the primary focus.

Flash video headers engulf most of my 15” screen and I can’t see the content. On a 7 Mbps connection, the site slows down so much that the drop down menus are useless, until the center flash video has completely loaded and played. When I hover over the dropdown menus, I interact — unintentionally — with the flash content beneath the dropdown menu. I have such a hard time getting past the navigation, I can barely get to the content and I find myself closing the window rather than surfing any farther.

Coming back later, with the navigation cached, I get to the community pages for designers. My eyes are continually drawn to the empty gray space on the right and top. I have a hard time focusing on the article summaries squished to the left in a 783 pixel wide box, further confined into three columns, each 150 pixels wide. How in the world does this work better for wider screens? I can’t take the claustrophobia any longer and close the window again.

For a site that should be showcasing the best use of its own products, it fails miserably. Content can only emerge when the user interface is so well designed, it works silently without intruding rough edges or poorly aligned spaces into the experience.

posted by emmy on Friday, Dec 07, 2007

A delicious treat for the eyes and Mac shopper. The feast and discounts on Mac apps ends December 8th.

posted by emmy on Monday, Dec 03, 2007