August 27, 2009

The UI/UX Sandwich

Filed under: Design, User Interface, programming — Lindsay @ 10:04 am

Two or three years ago, it seemed that while universities were churning out students who had taken classes in Needs and Usability Assessment, User Interface Design and Development, and Social and Organizational Issues of Information, industry was still denying the benefits of such expertise on their products.  These roles were confined to corporate research labs, and only the bleeding edge companies (at the time) like Google and Yahoo.  In the past few years, more companies seem open to the idea of having designers on their development teams, but still not being able to quantify their benefit in terms of Return on Investment (ROI) figures, they are trying to sandwich User Interface Design and User Experience Research between other roles.

UI/UX != Graphic Design

Graphic Designers are artists and extremely creative.  They have amazing visual talent, and most likely honed their art through other mediums, then realized years later that the foray into technology meant more money.  User Interface and User Experience designers should have a technical background complimented with expertise or familiarity in psychology, sociology and cognitive science.  It’s not necessary they have a degree in computer science and a degree in psychology, but one or the other, with familiarity in each is necessary.  In simplest terms, Graphic Designers make things look cool, UI/UX designers make things functional and usable for the user.

Looks Cool, But Doesnt Work

Looks Cool, But Doesn't Work

I use this analogy to highlight my point:  My mom is an interior decorator.  She makes homes look beautiful for our family and all of her customers.  She has a good eye for patterns, fabrics, and colors, and is familiar with feng shui for organization.  While my mom understands the purpose of the room, and can arrange it to succeed the goals of the room (for cooking, for leisure, for games), she’s not designing the fabric patterns, the tchotchkes, and the furniture herself.  There are experts for each of these things.  My mom is a UI/UX designer for homes, the pattern experts are graphic designers for the things she puts in the homes.

To employers and product managers out there – hire a UI/UX person to work with the users to understand the problem and design the product to solve that problem.  This person (if they are good at what they do) will build you excellent activity diagrams, interactions diagrams, wireframes, and, if they are awesome, the beginnings of data and functional specifications.  They will understand the difference between radio buttons, checkboxes, and drop-downs, and be able to give you a 360 degree view of the application in its design phase.  In the wireframes, they reserve space for content, forms, and graphics.  They won’t design the graphics themselves because there are trained professionals (i.e. Graphic Designers) for this, and you can hire them on freelance and save yourselves (and your company) lots of money.  Besides, you will want to free-up your UI/UX person to move to the next project, or to work with the software developers through implementation.

UI/UX != UI Engineer

When Software Developers are Left to Design Error Messages

When Software Developers are Left to Design Error Messages

In absence of a real UI/UX designer, the role of UI Engineer is perpetually confusing for me.  I have to say first that UI Engineers are no different than other software engineers.  Just because they know how to write JavaScript, PHP, HTML and CSS does not mean that they are better suited than other software engineers for working with the users to design a better solution.  That being said, for years experts in the industry have been saying that software developers should not be handling user feedback.  When software developers are left to their own devices without user interface designers to give them guidance, we get open source projects.  Firefox aside (because they had UI/UX people come help), how many open source consumer applications are used by more than a few percentage points of the population?  I myself forayed into Ubuntu and Mepis, backed out 4 months later, and ended up buying a Mac.  OpenOffice maybe has 11 mm active users in the US, which would be roughly 4% of the population.The operating system and applications were not intuitive or easy to use, and when they crashed, they crashed so hard that I had to use the terminal to get anywhere (but usually ended up no where).

Rarely is an excellent software developer (front or back end) particularly good at connecting with, interpreting, and responding to other people, let alone are able to translate what those people’s goals are to usable interfaces.  These are all traits demanded by a good UI/UX designer. Furthermore, those of us that take a UI Engineer position expect to have more input into the UI design while still contributing some code to the application.  Often what happens is that the UI Engineer is stuck with a crappy design from a Project or Product Manager not trained in UI/UX or Usability, and is expected to do much more development than they ever planned.  The company and application/product suffers from not first understanding what skills they needed, and, second, finding the right talent for the job.

(more…)

August 24, 2009

The Art of Abigail Adams

Filed under: side project, storytime — Tags: , , — Lindsay @ 11:45 am

“I’ve always felt that a person’s intelligence is directly reflected by the number of conflicting points of view he can entertain simultaneously on the same topic.” -Abigail Adams

Our second First Lady was known for her prolific writing, and many beautiful quotes of hers have been pulled from her letters she use to write to her husband, President John Adams.  Letter writing has become a lost art among my generation.  We grew up writing letters to penpals and soldiers from the classroom, and letters to friends and family from summer camp.  Even up until 2004, my friend Marla and I were trading letters while I was doing research at Texas A&M University and she was a counselor at a summer camp in New England.  My grandmother use to write me beautiful letters, many of which I still have to this day.  I remember the different note cards she would use, some with her name printed on them, and others with porcelain dolls.  She loves letters so much that she made a copy of one I wrote her when I was 8 years old, and sent it to me; the letter, adorned with a caricature of Garfield eating a slice of pizza, is on my refrigerator. Her letters continued until she mastered e-mail five years ago.

When I reminded my grandmother that she use to write me, and how much I loved her letters, one day last year, to which she responded (by email) “I will retreat to my Abigail Adams mode.” A week later I received two letters from her.  A few weeks later, I received an email that said “When I wrote on the computer I received notes from you and I’m missing some responses.”  She pointed out the weakness of letter writing, to which email had the advantage.  The latter was convenient and free, making a response easy and quick.

Over the years, I have been keeping a box of letters people have sent me, from Bar/Bat Mitzvah invitations 13 years ago, to wedding invitations and ridiculous post cards from Laura Lee’s travels this year.  In that box I also keep note cards that I purchased 5 years ago, thinking I would be finished with them shortly thereafter.  But then they invented the internet, email became ubiquitous, and we all began hyper-communicating with each other.  Facebook came along and let us connect with all of our strong and loose connections culled over the years, enabling us to keep updated in one another’s lives.  But, with all these tools, I find that the time between when I truly engage my friends, and when I speak to them again, grows larger and larger as the years pass.  With all of these tools at our fingertips, we’ve somehow depersonalized our communication with each other to a few short messages, or a comment on eachother’s pictures.

Last night I opened my box of letters to figure out what I could do with these blank note cards.  As I stared at them, I realized that with a fresh pack of stamps, and some free address labels, I could actually use them to write to some of my friends I hadn’t spoken to in a while.  After all, snail mail has become such a novelty that it seems special, and an hour of my time to make several of my friends feel this way seemed well spent.

If you’ve forgotten how to write letters, I’ve outlined the steps below:

Step 1: Grab Some Notecards

Step 1: Grab Some Notecards

Step 2: Find Those Free Address Labels the NPC Sent You

Step 2: Find Those Free Address Labels the NPC Sent You

Step 3: Find or Buy Some Stamps

Step 3: Find or Buy Some Stamps

Step 4-6: Write Letters, Gather Friends Adresses, Address Your Letters

Step 4-6: Write Letters, Gather Friends' Addresses, Address Your Letters

Step 7: Find the Big Blue Box and Mail

Step 7: Find the Big Blue Box and Mail

The best part of this process has been the responses I’ve received after emailing my friends for their snail mail addresses. Being in my mid-twenties, the first question is “Tabas! Are you getting married?”

August 21, 2009

Training is Not an Excuse for Poor Design

Filed under: Design, tools — Lindsay @ 7:48 am

In my old office I had a sign behind my desk that said “Training is Not an Excuse for Poor Design”.  It was a bold statement to make to my new company that had never had any trained professional mediating between the software developers and the clients.  I had decided one day that it was necessary when I heard on a conference call one of my teammates say “Yes, we can do that.  We’ll plan our training to take this into consideration.”  He said this to one of our clients, and my draw dropped.  Let me explain.

When a client, customer, or user requests a feature, they tell you what they want, thinking this will help them with what they need.  We, as designers, need to know what they need and why they need it in order to provide the best solution to satisfy them.  In Human Computer Interaction, where the user is king, we must always balance “The customer is always right” with “The user never knows what they want”.  More often than not, software developers and salesmen back themselves into a corner because they don’t know how to deal with feedback and this delicate balance.  The developers either give the user exactly what they ask for, or worse, give the user what the developers themselves think makes sense.

For those of us that don’t work on consumer web applications that can interact with their users through tools like UserVoice, usability studies and surveys, we often have to listen to the customer instead of the user.  The customer is the person paying for the development, such as a VP of some division in an organization, and the user are those people working below the VP.  Often we can perform more formal requirements collection with the VP and stakeholders, but with very little access to the actual user.  Without good feedback, we’re left to our expertise and experience to build good usability into our products.

On one project, I was repeatedly denied access to the users, and in an interview with one manager, I asked how we were going to address user adoption if we didn’t know anything about nor did we design for the users’ preferences.  He said to me unequivocally that “They’ll use the application because it is their job, and if they want to keep their job, they will do what I say.”  This was clearly the wrong attitude.  Last I heard (I had been cut from the project because they didn’t want to put more money into user adoption) the roll-out and subsequent use fell flat on its behind.  And we still have the gall to ask “Why Are Enterprise Applications Underused?“

More recently, in conversation with a customer, he suggested a solution based on unfounded assumptions about the user.  When I pointed out that it was unclear how much time would lag between when a user was finished with one step in the business process and would start the next step he said “Oh we can train them to do both sequentially.”  Since we have an ongoing relationship, I paraphrased a line from a recent CIO interview of Harold Hambrose from Electronic Ink:   “Good design means not having to train, and not having to invest in user adoption, so lets figure out the best solution before moving forward.”  I think Cindy Alvarez (Product Manager at Loomia) simplifies this by saying “If something is difficult to do, people will not do it” in her recent article arguing for better usability in business processes.

The solution is very simple.  When the user tells you what they want, ask them first what they are trying to accomplish.  With detailed goals, the designers and architects can propose a solution that will help the user achieve those goals without inconveniencing them.  Then we can extend the statement that “The user never knows what they want until they see something” which is a primary argument for agile development, rapid prototyping, and iterative user-interface design.

Training is not an excuse for poor design.  And poor design is a result of misinterpreting user feedback.

August 20, 2009

Slow Shift Towards VC Diversity

Filed under: startups — Tags: , , , — Lindsay @ 5:08 pm

The Wall Street Journal published an article in their VentureWire series titled “New Study Signals a Slow Shift Toward VC Diversity” where they list some statistics from a demographics survey of venture capital professionals.  I found the article interesting enough to summarize it for you because no matter how diverse Silicon Valley is, most of us  know that venture capital firms are still dominated by a fairly elite men’s club. No females or minorities should be surprised by the following statistics.

On race & gender:

  • 88% of survey respondents are white
  • 75% are male, so 25% are female
  • 66% are white male
On education:

  • 64% hold some type of advanced degree
  • 52% have an MBA
  • 70% of males have an advanced degree
  • 45% of females have an advanced degree
The only statistic that alarms me is the finding that women in venture capital are less likely to hold an advanced degree than men in venture capital. Can anyone explain this?

What I did find surprising were the following statistics regarding start-up experience:

  • 20% of VCs worked at another venture firm prior to their current firm
  • 16% worked at a large private or public company
  • 12% worked at a start-up company
  • 10% worked as a C-level entrepreneur
    • 17% of men with traditional investor titles previously worked as C-level entrepreneurs
    • 2% of those female counterparts (only 1 person) previously held that position

Many new start-ups looking for investment put their future and aspirations in the hands of people that have never been in their shoes.  Would I go to graduate school to be taught by someone who hasn’t finished college?  No.  It seems the only reason I would let someone that hasn’t been an entrepreneur or worked for a start-up decide if my idea has any merit or market value is because he (or she 25% of the time) holds the keys to the dollar bills that give me the opportunity to pursue my dreams.

August 17, 2009

Unfortunately, Jon, that’s what Health Care is Like

Filed under: Design, health care, tv, videos — Tags: , , , — Lindsay @ 8:47 am

In the past year, for my full-time job, I have been working with my coworkers to upgrade our electronic claims processing capabilities to the ANSI X12 837 data format, which is in EDI. Most of you know that I’m a big fan of XML over the legacy data formats, and in agreement, my team has bemoaned this project as a necessary evil. Unfortunately, the data format isn’t the worst part of working within the health care system. The worst parts of the health care system are the business processes and rules, which are never 100% true, meaning that a software system has to always be flexible enough to handle the exceptions. This is a problem when you are trying to enforce standards and best practices.  This also means that we will forever be stuck in a paper-pushing world until standards are designed AND enforceable by law.

For example, if a home designer designed a bathroom, and the home owner said “I work from home, and am the primary user of this toilet. I always use the lever to flush the toilet.” The designer finds a standard toilet and installs it in the bathroom. Then the home owner’s wife sees the toilet and says to the designer, “Oh no! It can’t work this way! I use the lever to turn on my sink.” To anyone, this sounds ridiculous. Who uses a toilet lever to turn on a sink? This is akin to how outlandish the insurance payers’ exceptions are that we have to handle in electronic claims processing. We all say “They’ll do anything to deny a claim”, and this couldn’t be more true. They will impose as many exceptions as possible, including not implementing and upholding nationally recognized data standards and identification codes (hopefully more on this later).

Now imagine a complex system where, instead of just the home owner and wife, we have 2000+ insurance payers, 300+ million patients (approximate population of our country), and who knows how many doctors (providers) we have to design for. Try to build a system that accommodates all of these stakeholders, and caters to the insurance payers whimsical ideas of using the toilet lever to turn on the sink.

So when Jon Stewart from the Daily Show scoffed at the Republican side of the debate, saying that their images of insurance business processes and diagrams are “scary looking disingenuous health care reform pop art” I felt compelled to respond. I’m sorry to tell you Jon, that’s what health care is like.

The Daily Show With Jon Stewart Mon – Thurs 11p / 10c
White House M.D.
www.thedailyshow.com
Daily Show
Full Episodes		 Political Humor Joke of the Day

Disclaimer: I’m all for the ethos of universal health care reform, and I believe our country can get there. We just need to give our politicians the time to do their research to come up with a plan that really works.

August 11, 2009

Sewing Pillows to Save Lives

Filed under: life, volunteer — Lindsay @ 10:17 am

“Pillows are like good friends, you can never have too many”
-Sarah Van Dyke

Since I struggle with my own volunteer efforts, I wanted to get the word out about my friend Sarah’s quest to raise $2500 for the The Leukemia and Lymphoma Society by selling pillows for $25/each. My roommate and I were able to snag 3 for our couch, and absolutely love the new addition to our apartment.  The pillows are well made, and the fabric patterns are to die for.  If you don’t want them for yourself, they make great presents and come with some awesome karma.

To purchase a pillow from Sarah, you just have to pick your pillow pattern, pay online, and then pick them up.  She’s located in Russian Hill (San Francisco), but is willing to mail you the pillow if you would like.

You can also visit her Team in Training page to donate money without redeeming a pillow.

Come on now, go help a girl out, and in turn, help save many lives!

August 2, 2009

Designing a Web Interface for 10-Key Data Entry Users

Filed under: Interaction, User Interface — Lindsay @ 12:57 pm

After several years of writing on this blog, I realized last week that I rarely write about the exact field I work in full-time, every day: User Interface and Interaction Design. This will be my first post about a design challenge I had this spring and summer: Designing a Web Interface for 10-Key Users.

Background


For a lot of designers, the real challenges are not in designing a cool teaser page or a food fetish website. The bread-and-butter for us comes in redesigning outdated user interfaces (UI) for corporate users. For the past two years in my career, I’ve worked on customizing web portals, document management systems, patient and practice management systems, and now, insurance claims processing consoles.

My current project entails customizing our out of the box patient and practice management system for 1000+ daily users, and then designing and building an entirely new insurance claims processing console for roughly 25 users at the client’s headquarters. For one specific interface, the requirements dictate that:

  • The user must enter 12 pieces of data per line (up to 6 lines), but be able to view over 25 pieces of data for each line.
  • The user must be able to use the 10-Key pad to enter these values

We know that the user processes about 100 documents per day, and, like any re-engineering project, we shouldn’t increase this time; optimally we should reduce this time.

Finally, their current interface is a desktop application, where they enter all this data into a grid with massive horizontal scrolling, no fixed left header, and a color palette of grey, black and white.

Methodology

Step 1: Do Some Research

The first topics to research are data-entry forms and 10-Key user behaviors. 10-Key refers to the user’s ability to rapidly enter numerical data using the keypad on the right of the keyboard.  When you do a search online, 10-Key brings up a lot of 10-Key tests, but not a lot of information on how these users behave.  If a simple search doesn’t bring up what you need, head to Google Scholar and try to locate academic research.  I found:

“From Information Visualization to Direct Manipulation using ILOG Discovery” by Thomas Baudel

In this paper, the author’s Visual Framework (directly pulled from the paper) is the biggest take away:

  1. Partitioning a data set in groups and subgroups
  2. Sorting the groups and the individual objects
  3. Assigning graphic primitives to groups, subgroups or individual objects
  4. Decorating the graphic primitives (assigning color and other graphical attributes)

I had two ways of creating groups and subgroups:

  • First Way:  Data the User Entered, Static Data the System Presents, Data the System Calculates off of the Static Data
  • Second Way: Data by Groups, where each group has a piece of data entered by the user compared to static data, which the system uses to calculate a third data.
Step 2: Design Iteration 1

Based on this information, I did a preliminary design based on the “First Way” grouping strategy.  This let the user view static data and then select an option to enter the additional data by line.  The interaction became “Click, View Modal Pop Up, Enter Data, Close Modal Pop Up, See Calculated Data”.  While the Modal Pop-up was positioned so that the user could see the static data while entering the new data, the piece of feedback I got from the client was “That’s too many steps when you’re processing 1-6 lines per document, over 100 documents per day.”

Step 3: Iterate

The worst characteristic of a designer is stubbornness; you have to be able to process feedback and iterate.  The goal now was to reduce the amount of steps, while still being able to view all of this data in one screen for each line-item. If I didn’t already state this, when you are confined to 950px in width, 20+ pieces of data per line-item forces horizontal scrolling. To me, horizontal scrolling is the bane of my existence as a designer. I had to do it once before, and it made me feel really uncomfortable.  I was open to redesigning the screen, but at this point, I was still hostile to horizontal scrolling.  I think it’s a huge no-no, and apparently these people agree with me, and these people too, who say “But requiring a large percentage of your site visitors to scroll in two directions to see your content is rude.”

I decided to continue my research into 10-Key user behavior and found a few more helpful tips (from Databasics):

  • Don’t force users to scroll (Thank you!)
  • Go easy on the fonts (Duh?) and colors.
  • Abandon defaults
  • Check Your Tab Order
  • Be Consistent

The last two are the most important for 10-Key users because they use the keypad to tab through the form, and often, they do not look up at the screen until they are finished - so consistency is very important; they memorize the field order very quickly.

I then found a cached-version of “Web UI Design for Data Entry-Oriented Users“, where the writer created a very relate-able persona (..of sorts) for this type of user.  These users gained “operational efficiencies” in the mainframe, DOS era which the mouse-navigable screens of today cannot afford.  The author points out the following:

  • Maximizing the amount of data that can be entered between trips to the server.
  • Lean, fast web-side code that serves up light, text-based pages.
  • Use of client-side code (e.g. JavaScript) to push as much business logic out to the client and limit round trips to the server as much as possible.
  • Get the tab order right for keyboard-based navigation from field to field.
  • Take advantage of keyboard shortcut (“accelerator key”) functionality made available by browsers.
  • Make efficient use of screen real estate.

My Final Design

I iterated about 4 times on this design before we settled on a design that worked for the client and the user, and one that I could feel proud of (and willing to share here).  My original groupings didn’t work until I realized that the data could be partitioned further into the following:

  • Group 1:  Static Data that never changed, and was never compared to data that is entered.
  • Group 2: Static Data that never changed, and was compared to data that is entered.
  • Group 3: Data that is entered by line-item
  • Group 4: Data that is calculated as the difference between Group 2 & Group 3.
  • Group 5: Data that is entered, and applies to all line-items
My final Design

My final Design

This allowed me to partition the page into widgets that were all viewable at the same time, and reduce the number of data that had to be showed on the same line, inline.  While I could make this gain, I still had to cave in to the horizontal scroll.  If you’re going to use horizontal scrolling, make sure you use a fixed header and fixed left column, so that the user always knows where they are in the grid (if they do look up from the document and 10-key pad).  You may not like it as a designer, and you’re developers don’t like it in implementation, but your user will be satisfied.

Looking at the design, the user enters data into the form, and when they select “Finish”, basic information about that form is posted into the upper right widget.  The user can later navigate back to what they entered by selecting the link(s) posted there.  The upper left widget is purely informational, and contains links to related pages in the system.

Final Take-Aways

I found another article, which didn’t add much in substance, but one commenter did say something along the lines of “The reason you cannot find screen shots and examples of good web-based data entry design is because there’s not much out there for anyone to brag about”.  This is the primary reason why I am posting my stripped-down wireframe here.

There are so many advantages to building a web-based application for a new client when it comes to design. You can use more colors and provide better visual cues; if you’re innovative, you can use some jQuery to provide audio cues on form validation too. But, there are serious draw backs in web-based interfaces for data-entry, including designing for multiple browsers, sticking to a particular screen resolution and width (max: 950px now is what I believe the average is), and affording rapid data-entry.

I hope that you have found something here to help you on your journey to conquering this particularly difficult design challenge.

References:

Any feedback is always welcome!

My First Time Driving Stick

Filed under: learnings, life, storytime — Tags: , , — Lindsay @ 11:02 am


View Larger Map

It’s storytime again, and this time, like so many others before, I was prodded to share this online.   It was Friday, June 19th, and I had just flown to Washington DC from San Francisco for my friend Jess’s wedding the next day.  Jess said she could pick me up at the airport, and I, in turn, said that I would pick up our friend Kenzie from the airport 4 hours later.  Kenzie’s family lives outside the city, and her parents left the house unlocked and her car keys on the table.  I spent the morning at their house, working remotely, and a little before Kenzie’s flight was to arrive, I grabbed her keys and got in the car.  Being that I was so excited to drive her Mini, I jumped in the car and turned it on.  Or tried to.

When I realized that her car was manual, I panicked…just a little bit.  “Crap, crap, crap, how am I suppose to pick her up?”  The brilliant person I am decided that everything is online, so instructions on how to drive a stick must be online (aside: this is where everyone says – tabas! you thought you could drive stick by reading about it online?).  I ran back in the house and searched “How to Drive a Manual”.  I read a few lines on About.com and felt sufficiently able to go on my way.  Or at least start the car, try to reverse, and stall.

I go back in the house, read some more and then call my friend Katie who is at work.  She tells me enough to get the car to the front of the development where I can get cell phone service and call her back.  Katie gives me a couple pointers, I make it out of the development and on my way.  Or so I thought.

Driving the two lane roads and coasting through my first right turn worked out alright until I had to get on Leesburg Pike – at least 4 if not 5 lanes on each side. The first light I get to, I stall. It turns green, I have to put the blinkers on, people behind me are visibly annoyed. I break a sweat. Second light; the same thing.

Driving Stick

I turn into an abandoned parking lot and call Katie again. She tells me she has to work and can’t talk. I call my Dad. He picks up. I put him on speaker phone and he gives me our first father/daughter lesson as I drive around an abandoned bank parking lot. Park, reverse, forward, drive around the decrepit teller window. Repeat. He tells me he regrets not teaching me how to drive stick (there’s a first for everything!), and tells me some funny stories about my older sister’s steep learning curve. Being the supportive father that he is, he tells me if I’ve gotten 3.5 miles so far, I might as well go all the way to the airport. I think differently!

Finally Kenzie calls me to tell me she landed and I tell her the story – “Kenzie! I don’t know how to drive stick, my dad’s teaching me right now!” She thinks I said that my dad taught me once before, not just this moment and tells me to come pick her up. I repeat myself and when it finally clicks she says “Tabas! Why are you driving my car?? You knew it was a mini.”

“I really wanted to pick you up, I’m excited to see you ” I exclaimed! “But I didn’t know all mini’s were stick”. She proceeds to make me feel clueless; apparently all mini’s are manual, or were when she bought hers. We try to figure out if I should come get her, or if she should take a cab to where I am, or if I should attempt driving home. We pick option #3, and I get back on Leesburg Pike. Surprisingly, I made it all the way home without stalling once; I must have learned something.

Of course this became the story of the weekend at the wedding. That, and we were running so late to rehearsal dinner on Friday that we got dressed in a gas station bathroom.