Thursday, July 31, 2014

Should designers stop using color coding in their designs?

If your like me, you have dabbled in solving your own home electrical and plumbing problems. When I was younger, it wasn't uncommon to see me trying to take on complex wiring issues having to do with car stereo's. For me, this isn't a big deal at all. Likewise, I've been known to excel at putting together those old 1990's tents that had the color code poles. Not a problem at all... for me that is. Maybe for you too.

But, there is a large group of people who really struggle with colors. Well, when I say large, I mean about 8% of males, and .05% of females in 2012 according to one source.


So should color coding be outlawed? Should we abolish this practice of using color to code things in interfaces, on products, or during service experiences?

No!

The reason for this is that although a user experience practitioners job is to seek out the most usable or accessible interface, we are also trying to meet the expectations of our users (or at least the expectations of the bulk of the users). In this case, there are simply many, MANY more people who are not color blind. I'm sorry if this offends you.

We have many different senses that designers can target as inputs or outputs for their designs...
  • Hearing
  • Touch
  • Smell
  • Sight
In each of the above mentioned senses, there are likely going to be people who struggle. Color  just happens to be part of the most frequently used input/output that designers target.

Maybe it's time to combine two senses to help eliminate accessibility issues. Maybe the wires would have color coding, but also maybe we as designers can be understanding of those who struggle with color and incorporate some other means (i.e. label, or wire material texture, etc...).

I'm not sure that flavored wires, or smelly wires are a good idea, but there are creative ways that we can better support those 8.05% of users who don't appreciate our color coding efforts.

I'm interested in hearing your ideas. Let's here them, what do you have?


References:

Wednesday, July 30, 2014

Don't design in a box -- The give and take two step

Here's a concept that has been widely documented, but I feel like it's worth my two cents as well. The idea of designing in a box goes like this...

Let's say you have been asked to come up with a new design for a website's home page. Upon receiving the assignment, you go to your desk, you sketch some ideas, you iterate 3-4 thousand times on those ideas, then finally, you land on "THE" idea. You then take that design into high fidelity. Following that, you set up meetings with the executives and all the business stakeholders to reveal your masterpiece. You get to the meeting, look around and say to your self, "These people don't even have a clue how awesome this is going to be for them. They may even wet themselves a little like I did when I finished".


"Most digital products today emerge from the development process like a creature emerging from a bubbling tank. Developers, instead of planning and executing with a mind towards satisfying the needs of the people who purchase and use their products, end up creating technologically focused solutions that are difficult to use and control. Like mad scientists, they fail because they have not imbued their creations with humanity." 
Alan Cooper, Goal-Directed Design

As you begin walking through the presentation of your golden baby, you start looking around and notice that there seems to be something wrong with everyone's coffee that is making their faces seem upset. You plow ahead... It's getting worse! Before you can finish, you are interrupted by the guy most likely to turn you in for photocopying your butt. He says "This is NOT what we wanted. This isn't even close to what we wanted. You used red font on that line, but we would have used green. You used a picture of a dog there, but we were thinking of a cat instead. I just don't think this is working out between us. Maybe we don't need the site redesigned anymore. Maybe we can just be friends".

As people begin packing up, you are thinking to your self how embarrassing that was and how maybe a job at the warehouse is a better idea after-all. What went wrong?

You designed the website in a box.

In other words, you designed a user interface that would be consumed by someone else without learning what it is that they want, that they need, or what their can's and can'ts are. You didn't take the time to gain allies prior to going in. You took liberty, and you assumed.

Why a bat, Batman?!
In the movie Batman Begins that was released in 2005, we learn that batman chose the bat because he was terrified of bats. 



He was terrified of bats due to his traumatic childhood experience of falling into an old abandoned cave. Imagine what batman would be today if after choosing to go with the bat, he did some research to identify what other creatures are scary. More specifically, what creatures are scary to his target audience: criminals, the general public as a whole, and governmental officials... Well, maybe he would have been dressed more like Walter White from the HBO Series, Breaking Bad, or a Teletubbie! Who knows. The point is that when we are making a decision, if we just go with our own gut instinct, we may or may not be accomplishing our intended purpose.

The Conversation
When working on any design process, think of it as a conversation. Have you been in one of those conversations where the other person talks, and talks, and talks, and talks, but never quite gives you enough time to respond? How did that make you feel? Sure THEY probably feel good because they got to feel heard, but what about you? Did you get to feel heard also? It is likely that you did not get to feel heard if you were in that conversation because you didn't have a chance to voice your opinion.

Now imagine it the other way around... That is exactly what has happened with your design in the first example. They didn't get a chance to speak into your design. They are not enjoying the conversation.

The Dance
Now imagine that you are dancing with someone. If you step forward, but then step forward again. Then again, and again... You will soon be against a wall, or out the door or window. that's not dancing. That's walking. To make sure that your dance goes well, you take a little (you take a step), but then you must also give a little (let them take a step). In doing this, you are allowing them an opportunity to enjoy the dance.

Conclusion
In conclusion, remember that design work is a conversation between those that the design serves and you (the defender of the user experience). Let them win once in a while. Doing so will earn you an ally. It will also relay to them that you respect them and in-turn will earn you respect.

Wednesday, July 23, 2014

Getting Started with Parallax Scrolling

Why should I learn about Parallax Scrolling?

  • Parallax Design is becoming a standard element in Responsive Web Design
  • Mobile Devices are starting to include Parallax effects as part of their base operating systems (i.e. Amazon Fire and Apple iPhone).
  • Provides you with one more layer of visual stimulation to manipulate and steer the user's attention.
  • Need I say more?

What is Parallax Scrolling?

Parallax Scrolling is the term used to identify a design technique where a page's code is configured so that images set at different layers move in different ways based on a user's scroll input. 

It is common however to have the movement of the background images tied to other user inputs such as the movement of a mouse. As the mouse moves across the screen, the user may see the background move ever-so-slightly towards the opposite direction to give the illusion that the user has covered more ground than they actually have.

Website Examples:

The word "Parallax" is a word used to refer to a visual effect  whereby the direction or position of an object seems to change depending on the angle at which it is view in relation to the background scenery.

The Parallax effect has been around since the first set of eyes was created. It is our inherent tendency to try and see in 3D (width, height, and depth) in order to identify our position or orientation in space. For example, when a baseball player in the outfield wants to throw a baseball to a player at second base, they look and see the players size and relative position to other objects, and relative to the background (stadium seating). These inputs then get immediately processed by the player's brain and in turn, they can better estimate how much strength and force it will take to get the ball to the person.


Where did Parallax Scrolling come from?

Many people believe that Parallax Scrolling found it's origins and popularity in 2D video games such as the 1982 arcade game Moon Patrol. Is that really where the idea came from though? I don't believe so.

The concept revolves around the idea of creating layered effects for the sake of creating a visual atmosphere in which the eyes can perceive depth. This technique has been around many-MANY more years than video games have been around. 

Theater has been using this layering effect for a long time. The art and science of theater design has been developing over a 2400+ year span. This side view sketch of a baroque theater (found in George C. Izenour's book Theater Design), clearly shows the layering concept (see my red notation lines) that we find our Parallax Scrolling built upon.


theater auditorium from the Baroque era

In sticking with this historical example of harnessing parallax to tell a story, let's take it a step further. It has been identified that there have been trends in stage design over the years. Here's an image that shows some of those common stage layouts.

various theater stage layouts

A quick glance, and I believe that we can identify that the stage layout that best matches our browser window (a.k.a. view port) might be the one labeled as "Fan-shaped auditorium proscenium, apron, caliper stage".

And here is my modified version...


sketch of the top view of a person sized theater stage with a person's head looking into it.

The layering that takes place in Parallax Scrolling is more conceptual than visual. Understand that the furthest layer from the person head is the background layer (Layer 0). In standard websites, you have a background, then as you start adding elements, they would then start stacking towards the user. Layer 1 might be a table or a div. Layer 2 might be a span that sits in the table or div. Layer 3 might be the copy or an image. When viewed from straight on, it all seems flat to the un-trained eye. Developers however are likely to already have a firm grasp of this concept. 

In real life, if you move across a room, the chair that is furthest away from you and the chair that is closer to you may look one way, but then if you move to the other side of the room, now you are seeing them both from a different perspective and in a different way. With Parallax Scrolling, the layers are set up so that depending on the user's action (i.e. scroll movement, mouse movement, head movement, etc...), they react through movement or adjustment of their own to create a different perspective.

Leave a comment if this is still unclear, if you totally disagree, or if you like Pho. I'm all about "getting it" better, so let's talk.

When should I and when shouldn't I use Parallax Scrolling?

As with any design concept, there appear to be good times to make use of the concept and bad times. Below is a rough (growing) list of time 'when' you might find Parallax Scrolling useful and times 'when not' to employ the technique.

When it Parallax Scrolling might be helpful
  • When trying to draw the users attention to an item, or area
  • When a subtle 3D motion will not distract the user from the primary activity on the interface
  • When you need to create an affordance for scrolling.
When not to use Parallax Scrolling
  • When a subtle 3D motion will distract the user from the primary activity on the interface
  • When the implementation would be too resource intensive resulting slow loading or choppy behavior
  • When the plan is to cause the scrolling mechanism to scroll slower than the user is used to.

How do I design using Parallax Scrolling?

There may be other strategies for designing screens that employ Parallax Scrolling, one such method that I believe to work well is to burrow from a process used to design theater sets, and throw it in the blender with the UCD process...

Step 1: Understand the stage location (Research)
When you are researching to determine the layout of the design, consider the location at a high level. What country would the location take place in? What is the environment you are trying to create? Maybe your background or backdrop is going to be in a sci-fi movie. Maybe it's a shopping mall. Maybe its a warm fuzzy teddybear with a high intensity Gaussian blur applied. Maybe it's simply a desert of grey... or waves... or paper?! Once you have identified the high level theme or location, write it down in words. Think about it.

Step 2: Identify the stage "Props" (Research)
Now that you've figured out what the environment will be, it's time to start "flesh"ing it out. In other words, let's figure out what the essential elements will be that should appear on your stage. Part of the research phase is to document all the parts of the web site that must be in the end design. Things such as navigation bars, headers, or main calls to action should ALL be part of your high level understanding before you begin laying the new design out...

Write these elements down. Prioritize them; 1 is most important. Then start counting up from there. The higher the number the least important that prop will be. This step will help you identify it's Layer position further in this process.

Step 3: Sketches (Design)
Sketching for Parallax Scrolling is the tricky part (same with prototyping and mock-up). There are some tools out there that might help you with this. I personally think that the best tool will be to simply sketch these 3 perspectives out.

Front View
Sketching the front view can be relatively simple. Since this is a sketch, a standard page layout sketch with notations of expected movements should work nicely. My recommendation on this is to keep the front view simple. Use this low-fidelity sketch to get a good idea of where those "props" will sit.

Remember, because we are looking at the front view, it's difficult to identify where the parallax scrolling elements will be. Start with the basic props. Once you have them in place, then notate accordingly (i.e. "This object is going to move slightly up as I scroll down the page to appear to be trying to exit quicker than the rest of the page.")


Parallax sketching 2d top view

Oh, and one more thing. Remember to design for all the channels or platforms that your interface will be used through (maybe check out What's the best approach to responsive web design)


Top View
I recommend that you use a method such as this...


same sketch as above where a person is looking into a person sized stage. Parallax Scrolling

...with the one caveat that the sizes of the stage should be drastically different depending on the size of the platform you are designing for. Remember to notate. When it comes to these low-fidelity designs, your notations are really the best chance of communicating with the person who reviews your design when you are not around to give a walk-through. I think you get the idea though.

3D Model View
This last view is a bit tricky. It's going to take some patience and practice. Follow this sketching example to get started...


parallax scrolling 3d layout example

Once you get going there, it's going to be a matter of finding that right fit that works best for your design flow. There are some really great examples out there. You can also adopt 3D modeling software into your tool belt. Here's a more complicated example of this 3D view.


really good example of layering that was used to create a video game sort of look.


Step 4: Test it
Without actually developing this out fully, your rather limited to testing against sketches. There may be tools out there that can make prototyping or mock-ups easy, but I couldn't find any really good ones. A few folks suggested that you use layers in an image editing software such as Gimp or Photoshop, but ultimately you need to get creative here...

CAUTION!!! Don't skip this test because it's hard. If you do, you may be designing something that will be fully rejected by your user base. Test it. Stay objective about your findings. Iterate back to a research phase with your test findings, and refine your design from there. Do this until you reach about an 80-95% success rate in the web page's basic functionality.

Ready?...

5. Build it!
It's finally time to build. Hopefully Parallax Scrolling is by far a small part of your overall design. If you are sending a design to development that is mostly this technique... I'm cringing, and crying a little inside right now if that is the case.

Oh, and because this is relatively a new technique, be prepared to be heavily involved during the development phase of the project. Have examples ready. Give a detailed walkthrough of your design. Stay available to your dev team. Hope and pray for the best! Good luck!!!


Resources:

Monday, July 21, 2014

How much scrolling is too much scrolling

This article explores the idea of scrolling and how we should consider it when building out a screen.

Many of you have worked on those crazy projects where you are teamed up with the guy who only sees things in black and white. Buttons are buttons, links are links, and questions cannot be answered with anything that isn't explicitly the exact right answer. In fact, I can hear his voice now...

"Don't go below the fold!!!"

Thanks buddy, but there's more to it then that. Many UX practitioners have adopted the stance of seeing in shades of grey, shade of priority, or if you're like me, shades of plaid. Let's just put it this way, there are not always hard-fast answers to all our UX questions.

Enough liberal lip-flapping; let's get to the point e.

In this day in age, it seems that our users are accustomed to scrolling. Sure, it's good to have your main points "Above the fold", or in other words, above the point in the browser window that the users can immediately see without having to use the scroll bar to access content that appears lower on the screen.

I've seen some crazy stuff, but one particular example completely reminds me of the guy mentioned above. Take a look at this screenshot...



Now, as you can see, the navigation section at the top takes up so little room that there is ample room to fit one or two examples below and still probably still be above the fold. But, that guy mentioned above just had to put the "back to top" link on each one to stay consistent.

In evaluating the above example, the only word that comes to my mind is "Silly". In this design, it would have made more sense to simply leave off the navigation tiles at the top, and all the "Back to top" links as well.

Is there research that has given clue to an acceptable range at which a scroll is totally viable? I could understand if the RV descriptions were larger, than maybe it would warrant a top side navigation such as this, but how much larger?

One solution might be to make use of jQuery to have the "Back to Top" link stay on screen the moment the person begins to scroll. As the person scrolls down, the link stays in a relative place to the window size. Then, if you are hundreds of lines down and click the button, the jQuery script causes the screen to slowly and smoothly go back to the top.

But still, is this even necessary? Let's look at some hard facts...

Fact 1:
blog.chartbeat.com looked at 25 million user sessions across a wide variety of sites and content types to see where users were spending there time...



Fact 2:
In 2010, Jakob Nielsen wrote an article highlighting that their eye tracking research concluded that web surfers spend about 20% of their time below the fold. Here's an image that explains his findings a little bit better...



The evidence that we can see is that people DO go below the fold. Why? Is it a habit? Is it an instinct? Not sure about either of those things. I believe that is has to do more with a web pages affordance for scrolling. If your site has a layout that makes it seem as though there isn't anything below the fold, then users are likely to miss info that is below, but if you design your screen to communicate to the user that there is further information, then you have effectively created affordance for scrolling. 

Maybe this is the case for Parallax Scrolling!


Reference:

Saturday, July 19, 2014

Understanding graphs based on time, space and matter

This article is intended to provide the reader with a basic understanding of the foundation elements for all graphs. Ready? Here we go...

There is an enormously large universe out there. The physical universe seems to be in many cases defined quantitatively and qualitatively through time, space and matter (and an honorable mention to "energy" which doesn't really have a place in our conversation today). When we consider information, we generally view it through the lamplight of one, or through a combination of one or more of these three basic measures.


For example, let's say we wanted to track doughnut consumption of policemen. We'd likely have some sort of "measure" such as number of doughnuts. We might try and visualize how many doughnuts were eaten by policemen over a period of time. Another example might be if we wanted to look at the number (the amount of matter, or volume) of doughnuts by itself. Maybe we want to see how many doughnuts were eaten in various parts of the town, so as to best scientifically avoid the policemen.


Graphs and charts are intended to provide us with visual representations to give us a different perspective on what might otherwise be a bland, or boring set of numbers. In some cases, we can glean new information by looking at something from a different or higher holistic perspective, or in a different light. These data visualizations are integral to our day-to-day operations in business and have even proven to be beneficial in bettering our quality of life.

If we combine the idea that graphs and charts are just extensions of our own innate tendency to create, and the concept that our temporal world is generally viewed in terms of time, space and matter (volume), it seems that we can easily identify some of the basic graph/chart concepts which can then be used as building blocks for creating more customized visualizations.

First, a little math. Since there are three foundations that we will be using, it's important to identify how many base unique variations we can come up with. Another way we might look at this is to ask the question: Where do the 3 base foundations intersect? These basic intersection points will represent the building blocks.
Here are the comparisons that I was able to come up with.

Graph and Chart Basic Comparisons

  1. Compare over time
  2. Compare in space
  3. Compare by matter (or volume)
  4. Compare over time in space
  5. Compare over time by matter
  6. Compare in space by matter
  7. Compare over time, in space and by matter

And now for some examples. There may be better examples (which I'd like you all to tell me about), but for now, we'll go with mine...


1. Compare over time

This graph pattern is intended to help visualize a bit of data in relation to a period of time. One example usage would be if you wanted to see when during the day your office peaked on sales based on sale time-stamps.

time data visualization

2. Compare in space

You may find insight in displaying your data based on where the data took place. One example might be if you are a grocery store and are looking to determine specifically where the most traffic flow might be based on the amount of sales numbers.

Compare by matter (volume)

To better understand this one, I prefer to switch the term "matter" with the term "volume". This chart pattern may be to help display the volume of a particular statistic. For example, let's say you wanted to give your desk neighbor at work an idea of your awesomeness. You could have a tiny dot with their name next to it, then you could put a giant circle with your name next to it. The message will be clear as day. Be careful with that example though. Don't do it, or there may be hurt feelings.

Compare over time in space

This graphing pattern is intended to help identify where someone might be in a journey at a given time.

Compare over time by matter

This charting pattern is a foundation for explaining the size of something over a period of time. An example might be if you needed to explain how big your belly is at various points in your pregnancy.

Compare in space by matter

Graph patterns that compare space and matter can be handy for visualizing how large or small something something is and where it's at. For example, a military strategist may find it handy to be able to see where the biggest concentration of enemy forces may be on a map.

Compare over time, in space and by matter

Let's just say if you are crossing this bridge, you may be going into "To much info" land. What we are talking about is basically mixing all three of the foundation concepts into one supercharged visualization. Viewing data as it exists in space, over time by how large/small it is... well, that's going to be a rare need.

Conclusion

There may be some graph pattern that I've missed. I can't think of any others though. I believe that if you can fully understand these foundation patterns for charting and graphing, you will have the macro foundation design. With these foundations, you can really make some complex visualizations. Image if you had graphs nested in graphs. oohhh, that would be nice.


References:

Friday, July 18, 2014

Be Aware of the Halo Effect

Back in 2002 there was a movie that came out titled "Catch Me If You Can" which was a story about how events in Frank Abagnale's life lead him to eventually becoming one of the world's well known con artists. During his jaunt, he successfully conned millions of dollars worth of checks. He also was able to pretend to be a Pan Am Pilot, a Doctor, and a Legal Prosecutor.


One of the things that lead to this was a lesson that his dad taught him early in the movie. The conversation went like this...

Frank's Dad: When I get inside, you go back to the front seat and wait. Even if a cop comes and writes you a ticket you don't move the car, understood?

Frank: "Dad, wha-what's all this for?"
Frank's Dad: "You know why the Yankees always win, Frank?"
Frank: "Cause they have Mickey Mantle?"
Frank's Dad: "No, it's 'cause the other teams can't stop staring at those damn pinstripes."

Following this conversation, the dad went on to demonstrate to his son how to con someone at a bank into getting Frank set up with his first checking account when he then we on to write bad checks with.

This "staring at those damn pinstripes" is what we like to refer to as "The Halo Effect" which is a phrase coined by Edward Thorndike back in the 1920's. He was the first to support this phenomenon with empirical research (which we say "Bravo!" to).

The halo effect is when an observing person subjectively and assumptively develops an unfair bias towards an observed person. This bias is generally based on some characteristic of the observed person such as the shape of their body, their clothing, the persons personality, etc. In the example above, Frank's Dad is suggesting that the teams that play against the Yankees are so busy staring at the stripes on the Yankee's outfits that they become detracted from playing their best.

What's this got to do with UX? This "Halo Effect" is one such example of cognitive understanding that the User Experience Practitioner must consider in their planning, molding, and maintenance of the interfaces they come in contact with.

It is for the reason of the "Halo Effect" that it is a good idea to test while a site is still a wire frame. When a design has been advanced to higher fidelity, users will likely become distracted by the attractiveness of the design. In fact, it is likely that if asked, they will say that the design is great. The problem with this is that even thought the visual design may be great, the design's affordance for usability may still be poor. By testing in the low detail phase, a user will be less likely to be caught "staring at those damn pinstripes."

References:
Halo Effect, Wikipedia
What is the Halo Effect?, About.com Psychology
Catch Me If You Can, Wikipedia
Rapid Desirability Testing: A Case Study, Michael Hawley, UX Matters

Thursday, July 17, 2014

Visual Priority Strategy is key to every successful website

This article discusses the importance of strategic visual prioritization.

One of the biggest problems seen in evaluating different sites is that many pages lack obvious strategic visual prioritization. In other words, we find that there are many pages that do not allude, support, or relate to their owner's goals. It is true that  there may be a bit of sales tied into getting a user to click the link to "Locate a Dealer" or "Pay Now". For example, it might be of benefit to get users to compare different products so that they can see the value in one over the other, thereby educating them and ultimately persuading them to finally click the "Pay Now".

It's highly important to understand that there is always going to be a visual prioritization attached to any interface or product design, whether it is intentional or not.

Visual prioritization goes above and beyond simply making the link to the "Locate a Dealer" function larger. It involves understanding each page of the website and how it is working to drive the main goal forward. If there are elements on the different pages that are unrelated, or distracting, then those items should be visually depreciated in priority.

One helpful tool might be to list all the features for each page and then assign a priority to each. Using visual treatments (font types, styles, page position, colors, image sizes, etc...), a designer can effectively draw the user to the area that they want them to look.


Bad User Experience #003: Waiting 2 times at the doctors office

The purpose of this article is to present you with an example of a common poor user experience that has rooted itself deep into our culture, and is likely not going anywhere any time soon.

Image this, you wake up one day and feel a little bit ill. You reach over to your phone, hold the button in and say "Siri, get my doctor!" at which point your phone would simply make arrangements to have your doctor come visit you.

picture of a doctor and a lady looking down at a child in a bed. The doctor has a flashlight that he is using to shine line into the child's mouth so that he can see better.Yes, that's far fetched. In fact, that is so extremely far from where we are today. In the 1920 and 30's a docs visit was not uncommon. Transportation and communication were both more difficult and took longer, so if you needed a doctor, it was just easier for them to come to you. By the 1960's, house calls comprised about 40% of the patient / doctor relationship. As time marched on, we find that not only are house calls somewhat taboo, but that there seems to be a disconnect in patient / doctor experience.

A while back, I decided that it was be fine for me to go in the back yard and practice doing cartwheels with my 7 year old daughter. Yikes, being 34 years old has it's limitations. It didn't seem hurt at the time, but then the days following, I noticed that my arm was starting to hurt in my elbow. I decided I'd go visit the doctor...

When I got there, I check in to let them know I was there. "We need you to pay the co-fee before we can get you checked in."

"Okay," I said, "but what if the doctor can't figure out what's wrong with my arm? Do I get the money back?"

"Sorry sir, this pays for his time slot. Go ahead and have a seat. A nurse will be with you shortly".

It wasn't shortly at all. I wait, and waited. I read magazines. I checked my email. There were sick people all around me. I'm quite certain that I was exposed to Malaria, Foot Fungus, and likely other very yucky, very contagious ailments. To my left were a bunch of snotty kids playing with the sickness toys in the kid area. One of the kids wiped his nose with his hand, then picked up a toy and began playing with it. Wow. Easy. I thought to my self, "I gotta get out of here!"

picture of a very angry looking nurse.Just then, my name was called from across the waiting room. I was greeted by a lady who had clearly developed an immunity to all ailments including smiling and friendliness. She said "Please come this way", but I'm quite certain that the "Please" was forced. She took me to a room where she made me site on this padded paper-covered table. I tried to make small talk, but she wasn't having it. She was ALL business. She took my vitals, all the while not telling me anything about what she was writing down, or how my vitals reflected my overall normality grade. Finally, she said "The doctor will be with you in a moment" and then left.

Tick-tock, tick-tock... waitin again. "Why am I waiting again" I thought, "I hope they don't make me pay a co-fee again". Looked over to my right... "Oh, magazines! But wait... those are the same magazines I already read. Seriously?!" 

At that point I began looking around for things to play with. "Plastic ear funnels, tongue depressors, cotton swabs... Oh, here we go. Hypodermic needles!" Just then, the doctor found his way to me.

Then the docs appointment went on.

I just have to say that the experience that I just described pretty much sums up each and every visit to the doctor. No part of that experience was good. I purposely stopped at the point in which the doctor came in simply because I didn't feel like explaining how horribly lazy and arbitrary my doctor is in assessing my pain.

If there was ever a service that could use a UX face-lift, it would be the experience that a customer must go through when visiting a docs office.

If you've had such an experience, I'd love to hear about it. If you work in a docs office, please PLEASE here this plea... Consider your customer's experience. I'm quite certain that people would be a whole lot happier paying your high prices if you considered them a little more in your dealings. Can't this be about more than just supply and demand?!?


Reference:

Tuesday, July 15, 2014

What's the best approach to Responsive Web Design?

Recently I was on a forum site where one person asked...

"What's the best approach to responsive web?"

This isn't just a loaded question, this is a question loaded with sniper rounds. The reason why I say this is because we are all at this juncture in history where we all must get up to speed on what this Response Web Design (RWD) concept is, and how we need to plan and prepare for adapting to it's concepts, and practices.

Claiming to have the exact correct answer to that 'live round' question is simply foolish for even the mosts senior UX practitioner. But, we should at least kick you in the right direction.

Before we get to deep, it's important to have some foundation knowledge. We define the term Responsive Web Design as being a term used to describe a way of planning and designing for the possibility of a user interacting with your web page or user interface on more than one platform and through more than one screen resolution. It is also a good idea to have the term Multi-channel Experience in mind as well when considering the best way to approach (or plan for) the responsive web experience.

Let's talk about the 'who' of this topic of discussion; the user. The more usability studies I conduct, the more I realize that there are no two users alike. We are all so different. We all do things different. We are all smart in different ways. There are however some commonalities in behavior, but as technology moves towards our inner personalities, our technology needs become more and more robust in difference. Maybe it started that screens were all generally a couple sizes, but customization is the name of the game now, or as Burger King used to say "Your Way, Right Away!"...

Maybe they still say that (I'll have to check).

Image 1: Android Fragmentation
Visualized (2012), OpenSignal.com
And now the 'what' and 'why'. It's a well known fact in this modern technology age that users are accessing interfaces through increasingly diverse platforms and through increasingly varying resolutions. Image 1 represents all the varying screen resolutions for Android products in 2012. This is not including all the other manufacturers of desktop monitors, laptops, tablets, mobile devices, wearable tech, or any other possible platform. It is easy to see that our users tech needs are huge.

lastly, a rough 'how'. Remember that there isn't one right answer (that's my way of reminding you that we all do things differently and that I'd welcome your comments or questions).

One approach to RWD

Steps:

1. Identify your features: 

Identify your UI's existing or future features (i.e. main menu, categories, link lists, sharing options, etc...), and then expand them out so that they are as micro as necessary.

2. Identify your appropriate channels:

Identify the top 3-5 channels that you are hoping to plan for. This will be highly based on competitive analysis and market research. You must first go and learn who your competition is (if any) and find out where the bar is set. What channels are they offering their ui through? This will take some effort on your part as well.

3. Identify your screen resolutions:

Identify the top 3-5 screen resolutions per channel based on demographic information for the geographic area in which you will be targeting. The reason why this answer is vague is simply that there is no guarantee that the area you are targeting will reflect the same devices as your area. Consider this... There are a number of emerging countries out there that have completely skipped the desktop computer experience and have jumped right to the mobile phone. This will take a bit of determined research to identify the resolution ranges per channel that you want to target.

4. Create a Multi-channel Experience Map:

This is simply a spreadsheet that has all the features you hope to offer in the first column, then a row at the top that lists the various channels. Once you have that, use that spreadsheet layout to keep track of what features will appear in what channels. It is likely that some features will appear in all channels. It is also very likely that you will identify features that will be out of place for all channels. Don't be afraid to cut some loose in the name of the user experience.

5. Put it all together:

It's time to start sketching. The screen resolutions and the Multi-channel Experience Map will both feed into this phase of your effort. Roll your sleeves up, and begin sketching the high level layouts for your various channels while keeping in mind the hierarchical priorities on the various features being offered. You may find the UCD Process described in our article titled What is User Centered Design helpful.

Good luck friend. You are going to do fine. Also, one last rule of thumb...

When your design breaks, that's a break point.

~e


Reference:

Monday, July 14, 2014

What is User Centered Design?

User-centered Design (UCD) is often referred to as a process of identifying the usability or user experience focus points within a product or service in order to instantiate the new into existence, or better the designs of the past. Through focusing on the user's needs and expectations UCD can at times eliminate or prevent points at which a user might hesitate, be held back, or become road-blocked in their effort to get through a process, to get through a series of screens, or to become proficient with a product.

UCD does not discriminate when it comes to it's target. UCD can be applied to products and service. Because the overarching concept that one must understand is that it's truely an evaluation of the journey a user takes, UCD methodologies, best practices, and tips can all be applied to which ever the target.


Another name for UCD is "Human-centered Design". Human centered design processes for interactive systems, ISO 13407 (1999), states: "Human-centered design is an approach to interactive system development that focuses specifically on making systems usable. It is a multi-disciplinary activity." I have three thoughts on this definition of of the term "Human-centered Design". 


First thought is that this is making a huge assumption that this is a "focus on making systems usable". Not quite sure that that is broad enough. I believe that when we refer to UCD or Human-centered design, we are referring to the design of touch-points to humans. 


Second. I prefer to use the term UCD for one very important reason. In this world of computers, services, tools and products, the tech industry often forgets that it's not ALWAYS about the humans. Human-centered design can not apply to a product that better streamlines the milking process for cows. It cannot design a fuzzy jacket that fits all large, medium and small dogs. We can't rely on Human-centered design alone to improve the way a bird feeder keeps out the squirrels. The user can come in all shapes and sizes.


My last thought is that I completely agree that in order for UCD to be practiced successfully, one must have a variety of skills. UCD is definitely a multi-disciplinary activity. Visual design, architectural design, business prowess, research skills, prototyping, sketching, and public speaking are just some of those skills.


High Level Process
The User Centered Design process can look many different ways. 

An article from uxmatters.com describes 3 steps: 1) Discovery, 2) Design, 3) Development. Where Discovery is a research phase, Design is obviously a design phase where the knowledge gleaned through the research phase is put into effect in the effort of coming up with a design, and lastly is the Development phase. The Development phase (as it related to the uxer) is really described as being present to provide development Support.

In Alan Cooper's book titled Goal Directed Design, he describes the process as having 6 different phases: 1) Research, 2) Modeling, 3) Requirements, 4) Framework, 5) Refinement, and 6) Support. Steps 1, 2, and 3 are pretty much the same parts as described in the uxmatters article for the Discover phase. Step 4 and 5 track to the Design phase, and step 6 is again equal to development support.

In the book titled Smashing UX Design by Jesmond Allen and James Chudley I found what was even closer to what I believe to be proper UX Design. It described the steps as being 1) Research, 2) Design and then 3) Research again. Again, like before, they all generally described a time to research, a time to design, and then a time to provide development support.

Out of the three though, it seemed that they didn't directly match up with my own personal experience on project. My projects have often consisted of a process that looked more like this...
  1. A research phase (getting the basics)
  2. A design phase (design the basics)
  3. Another research phase (usability testing)
  4. Another redesign phase (adjustment of the design based on findings)
  5. A third research phase (Anything else need fixed?)
  6. A third redesign phase (slight modifications and fine tuning)
  7. Passed to development. Dev may say, "Can't do THIS thing". Development Support may consist of...
    1. A research phase (figure alternate appropriate methods)
    2. A design phase (redesign)
    3. A research phase (usability test solution)
    4. A slight redesign phase and pass back to dev.
  8. ...!
It is truly dependent on the project's needs. I assume that the reason why different people like to portray the process as having 3 steps is because it's easier to sell. So if that's the case, then here are the three steps that make up UCD, in no particular order, and with no particular cap on how many times they may appear in your particular project effort.

Research

Design

Development Support

If you are interested in learning more about UCD or are just getting started in this realm of education, I recommend that you check out some of the references below...

References:

Saturday, July 12, 2014

Bad User Experience #002: The modern day antiquated church

The purpose of this article is to present you with an example of a common poor user experience that has rooted itself deep into our culture, and is likely not going anywhere any time soon.

I'll remember forever being in Jr. High and High School. Friends, adventures, romance, chores and homework... That was it. But wait, there was something else that I was part of that has forever since effected the way I see myself, my life, and the way I run my family and interact with others. And yes, it is riddled with service design opportunity. It is when I first chose to identify my self as a Christian.

The path that lead to that choice is what this article will really focus on.

Growing up, I remember my mom making me go to church like every Sunday. Irritating. I didn't like having to dress up in nice cloths, or having to sit in those uncomfortable pews, or listening to the old guy in the row behind me snore every now and then. I liked the music just fine, but there were SOOO many unlikable things for a 4,5,6th grader.

When I reached my 7th grade year, I was beginning to view things in a different (testosterone colored) light. Arguments were common in my house, voice changes were happening, and yes, I started to notice girls.

picture of youth standing together
One Sunday, I remember my mom taking me to church TOTALLY against my will. When it was done, she took me through the gym, which had classrooms surrounding it. My mom took me towards a desk where there was a lady smiling and greeting different people. As we got closer, I remember eyes turning towards us.

She said, "Hi Shelly, is this Mike? Hi Mike." She then called over to 2 or 3 girls that were my age and asked them to take me around and introduce me to some of the other kids in the Jr. High group while she talked with my mom. I figured she had some business to discuss with my mom, so I didn't suspect anything.

Soon, I found myself with new friends. Learning about who Jesus was. Learning about how my decisions effect my life. Learning about all sorts of stuff.

Many years later, I decided that I wanted to serve as an adult volunteer in a Jr. High and High School Group in hopes that I would have the opportunity to be a part of that memory for a young person, have a part in the way the love of Jesus is spread, but also to just have some fun (my goals as an adult volunteer). When I started, I worked under a guy that wasn't much older than me. As he spoke to the students, he used modern technologies, music, and stories to capture their attention. The games they played were old but still good, and his effort with relationship to the volunteers was great. He seemed to understand the needs of the different users of his service.

It wasn't until he moved on and was replaced by an older, less skilled leader that I began to notice how our modern Christian church is simply suffering from being stuck in the past.

Yes, the bible was written in the past, but after reading the full Holy Bible cover to cover, I am a firm believer that the content is needed more than ever today.

There are two ways to look at church today. The church is the people, but then there is the church as an organization as well. The church as an organization has the goal to grow and expand. The people on the other hand have many MANY goals of their own.

The people come to church to be a community where they can grow in their relationship with the Maker, but also for a plethora of other reasons.

youth group related words shaped into a word cloud where more popular descriptive words are larger than less common words.The reason why the modern day antiquated church made the Bad User Experience list is that it is not done nearly enough to understand the needs, expectations, or limitations of the people of today.

Through a greater effort in researching the various demographics that surround the church's building, they would have a much better opportunity to create those opportunities for friendship and relationship. Through better understanding of the goals of the people, they can better organize those who are willing to serve so that goals can be better met.

I love my church. I love the church people. I even love that there are different denominations. After all, God gives us liberty to worship him and follow him in many different ways. So why are we so stuck on the ways of the past... Because they work? Well, they worked... but do they still work?

Bad User Experience #001: Met with a barrage of sales

The purpose of this article is to present you with an example of a common poor user experience that has rooted itself deep into our culture, and is likely not going anywhere any time soon.

I'll always remember that day in 2005 when my wife and I went to the car dealership for the first time to start looking at prospective candidate vehicles. When we pulled up with our old beater and parked in the newly painted parking spot. As I glanced around, signs were everywhere boasting of this sale, or that sale. The balloons, streamers, and soft music mesmerized my senses, and then it happened. I looked to my right and standing there in their gold lined deception gear was a money thirsty platoon of sales people... I could feel them pulling the money out of my bank account with their eyes. If you've ever seen the 1996 kids movie, Matilda, you may remember a few scenes where Danny DeVito played as a crooked used car salesman. Well, five (5) or six (6) of those people were looking at me. Yes, I gulped as I physically felt fear.

I get the same feeling every time I go to the car dealership, whether it's for an oil change, or to have repairs done. It's always the same.

A similar incident happened just today as I was taking my daughter on a "Daddy / Daughter Date". I have 1930's Mystery date with my wife coming up that I have been slowly preparing for. I figured I'd take some time while I was away from her to stop and get a bow tie. Of course my daughter didn't want to go in, but I made her anyway. As we walked in, I immediately noticed the nice air conditioner and pleasant clean smell of the men's clothing store. Before I could be distracted by any other sensations, my attention was stolen by "Is there something you are looking for today?"

Looking over, to my horror, I found myself facing four (4) sales vultures ready to swoop in for whatever they can get from me (very similar a scene to the classic Disney kids move, The Jungle Book. They were fully decked out in high class dinner date clothing. All smiling. All full of sales tactics. I looked down at my self: Shorts, T-shirt, flip-flops. Then I said out loud... "I feel under dressed."

I literally picked a sales person, did my business and got out of there. Man, that was AWEFUL. I don't want to go there again unless I absolutely have to.

You can bet however that before I left, I let the guy know how intimidating the encounter was. In fact, it was an easy conversation that I've had the opportunity of sharing with other businesses as well. Yes, even the car dealership has heard my qualms. Unfortunately, no one ever REALLY hears my complaint.

Image how different sales would be if all sales personnel around the world approached their jobs with intention to better the customer's shopping experience RATHER than with intention to push units. Wowwy! Bamo! That would be a beautiful day.

I primed the pump. Now it's your turn. Tell me about your experience with being met with a Barrage of sales...

Friday, July 11, 2014

A new mobile menu icon

You have probably seen the old "hamburger icon" at least once. No, I'm not talking about an icon that literally looks like a hamburger. If you aren't sure what I'm talking about, here are some examples of the "hamburger icon".

In most cases, the icon is used as a button that allows users access to menu options. Some recent research however may be concluding that the hamburger may not be the best choice.

Maybe it's time for a NEW menu button.


What would a new menu button need?
  • Needs to leverage user existing know-how.
  • Needs to carry affordance for clicking. 
  • Needs to be dominant on screen so that it cannot be over-looked.
  • Needs to be customizable, yet recognizable.
  • Needs to stand apart from the drag handles that are so similar to the hamburger icon.

Path to the future
To best leverage users existing know-how, the new design can implement the 3 bar concept.

To relay the idea to the user that the item is click-able... Well, what better shape than a circle. After all, aren't the tips of our fingers circles instead of squares? In addition to creating an affordance for clicking, this icon resolves the issue of the icon being confused for a drag-handle.

A designer can increase or decrease the white space to raise or lower the items dominance on a screen. More white-space would result in a less dominant menu icon.

Because this new idea is so similar to the hamburger menu of the past, there is plenty of room for customization.

new menu icon 1.1new menu icon 1.2new menu icon 1.3new menu icon 1.4


An additional modification might be to explore ways to make the icon more accessible to screen readers as they will likely be moving to mobile if they have not already begun already.


new menu icon 2.1new menu icon 2.2new menu icon 2.3new menu icon 2.4


I encourage you to run with the idea. If you can perfect it, I'd love to see your implementation. Cheers!


Resources: