UI DESIGN GUIDE - Web Application Design, Design Examples, Design Lessons » ui design lessons

UI Design Patterns: Exploration of Data and Visual Imagery in Application Design

uidesigner — Tue, 26 Jan 2010 16:01:54 +0000

I was recently examining some interesting articles on Engadget and noticed how the web site has been experimenting with different visual representations of data. As many know, Engadget is a high traffic tech blog. While it has not been special outside of the tech domain of knowledge. My eye caught something that was neat when trying to find popular articles and a little bit different. Next thing I knew I was no longer looking at the articles and instead was focusing on the interface design.

Engadget Uses A Visual Scatter Gram To Display Articles by Comment Posts

To begin with study the image to left or visit engadget.com. If you notice “the daily roundup” consists of a dot representation by hour and volume of comments per article. In this interesting approach a large volume of data is depicted with minimal space. To an avid reader of the site it may not be of much use, but to a casual reader it can help them quickly pinpoint hot topics of the day. And for us multi-tasking tech geeks that is a time saver.

As your move your mouse over the dots a hover tool tip displays revealing the article name, date, and number of comments. As it is difficult to pinpoint a single dot on the screen a larger transparent circle displays around an area if the mouse pointer is on top of dot. This is important because a large cluster of data points can really cause usability issues with data overlapping.

Are there problems with this experience?

B. My design revision: includes a further display that gives each post a popularity index rating.

Based upon my own experience this type of interactive info-graphic can be misleading if you are using it solely to gauge what topics are the most important. Certainly there is something to say that the more a topic is commented upon the more people that have seen / will see the topic.

As my mind is constantly analyzing and investigating anything UI related I started conjuring up a different solution that could balance both popularity of comments versus the actual views to better depict important stories. One possible implementation I arrived at involves adding some more visual data representations to the mouse-over event to form another type of chart. [ See my design idea illustration B.] In this design thee comments of an article are correlated with the page views to arrive at a popularity index. This could further be refined by defining page views as the click + total duration greater than 1:00 minute on a page. This way we can eliminate any false data due to users visiting and leaving the page quick.

There are a lot of different ways this could be designed and developed and expanded. Most of the decision is going to depend on the audience your design is aimed at. When we look at this designing a complex UI to be simple you really have to ask yourself ”Is this just neat or is it providing benefit to my user base.?” Neat is great and cool if your audience appreciates the cool factor, but don’t get carried away or you might end up loosing users as opposed to gaining them.

UI Design Lessons: A UI Designer in an Agile World, Get Me Out of Hell! – Part 1

uidesigner — Wed, 21 Oct 2009 01:48:05 +0000

When I travel to conferences and speak with people about their agile UX experiences I come across a lot of repeat questions. Most of these pleas for help are about time management, rapid design sketching, traditional usability approaches, group design mentality, lack of support for UI development, and let’s not forget meeting burnout.

Even today UI designers hear the word AGILE and there mind is flooded with demon visualizations straight out of Dante’s Inferno. Why has this methodology caused so many headaches to UI Designers world wide? Why are they terrified? Can we beat them, or should we join them?

Generally speaking 90% of what a UI designer hears about AGILE comes from an AGILE practicing programmer that has succumbed to the second circle of hell and revels in the fact that you must join them. Let’s face it as UI, Usability Specialists, Graphic Designers, etc.. we work in a different creative zone. A zone hard for many developers to understand – Even if they want to understand.

Well, that’s about to change as I finally delve into some secrets of success. Rapid UI Design is not easy, it’s usually far from a “done” state, and even in a perfect world, the time to refine and refactor both your code, interactions, and design is hard to come by. In order to survive and thrive you need to look at practical solutions and solve real problems with the process itself. In order to truly excel you need to replace perfectionism with iterative perfection. You need to find a way to be a time traveler amongst all the chaos. You need to turn hell into paradise.

Cue flashbacks…..

Imagine it’s your first day on as a UI designer in a company. You are super excited to work in this vast field only to have your boss tell you.

Boss ”We work in a 1 week iteration agile development environment. ”

At first you may panic, you may want to quit. You may not even have a clue what Agile means . All you know is that you were hired on your UX skills and your damn awesome portfolio. You are still a bit light in the experience department, but are self-motivated and driven by a passion to create memorable, exciting user experiences. You have spent hundreds of hours refining small personal projects, none of them were quite near finished and you always had more time. Even fresh your college professors gave you a generous amount of time to come up with the perfect solution.

You turn towards your new boss and ask the simple question. “What does being an Agile UX designer mean to me?”

Boss “We try to build something quick and let our 200 users test it in the field, we then iterate and make refinement to the functional and design elements of an application. And by quick, I mean rapid development & rapid design.”

Now the sweat starts to build as you think to yourself? What the hell have I gotten myself into? All you know is that you can create semi-decent sketches of vague application functionality, but over the course of a week or longer. Time is your enemy, speed is your weakness.

Your stress level and blood pressure begins to rise. You start to frantically gasp for air, the questions racing in your mind.

How can I produce something that will immediately be built into a functional application.
What about my training in persona usage, usability testing, card sorting, etc…?
What about multiple sketches for each application path?
What about refinement time?
What about missing user stories or requirements
What about running out of time?
What about failure?

The questions just keep on coming as your pulse races. And then the boss chimes in.

“We know it’s hard work, but we know our audience well. We have daily SCRUM meetings, and have a direct channel open to our clients and customers. Our work flow is continuous. You’ll do just fine.”

As you stand there awestruck you are thinking “No…No I wont.”

Fiction Takes The Form of Reality

The preceding story was not fiction it was true story. Imagine you have 1 day to develop a new major application piece. You need to be able to quickly move from ideation to sketches, to wire-frames, and you have a deadline of tomorrow morning? Add on the fact that a large number of programmers are waiting on you? What do you do? At the most, you may get out two different designs. This my friend is how the fast paced world of Agile UI design works. Don’t fear it, but don’t let the process control you. (I’ll talk about this in another article).

There are several key factors that will help you tame the wild beast. Take a breath and let’s start to look at making the chaos manageable.

If you are one of the lucky souls that works on a well structured UX team this process becomes a bit easier (future article Architecture of a UX Team), but if you are a UX Team of One. There is a good chance you just messed yourself. It’s hard to imagine adding on even more roles to an already overloaded work schedule? Estimating time management, researching the problem, defining the problem, identifying primary and secondary application functions, sketching rapid paper-prototypes, understand stories (AGILE), Understand complex work flows, Refining the design, Gaining Buy-in, More Sketch refinement, and ultimately the next day ready to program. Wow! If you have ever experienced week AGILE iterations then you too might have felt this pressure.

So let’s take a look at this EXTREME situation first and then in future articles talk about refining the process itself.

Help What Should I Do First?

For this article lets imagine we are building a fictitious site called “babyspace” It’s a place for babies and is used to track developmental growth (I actually will cover this in another article as well from a design perspective.).

Step 1: Ideation & Brainstorming

You want to begin where you excel and that is brainstorming. Use a whiteboard, paper, napkin, toilet paper, whatever you use but make it fast, but also make sure you keep a copy. (I recently purchased a Livescribe pen and keep all my brainstorming sessions in there with recorded notes. It has helped me remeber the most intricate details of a brain storming session and saved lots of time.)

Hopefully, while you are doing this the business or you yourself have gathered up user stories (small chunks of functionality), and prioritized these. From the stories you need to figure out what relates to the user interface. Take notes and jot down tasks where you see a UI component being designed. This is going to help you immensely when you go to a Sprint or Iteration planning meeting. You want to be armed with as much knowledge as possible in both function , form, technology and design ideas.

Step 2: Ask The Right Questions, Who Needs What? Why Do They Need It? How Does This Benefit Our Users?

Do notbe afraid to ask questions. If you need to refine either your user stories or clarify your own UI tasks. Do it! Sometimes it’s easy to miss a crucial detail when you feel the clock is ticking. It’s better to get as close to the right answer before you start, as opposed to after you start. It’s not fun to rip apart a fully designed application or UI because a crucial story element was missing (Keep in mind this is different then actually refining your UI each iteration).

As a UX designer you want to know these questions so you can put yourself in the shoes of your user. If you utilize personas you want to match up your personas to these user needs and desires (preferably several weeks before the project begins). Always, Always, Always ask the following question:

How is this is benefiting our Customer ?

When a team looses sight of this redirect the conversation. I highly recommend asking this same question of your team in different ways.

“Why would a user need to do this?”
“Why would persona A care about this?”
“Is user really going to have a need to do this?”
“Does this make it easier for our customer?”

Restructuring and rephrasing your question helps to get people to notice the different sides of a story or requirements. It helps to draw out those that talk to much in a meeting and those that don’t talk at all. Engaging and intriguing questions will save you time.

Stay tuned over the next few months as I roll out Part 2 of this article. We will continue to cover lots of other tips and techniques, as wella s more of my process. Soon I’ll be able to notify my readers if my panel (core conversation) is choosen for the 2010 SXSW conference.

UI Design Challenge: Redesign A Filter Widget

uidesigner — Wed, 10 Jun 2009 18:33:26 +0000

So I am bringing back the UI design challenge and wanted to try this a bit different. I want this to be an interactive experience. If you listen to my audio blog posts: http://boo.fm/b29310. I talked about recent research I was conducting to locate a new house.

During the course of this research I used many front-end UI interfaces and house databases. I came across one such search that was extremely tricky to use. Notice the image below and see that I am required to type in a zip code, but then I am presented with a GIGANTIC list of options in a multi-line text box (some 100+).

So here is the challenge to the community. If you want to participate great. For this particular problem your goal is to come up with a new and better design for the interface presented. If you want you can post a comment that goes to your design illustration etc, or you can simply e-mail me and I’ll be posting some of the entries here along with author and web site link.

There are no prizes. This is strictly for education purposes. There are no right or wrong answers. On To the challenge!

The Challenge:

[/caption]

My Example:

In my example below I took two routes. One allows the users results to be filtered down to a smaller number by choosing the area in a drop down. The other route I added some interactivity with the mouse. Based upon the 2 filters search type, and area a user could click the “LET ME DRAW IT” and would be presented a zoomed map of the region. Then they can simply draw a box around the region of interest. Click search and then a number of different things could happen. A user could see houses pop up on the map, they could see a directory listing to the right. The point of this challenge is to design something different and hopefully better than the original

My New Design Prototype

Area Search OLD WIDGET

Your Design Examples:

Book Reviews: Neuro Web Design What Makes Them Click.

uidesigner — Tue, 12 May 2009 14:38:20 +0000

I read a lot of books and in this field it’s good to both refresh and improve your skills. The latest book I finished (just this morning) is Neuro Web Design: What Makes Them Click? by Susan M. Weinschenk.

The book takes a look at web design from a psychological point of view . Inside Susan covers topics ranging from how the brain functions, to what primary instincts are triggered by certain events we experience in our life.

If you have ever taken college psychology a lot of the material about brain composition, comprehension and the like will seem very familiar. What is great about this book is how Susan manages to apply these basic human survival functions to the usage of web sites.

Inside you will find a lot of research and case studies, each concept building upon the last and ultimately bringing home the abstract ideas to concrete web activities.

One particularly interesting scenario revolves around product reviews and how we can structure these to appeal to a web users:

“Imagine you’re at a chain store looking for a HD flat screen television, a random bystander comes by and you ask him what he thinks of the TV.”

Perhaps you do this with thirty other people in the store, asking each of them what they think of the TV. It sounds kind of foolish, but how many of us repeat this scenario multiple times a day online? We are easily swayed and influenced by the ratings and reviews of strangers online. We just don’t know who or what the experience level is of people rating a product online. Yet, when we see the 130 people gave this 4 stars. It directly influences our purchasing decisions. Now that is power!

The book continues to take a look at this method and refines the concept because of the ever changing skeptical nature of web users. Now we may find the review rating backed up by technological, or subject matter expertise.

Overall this book is a great read and should cause some re-reading if you really want to get the most out of it. The first 1-7 chapters really tap into your “old brain” and you may want to stop reading a bit and just sit and think about how you can apply them to your web site. I know I did this. Chapters 8- to the end really rein-force a lot of the concepts. What I found however is that my brain was so busy thinking of ideas, and ways to change content, etc I had already come up with a lot of the material that was covered in these subsequent chapters.

Bottom Line: Get the book, read it, and practice what you learn.

UI Design Dissection: Google Reader What Makes an Application Great?

uidesigner — Fri, 03 Apr 2009 15:21:40 +0000

There are some applications I never used or expected to use for more then a few days. And in any given week I try out about 10 – 15 new applications. I do this because I love analyzing and predicting new trends, design patterns, and visualizing work-flows. Usually, I end up with using 0 of these applications after a few months.

Google Reader has stood the test of time and now I use it daily and it’s party of my morning, afternoon, routine. Google Reader is one of these applications. It provides me a window into everything interesting to me. It’s information, knowledge, and power on demand. It is a phenomenal application but it has several flaws and annoyances that hinder my user experience.

For those not familiar with Google Reader, it is a RSS aggregation tool. Basically, every blog I keep track of (some 120+ blogs) is added to a list that then goes out grabs my RSS feeds from all my various sites and puts them in one nice window to read. There are two viewing modes. One is the ability to view the entire RSS text, or I can view the title of the post in a quick list. I personally found viewing all the text at once a much better way to get the maximum amount of valuable knowledge crammed into my brain.

What Makes Google Reader Great?

I never thought this simple application could be so powerful, but I use it every day and in different ways. The application for me has expanded beyond a simple one-sided user experience.

In any given day I may use it for any of these multiple activities:

Discovering new blogs and more content in my field
Locating new and exciting applications
Keeping up with the latest trends
Driving adoption of my own blog
Research
Keeping track of interesting stories
An archive..

One of the greatest features I use all the time is archival tagging. I frequently have about 400 posts+ a day to read. I use the tagging feature to mark research that is relevant to me. For example my tag list contains articles on “CSS Fixes, UX Methods, and my favorite “Web Applications: Category.” I basically identify new exciting or interesting applications and tag it to the category it belongs.

For Example: Application discoveries are tagged as followed: Web applications social, web applications shopping, web applications crm, etc.(see image to right). This is a very valuable tool because I may need to view reference applications for ideas, new patterns, etc. I simply click the tag and BAM! I get to see all blog posts I have ever tagged with this category. Now that is research power in your hands!

What’s Keeping Google Reader From Excellence:

A good IPhone application that will synch seamlessly
Better management to skip through groups of posts. I generally click the “All” button to read through an entire list of my newest posts. If you close your browser, jump into a new window sometimes the application forgets what is “new.” When you have 400+ posts staring back at you this can be overwhelming. I have to click next 40 times to get through what I’ve seen or already categorized. I want a button next to “next” that allows me to choose the number to skip. IE: Skip 20, 40, 60, 100. That way I can get back to truly reading just the newest posts.
The ability to recognize posts that are titled the same and have the same source will eliminate duplicate entries for reading. This generally happens when you subscribe to a RSS blog aggregation site. There tends to be a lot of overlap with blog posts and a way to filter would be awesome.
Better ability to connect with fellow bloggers
Social grouping abilities (I’m not sure what this would be but it may be neat) Consider I spend a lot of time in this tool compared to facebook, myspace, etc…

What Makes An Application Exceptionally Indispensable

In the case of Google Reader it I can sum it up like this: The application allows me to expand usage beyond it’s original design. It allows me to adapt it to my own work-flows, patterns, thoughts, ideas and creativity. The indispensable application allows me to use it how I want, when I want and, where I want.

The indispensable application is the simplest invention that allows for uses beyond it’s intended purpose. The application becomes so ubiquitous that we don’t even think about how it works ,we just know that it does work. You never question the wizard behind the curtain who is pulling the levers. You simply accept its ease of use and hope it never changes. That is the challenge we face when building exceptional UI. The search to find that happy medium is the difference between adoption and failure. It’s a hell of a lot easier to find the failures.

Life In The Fast Lane

I’ll leave you with just one more tidbit of information. If you are a UI designer always ask yourself, no matter what application you are building. Would I use this? It doesn’t matter that the application doesn’t personally apply to you. You can still assess the interactions. Is option A too cumbersome for even you to grasp? Is option B time consuming? Does option C have more steps involved, but causes less confusion? Does option D break accessibility? Does option E completely eliminate future steps? It’s up to you to decide how to drive the experience. After all the user is just along for the ride and they can easily hop a cab, hitch-hike or walk. You you really don’t want them to do that now do you?

UI Design Lessons: Are You Driving Your Application Usability Off A Cliff?

uidesigner — Fri, 04 Jul 2008 19:52:18 +0000

If I had a million dollars for every time a client asked me to add more features, or more appropriately stuff and jam more features into an already bulging application, I would have published a book, bought a mansion, and maybe a small island somewhere in the South Pacific.

Usability is nothing new. What is new is the use of the term usability by anyone and everyone. It has become the de-facto buzzword across the design world. There are so many definitions and differences of opinion across the web on what usability actually means. Let’s take a look at the dictionary definition:

Websters defines usable as the following:

1. capable of being used
2. convenient and practicable for use

As UI designers, we draw upon a few more concepts to define this idea further. My personal definition takes into account the following:

Learn-ability
Memorability
Performance
Expected Interactions
Consistency
Repeatability

Yes, I know that’s a lot of “abilities”. I will discuss this in future articles,but right now let’s just focus on what falls into the category of usability from an application standpoint and how it can directly impact adoption of our application.

Here’s A Feature, There’s A Feature, Every where’s A Feature

Many notable UI Designers, Interaction Designers, and User Experience Designers have talked about the problems of “featuritis.” The term simply refers to the rapid increase of features beyond either application need or user desire. This can occur to almost any product you can think of. The goal is to minimize and avoid user frustration by understanding what it is the users really need. After you have identified what is needed it’s important to categorize your features, functions, etc into primary and secondary interactions ( I will talk more about this in a future article.)

Even The Best Applications Have Skeletons In The Closet.

Let’s examine some existing products on the market and identify some problems with these applications. Im sure many of us have used Illustrator, Photoshop, 3dsMax, or Bryce. These applications have a high user competency. You may need classes, formal training, and many years of experience to produce professional results. That is not to say these companies have “driven usability off the cliff.” In fact, many follow the same “menu” toolbar structure seen in 100′s of applications. Each application may have their own slight twist and or added access to complex functions. Regardless, there is no doubt a very important process has taken place at some point during the development of these applications to priortize the location of menu features. Hopefully, this process involved usability groups to actually figure out what the priorty was.

Take 3Ds Max for example. 3DS max is aimed at highly competent designers with modeling, mathematical, computational, and visual skills. One version of 3DS Max I’ve used contained many complex context menus with alternating functions to complete as expected complex design modeling tasks. Personally, I’m glad I’m not a 3D modeler working with Max or Maya. The interfaces may be some of the most difficult UI’s I have ever encountered. Multi-Tiered cascading menus, complex keystrokes, and alternating views of wire-frames.

Let’s take a look at Photoshop. Pretty much every designer I know has used this behemoth of an application. The sheer power of the tool led to a lot of acceptance of any short comings. Yet, with the creation of CS 3 Adobe redesigned many core menu structures. One simple example is the tool bar that can now be set to a single strip along the side. This was one of my pet peeves. I would frequently run into the tool bar constantly being in the way. This small change (to the user interface) has saved me many minutes of productivity, and eliminated a major annoyance.

We The Users Will Not Stand For UI Mediocrity

Alan Cooper’s Book “The Inmates Are Running the Asylum“-(published in 1999) talks about the complaceny users of software faced when working with web applications. of course, it is now 2008 and a more recent study by Jakob Nielsen points out that users have lost thier patience. No longer will users stand idly by and wait for that 30 second flash splash screen to load. Poor UI designs and convoluted interfaces, face a growing demand to be made better. It’s our job as UI designers to improve and invent new and easier methods of interaction. If any feature proposed as a usability enhancement fails it is much easier for users to swich prdoucts.

There was a time in the past when humans were pleased by simply improving complex processes with the use of a computer and software. The novelty has worn off, and now users expect much more out of the software they buy.

Think back to the last time you waited for a web page to load. Did you wait patiently? Maybe you tried to click faster in hopes the page would load faster. If you are like me, you simply go to one of the billion other web sites. It’s reasonable to assume loyalties will shift and applications that fall to the road-side and allow usability to suffer will ultimely loose users.

The Dreams That Dreamweaver Dashed

For many years I was an avid Dreamweaver user. The tool allowed me to code faster than notepad, and did not overwrite my code. Adobe became comfortable with it’s lead on the market and the tool never really pushed the bounds of innovation.

Each subsquent upgrade lead to more features, but what I really needed now was a tool that could read my complex CSS style sheets and visually give me a good in program rendering engine. This would allow me to not have to constantly switch back and forth to my browser to check my designs.

So after years and years of program use I switched to Expressions Web. The CSS rendering engine was amazing. Sure, it was an entirely new interface to learn not to mention Microsoft’s insistence this was not a FRONTPAGE tool but instead was directly aimed at professional designers. I hesitated making the final switch, but haven’t looked back. That being said now Expressions is falling behind on delivering the best software experience. I may have to take a look back at Macromedia.

Don’t let your software and usability become a fat pig. Conduct usability groups and determine where to go next with your application. When you have your list of features be cautious.

All Features Are Not Created or Treated Equally

Imagine you are in the market for a new luxury car. The list of features reads something like this:

Power Steering
Anti-Lock Brakes
Rear View Mirror Camera
Internal GPS
IPOD Connection
Stereo CD Controls
Cruise Control
Defogger
Air Conditioning
USB Ports
Extra Outlets
Block Heater
Light Panel
Spare Tires
Microwave Oven

This is a top of the line luxury car. It has items you may never need. The engineers believed it was best to have two spare tires. One attached to the roof, and one in the trunk. They reasoned with the manufacturer that because of all the extra features the tires are not the best quality, but we did get all the features in. Occasionally, the operator of the vehicle may turn on the brights when adjusting the radio. They may short out the battery if too many items are plugged in to the outlets. They may burn fuses, but “everything” asked by the car manufacturer was included. Some pieces are less reliable then others, some have some major bugs, some even may cause system failure.

You may laugh at this example, but sadly it is very true. So many times features are the prized cow at the fair. They are the desired outcome of a super speed, fuel injected, development cycle.

Now let’s fast-forward a week later to the purchaser of this vehicle. His initial reaction was WOW it offers me all of these things? That’s a lot of stuff. Sure I may not use many of them, but oh well. I may need them some day! (just what the engineers, and developers wanted them to think). In The past they would have drank the kool-aid! OH YEA! Today that car is going right back and guess who just lost a sale and millions in investmetns?

The next time you want to jam that feature or expand that application. Stop! Think a moment about what the cause and effect will be. Not to just the current implementation but future expected implementations. You may just prevent your application from careening off a cliff!

*Author’s Note – Due to the size of this article I was a bit late in publishing.

Which Widget is the Right Widget for My Application Design?

uidesigner — Sun, 06 Apr 2008 19:52:13 +0000

Let’s talk about proper widget usage. It’s imperative to know when to use the right tool for the right job. I wouldn’t use a sledge hammer to hang a painting (unless it was a very large painting.) I wouldn’t use a socket wrench as a pliers. I could use a butter knife to screw something in, but is that the best solution? It’s all about using the right application piece at the right time.

Part of this comes from knowing what the common design pattern is for a particular widget. Another part is knowing how and when to stretch the limits of what is considered to be “common usage.” Any time you do something outside of the user expects is when your usability can start to plummet.

The Naked Anatomy of a Check box

Let’s take a look at a simple example our beloved friend the check box. There are two states to this standard check box that are considered common.

If an item is checked it can indicate either something was accomplished.
If the box is unchecked you are undoing or indicating you do not want to follow through on an action.

Generally you will find a check box in an unchecked state. Suppose for an instance that we reversed the common usage. A check box when checked now indicates to the user they are NOT SUPPOSE TO DO SOMETHING. Applying this to the example below we see that because the current state is checked I would un-check to save my selections. Not only is this conter-intuitive but see how hard it was to explain that. You may have to read what I wrote twice to figure out what we are trying to accomplish.

Save Selections:

The same holds true for the most minute details in your application design and ultimately in the widget you choose to use. Going against the common accepted practice has already introduced unneeded complication and confusion.

In future stories we will be looking at a number of controls and how they should be used effectively. Soon I will have a forum setup (next few weeks) to continue on the discussions outside of the articles written here.