To truly understand and design the best possible information architecture for an app or website, find the biggest whiteboard in your office and start drawing. There’s simply nothing better than freeing yourself from the confines of a computer screen or diagramming software and begin focusing on what is really important—design. Common interface components will bubble up and reveal themselves, which will allow you to start thinking about a standardized way to design those components. When the interface components uses consistent design standards, users can quickly learn how to use them as they appear on different screens and sections of the app. Creating a common nomenclature will also become apparent as you write different section names, navigation menus and labels.

A whiteboard allows you to physically step back from the diagram and see things that you may not otherwise see on a computer screen, such as recognizing the relationships and interconnections between seemingly disparate sections of the application. Seeing the “Big Picture” helps you design the overall User Experience by creating a context for all the individual screens and components you need to design as you get deeper into the product.

So, find that whiteboard and some smelly markers and start drawing!

Every once in a while I like to post a funny or odd “User Experience” that we come across…and this one fits that bill.

A while back, a friend of a friend was sitting on the stoop of one of his job sites with a colleague (he’s an architect at Triton Construction) when he noticed a Google Maps Street View Car driving by so he took a photo of it.

Just today, someone complimented him on his finished building, which they said they saw on Google Maps. So he logs onto the address, zooms in, and sure enough, there he is, sitting on the stoop with his colleague (see photo). He then scoured his photos and found the picture that HE took of the Google Maps Street View Car driving by and, judging by the two views of the innocent bystander walking by, he realized that his photo was taken at the exact same moment as the Google photo.

Cool.

I spent a ridiculous amount of time researching all the pros and cons between the Droid 4 and iPhone 4S and I’ve concluded that there are simply too many things I would be giving up if I got the iPhone. Since this is a UX Design Blog, I thought it might be good to share my personal reasons for choosing the Droid 4. Keep in mind, that these reasons are exactly that—personal reasons. Also keep in mind that I am and have been a Mac user since the Macintosh IIfx so I am by no means a fan boy of Android. For me, choosing a phone was based solely on my own personal reasons and I understand that my reasons may not make sense to everyone…but here they are:

Google Navigation
I’m a father of two active boys and I use Google Navigation (a free turn-by-turn voice guidance GPS) in my car to drive to all my kid’s lacrosse fields, boy scout camps, marching band competitions, etc… What makes Google Navigation so good (and so hard to give up) is not only that it’s 100% free but it’s also integrated with Google Maps. When I’m on my laptop, I use the “My Places” feature in Google Maps to create and organize different Maps for all the locations I drive my kids to. And, when we go on vacation, I create a Map for all the sight seeing places, restaurants and places we may want to visit while we’re there. Doing all the organizing on my laptop makes user experience easy when I’m using my phone because all I need to do is launch Google Maps, select “My Maps”, then choose “Lacrosse Fields” or “South Beach” and click on the saved location on the Map.

Car Mode
Whenever I get in my car, the first thing I do is snap my Droid into the car dock, which is suctioned to my windshield. When I do this, the Android OS automatically detects that the device has been docked and it switches the interface to display only the essential apps you may need when you’re in your car. To make the User Experience even better, the icons are large and easy to select when driving.

Clock Mode
Every night I plug my Droid into a Multimedia Docking Station on my night table to charge it. When I do this, the Android OS detects that the device has been docked and it switches the interface to display mainly as a large clock. It also displays the current weather, how much the battery is charged and icons for alarm clock, slide show and music. As an added touch, it also dims after a few minutes and displays only the clock.

4G LTE
Having a 2+ year-old Droid 1 with 3G download speeds has grown old. So if I’m going to get a new phone, I don’t just want the phone to work faster, I’m going to want the download speeds to be faster too.
I would say that the speed improvements are so significant, it may be reason enough to get a 4G LTE phone—if download speeds are your #1 concern.

Qwerty Keyboard
The keyboard on my iPod Touch is really fantastic and it’s way better than my Droid’s onscreen keyboard but there’s simply nothing better than typing on a real, tactile QWERTY keyboard.

MicroSD Card
When I had to replace my original Droid 1 phone because of a power supply issue, I removed the Micro SD card in my old phone, plugged it into my new phone and all my apps were ready to use on my new phone. Plus, having a removable SD card allows you the freedom to expand to more memory whenever you need to—something you can’t do on the iPhone.

On-Device Key Buttons
Unlike the iPhone, most Android devices have key buttons directly on the device that allow you to:

1. Go “back” to the previous screen in the app you are in or the previous screen in the previously opened app.
2. Go “home” to return to the home screen
3. Access a global “search” across all apps and files on the device
4. Access a “menu” for options or settings while you are in an app or on the home screen.

The iPhone only has one on-device key button— a “home” button. Now, I am all for a minimalist design, but not having the other on-device key buttons means the iPhone must rely heavily on the hope that individual app designers will design usable interfaces—and, unfortunately, a lot of times they don’t. In addition, having a “back” button on the device is similar to the familiar User Experience of a web browser. All web browsers have a “back” button because it provides users with a way to return to the previous screen without having to rely on whether the website’s designer created a usable navigation system.

My only complaint with the Droid 4′s key buttons is that they changed the order that they display. The order of the key buttons on my original Droid 1 was: Back | Menu | Home | Search. The key buttons on the Droid 4 shown above are: Menu | Home | Back | Search. I really think the back button should always be on the far left (much like it is in any web browser) because A) the arrow points left and users associate “back” or “previous” pagination with going left and B) this is the only key button that has a direction connotation, so I think it would make the most sense for the button to always be placed on the far left.

Send To Phone
“Send To Phone” is a Google Chrome extension, which lets you push links, maps, and currently selected text and phone numbers from the Chrome browser on your computer to your Android device. I never thought I’d use it either but once I did, I find myself using it more than I ever thought I would before.

I have an iPod Touch
An iPod Touch is essentially an iPhone without a phone so I can already use most of the things that come with an iPhone. Plus, as a UX Designer, having both iOS and Android devices is very helpful and important because I am able to see and learn what the User Experience is like on both devices and apply that knowledge to the mobile apps I design.

My Wife
My wife also needed a new phone, so I bought two Droids and now we can share chargers, docking stations and other peripherals. She’s also migrating from an old Samsung Alias II with a full physical QWERTY keyboard and she hates typing on an onscreen keyboard. Even though she’s gotten used to typing on our iPad, she still hates it.

…And, here it is:

Tell me what you think? What phone do you have and what made you decide to buy that one over others?

Responsive Web Design is designing and coding the front-end of a website or app so that the layout “responds” or automatically adjusts (using CSS) to a layout that is optimized for user’s display size.

So, a single web page or template may have different optimized layout variations for different types of displays, such as:

• Small, medium and large computer/laptop displays
• Portrait and landscape tablet displays
• Smartphone displays

Depending on the user’s unique display size, the web design can adjust or snap to a layout that uses unique attributes that are optimized for the user’s display, such as:

• More or less columns
• Bigger or smaller font sizes
• More or less content
• Bigger or smaller images
• Unique URI scheme names, such as “tel:” for linking a phone number to initiate a phone call on a mobile phone, etc…

Responsive Web Design Resources

10 Incredible Examples of Responsive Web Design– WebDesignDev

60 Examples of Responsive Website Design – Inspirationfeed

Responsive Web Design Techniques, Tools and Design Strategies – Smashing Magazine

Responsive Web Design Book – A Book Apart

Innovation is defined as “the introduction of something new” and when most people think of Apple they think of an innovative technology company. However, I would argue that Apple is really known more for designing innovative user experiences than it is for developing innovative new technologies. In other words, when it comes to taking technologies and changing the way people experience those technologies, no one is better than Apple.

How many portable media players were there before the iPod?
Apple wasn’t in the business of making portable media players before launching the iPod in 2001. Now it dominates the market. They didn’t invent the technology—they made the experience of using a portable media players better by focusing on the core needs of the product:

• Make it easy for people to load music files onto the player.
• Make it easy for people to quickly browse through a huge library of music.

Audio Highway’s “Listen Up” released in 1996. Apple's iPod released 5 years later in 2001.

How many smartphones were there before the iPhone?
Apple wasn’t in the business of making smartphones before launching the iPhone in 2007. Now it dominates the market. They didn’t invent the technology used to make phone calls, read email, take photos and surf the Internet on a handheld device—they made the experience of using a smartphone better by focusing on the core needs of the product:

• Make it easy for people to navigate emails and web pages in a way that is more conducive to a small handheld device (touchscreen gestures Vs using buttons or a stylus).
• Make it easy for people to read on a small handheld device (larger, high-resolution, graphically-rich color screens Vs small text-based screens)
• Make the camera easy to use and share photos with others.

The Nokia 9000 released in 1996. Apple's iPhone released 11 years later in 2007.

How many tablets were attempted before the iPad?
Apple wasn’t in the business of making tablets before launching the iPhone in 2007. Now it dominates the market. They didn’t invent the technology used to make a tablet—they made the experience of using a tablet better than any tablet that was made before it.

With the passing of Steve Jobs, we begin to learn more examples of how his fanatical focus on user experience drove the company to launch its most successful products. In this excerpt from Walter Isaacson’s authorised biography ‘Steve Jobs’ , we learn what motivated Steve to create the iPad and how he focused on an element of Microsoft’s user experience that would prevent it from ever catching on:
This guy badgered me about how Microsoft was going to completely change the world with this tablet PC software and eliminate all notebook computers, and Apple ought to license his Microsoft software. But he was doing the device all wrong. It had a stylus. As soon as your have a stylus, you’re dead. This dinner was like the tenth time he talked to me about it, and I was so sick of it that I came home and said, “Fuck it, let’s show him what a tablet can really be.”

Microsoft Tablet PC released in 2001. Apple's iPad released 9 years later in 2010.

In the video clip below, we learn that, ironically, Apple had the iPad before they had the iPhone but Steve felt the user experience methods designed for the tablet would be perfect for a phone.

Over the years I’ve interviewed a lot of talented User Experience Designers and, in doing so, I’ve also heard a lot of interesting quotes come out of these interviews. My hope is to share some of these doozies with the masses to help others and maybe get a cheap laugh. Keep in mind these are actual quotes.

“I don’t like working with a blank canvas”
This is exactly the opposite of what any designer interviewing for any design position should say. A designer’s dream job is to work with a blank canvas—meaning the project or job has no pre-defined limitations or restrictions on how creative you can be. In UX design, this can mean that you will be free to design the best, most usable interface for a product without anyone or anything holding you back.

“If I had to choose, I would choose coding over designing”
If the title of the position you are interviewing for includes the word “designer”, don’t ever say that you would choose anything else over being a “designer”. To be clear, a UX Designer is a designer first, developer sometimes (if you’re lucky). If you are a developer but you happen to be a good UX Designer, choose which you want to be because if you interview for a design position, you will be expected to be a designer.

“As you can see I am one of the best designers out there”
Being a UX Designer means you are always going to collaborating with a team…and no one likes working with an ego maniac. In addition, a good UX Designer needs to learn to put their ego aside and always chose to do what’s best for the product. This can mean choosing a design that proved to perform better in usability tests over a design that you were more emotionally attached to. If you think you are “one of the best designers out there”, you may be a bit reluctant to choose what’s best for the product you’re designing.

“I don’t really like this (portfolio) piece of mine but…”
Your portfolio is either gets you or does not get you the job. If you don’t like a design you did or you’re not proud of a design, don’t show it in an interview because a bad design piece may be the most memorable thing about your interview.

Do you have any others? Add a comment…

Other than your computer, your phone is probably the most used piece of equipment in your office—yet I can almost guarantee you that most people still don’t know how to use 80% of its features. I know I don’t.

Taking even the most cursory glance at this phone, I can only surmise that no user was ever involved in the design of this phone. Asking any user to perform the simplest function (besides making a phone call) would reveal just how unusable this phone is.

The orange buttons circled in the above photos appear so similar that most users would think they are related – but they are not. The orange button on the left places a call on hold while the orange button on the right hangs up a call. Meanwhile, pressing the green button places a call on speaker – but to hang up the call, you don’t press the green button again (that places the call on mute), you have to press the orange button on the right.

Another feature that is undoubtedly used several times within the day is the volume adjust buttons. In the phone pictured above, there is no indication as to whether the adjuster will affect the volume of the handset, speaker or ringer. Unfortunately, it does not adjust the ringer volume at all. To adjust the ringer volume, you have to use a switch hidden on the side of the phone.

Popular features on a phone should be the most self-evident and usable. For example, how many times have you needed to get two callers joined on a conference call? Unfortunately, a lot of people never use this feature because it’s simply to difficult to figure out how to use it. To avoid the embarrassment of accidentally hanging up on a person, more people turn to a conference call service rather than using a feature that already exists on their own phone. Continuing in this evaluation, what does “Flash” mean on a phone? Ironically, Flash is often used for making conference calls but why do phone’s use the term “Flash” when it usually has nothing to do with making something flash.

Why not just call things what the are? In the photo above, the iPhone uses a button called “Add Call” to add a caller while you are already talking to someone and then to join the two calls, you simply press “Merge Calls”.

In addition to “Flash”, what does “Shift” mean? Why is there a “Dial” button? Do I need to push the “Dial” button to make a phone call? Or, can I just pick up the handset and dial? Why are some buttons labeled and other buttons  not labeled? Does the manufacturer of this phone assume that some features are so obvious that they don’t need to be labeled? The design failures of this phone go on and on.

This is a great video from Susan Weinschenk (Chief of UX Strategy at HFI), which illustrates what many of us UX professionals preach on a regular basis—the value of User Experience. The video also highlights stats from studies about the amount of money wasted on failed IT projects and how a small investment in UX upfront could easily help those projects avoid failure.

Get A Fresh Set Of Eyes

Curing Designer’s Block
This is also a good method for removing the dreaded “designer’s block.” Most designers have experienced some form of this. You sketch, you move pixels around but, today, nothing is working. Your ideas and your ability to design just isn’t happening; the only thing that will help is to stop trying. Sometimes we try too hard instead of letting our talents and subconscious do their jobs.

You could equate this to the way you may hear a baseball pitcher is aiming the ball instead of allowing their abilities and mechanics do their job. Similarly, if you’ve ever gone crazy trying remember the name of someone/something, the best way to recall it is to simply stop thinking about it. The same often applies with design. If you’re a designer, chances are you’ve had this happen to you: you’re driving, you’re in the shower or you’re just about to fall asleep when, suddenly, BAM! – the design solution reveals itself to you. That’s because you’ve stopped thinking about it.

Literally, Step A Few Feet Away
Another old art school technique (in addition to my The Blur Tests feature), is to get up from your chair and step back from your monitor or your sketch and evaluate your design from a different vantage point. Often, you will see things like white space (or lack thereof) reveal itself, or colors that appear too dominate over others, or that one element that is supposed to “pop” but is not.

So if you haven’t tried stepping away from your design, give it a try and, if you have, let me know your own personal experience about how it helped you.

The Blur Test is an old art school technique used to reveal a design’s focal point and visual hierarchy. I recommend using it during the design process to mimic the way a user initially views the elements in your design.

Initial Glance
When you first look at the NY Times homepage, you can’t help but be completely overwhelmed by the sheer volume of content. It seems almost chaotic, and reeks of a design driven by too many chefs in one kitchen, all fighting to get their content jammed onto the homepage.

NY Times Statement Of Purpose
The New York Times Company’s core purpose is to “enhance society by creating, collecting and distributing high-quality news, information and entertainment.” Keeping this statement in mind, let’s take a look at the blurred versus non-blurred screenshots of the NY Times online homepage.

NY Times Visual Hierarchy:

1. Top Story: News article on Anthony Weiner
2. Masthead: NY Times logo and advertisements
3. Advertisement: NYSE advertisement
4. Secondary Stories: News articles on Pakistan and Yemen
5. Tertiary Stories: All other news articles

Does this visual hierarchy align with the site’s stated purpose? Does it appear that the NY Times visual hierarchy is focused on displaying “high-quality news, information and entertainment?”

I would say: not really. The Top Story does appear to be the most important, and it is indeed a news item, but whether it’s “high-quality” news is subject to debate. Regardless, the next two most prominent areas are the Masthead and large Advertisement, and neither are news items. The fourth and fifth most prominent are Secondary and Tertiary Stories, which would be fine were it not for the Tertiary Stories being blended together in a sea of noise, thereby making them almost impossible to scan through and read. Even the structure of how the headlines and excerpts are formatted and displayed are a mess. A few points:

• Too many headline font sizes
• Irrelevant author bylines are displayed in all CAPS
• Red time stamps scream for attention and are stuck after the bylines
• News items end with even less important “Post a Comment | Read (41)” content

To say this site suffers from “kitchen sink” syndrome is an understatement. What this design could use most is a delete button, but I would start with this:

• Strip out all unnecessary content – Any content (text or graphics) that is not absolutely valuable to a reader looking to consume news should be removed first.
• Document a Screen Inventory – List out all the unique content components.
• Assign a visual weight to each item in the screen inventory – ie: highest, high, medium, low, lowest.
• Create a few UI design structures (in wireframe format) to support the visual hierarchy.
• Test the UI designs with users.
• Iterate.
• Create Visual Design.
• Test the Visual Design with users.
• Iterate.
• Begin development.

I just revisited a tweet I posted 300+ days ago, about Facebook’s redundant use of comment buttons, which I felt should be removed because the buttons cluttered the screen and carried too much visual weight.

Facebook has since corrected this design flaw, which demonstrates the importance of constantly learning, iterating and improving your design.

Too often businesses still consider or treat their websites and applications “done” when they are launched. This approach is more appropriate for a printed brochure than a websiet. When a brochure comes off the press, it is done – if you want to change it, you completely redesign it and print new ones. Treating your website like a brochure is often harmful and unnecessary – except in cases where the current, live design is so painfully awful that it is warranted.

If you treat a website more like a software application, it is easier to see how your website should evolve through constant iterations or versions – rather than a complete redesign launched every 6 months to a year. If you start off with a solid, tested design, consider it version 1.0. As you evolve the design, make your next release v1.1. If you have a quick patch or bug fix to make, consider it v1.1.1. This approach will train you and your colleagues to think of your site more as a product that is in a constant state of improvement – rather than a one-off, large effort project. It will also help you get smaller updates done more quickly without needing to wait for the next big redesign.

Learn From Your Users First; Design Your Product Second
Probably the most important lesson highlighted in the video is how much IDEO researched the needs of shopping cart users before they started designing anything. Even IDEO – some of the best product designers known in the world – did not once assume that they could appropriately design the product without first learning from potential users. In fact, it turned out that the knowledge they gained directly influenced how they would design the end product. For example, did you know:

• Shopping carts are responsible for 22,000 child injuries each year. Therefore, something focused on safety may be a top priority.

• Shopping carts have been clocked at 35 MPH in parking lots. Therefore, something more wind-resistant could be a factor in design consideration.

Reflecting on this information, it may seem obvious that it would be crucial to have the knowledge before starting to design a product. Yet, time and time again we see people coming to us with product design ideas when they have done zero user or customer research. Most people seem to believe they know everything there is to know about how they want their product design, but completely miss the point – namely, their product is really meant to be their user’s product. In the video posted below, IDEO founder and chairman – David Kelly – says, “The trick is to find these real experts (users) so that you can learn much more quickly then you could by trying to learn by yourself.”

Take a look and see if this inspires you to do a little more research with your users before beginning a design and building your next product: