Here’s a pretty good resource for learning UX/UI design, if I do say so myself.

There is a difference between UI design and UX design. There is a lot of overlap though, so I’ll try to bundle them together. Here it is, in ten simple steps.

#1 Discover the problem
Far too many designers sit down to work on a new project without doing any research at all. Their thought process usually goes something like this….

No. Stop.

I’m sure your new CSS technique is wonderful but the point of designing an interface or experience is to solve a set of problems. As much as I’m partial to CSS animations and Proxima Nova, these things are more improvements to solutions than they are solutions to problems.

Stop looking at websites and wincing at misaligned elements, native fonts and ugly color schemes. Start looking at websites as solutions, solutions to problems. Problems might include:

–  Not optimized for mobile
–  Not accessible to screen readers or color blind people.
–  12 second load time
–  Value of the app not immediately obvious
–  Too many steps in sign up flow

#2 Get to know your users
It’s much easier to solve problems when you first figure out who is experiencing them. Find out as much as you can about your users before you start.

–  What is their average age?
–  What browser do they use?
–  How did they find your site?
–  What do they want from your site?
–  What does your site want from them?

#3 Learn to wireframe properly
So, now that we know who our users are and what problems they are experiencing, we can start redesigning our homepage, right?

Wrong.

One of the most common mistakes I see in UX design is the reflex to automatically start with the homepage. It’s tempting to guide the user from the homepage to where you want them to be. However, in a lot of cases, the homepage is not always the landing page. Perhaps your blog is where most users begin their journey.

Open a Google Doc. Make a list of all your site’s entry points. Now, starting with the most important entry page, take your pen and paper and start adding content. Let’s pretend we’re wireframing our blog.

So, we need a heading, the article body, the date, th…..wait. Do you really need to add the date? Does the date affect the relevance of your article? If so, add it. If not, leave it out. Keep going until you have all the necessary elements added.

Now you want to start thinking about where to guide the user. Maybe you want them to tweet your article? Maybe you want to show them related articles. Maybe you want to guide them to your homepage? Offer too many options and they will probably do nothing. So choose wisely.

Make sure every single piece of content you add has a valid reason for being there. It must serve a purpose, solve a problem. If it doesn’t, remove it.

Rinse and repeat with all other entry points. Regardless of where the user enters your site, it should be easy for them to complete their tasks and reach the desired goal.

#4 Communicate effectively
It is your job to communicate the information your users want in the quickest, most effective way possible.

Video and images are very effective forms of communication. Study well designed websites and see how they frequently use images and icons to communicate.

Don’t make your users work any harder than necessary. Most users scan websites rather than read them. Give each section of the page a heading, so users can quickly scan to the section they’re interested in. Make sure you keep your headings short and sweet. Experiment until you have effectively communicated what you’re trying to say in the simplest way possible.

Too long winded.

Better.

Bleeding edge.

#5 Guide your users
When a user lands in your app and doesn’t immediately see how it can benefit them, chances are they’re gonna leave and won’t be coming back anytime soon. Don’t base all your design decisions on how the app will perform when it’s full of data. Design the journey.

#6 Encourage your users
When a user makes a mistake, don’t just inform them in a cold manner and leave them to figure out the solution.

If you do this, they will blame you and you will lose their trust instantly. Instead, let them know they made a mistake in a polite, even perhaps humorous way and then point to the solution.

#7 Reward your users
Likewise, when your users do something right, reward them. Don’t just inform them of their success like any robot would.

Congratulate them in a human tone. Reward your users and they will feel compelled to use your product. Make them feel loved. In turn, they will love your product.

When the user’s experience is greater than the user’s expectation, trust is established. Establishing trust as early as possible is paramount to providing a good user experience.

#8 Learn the basic fundamentals (HTML, CSS, JS, Ruby, Python etc.)

Enough said.

#9 Learn visual design
Lots of UX designers think they don’t need to know about color or typography. Others say it’s a complete waste of time. It’s not. The problem is, designers are frequently using visual solutions to solve UX problems. If your users are having trouble completing the checkout process, making your buttons a little shinier is not going to help.

However, assuming you have your user flows in good order, improving your visual design will help your users trust you more.

Gaining a good understanding of visual concepts will not only empower you with the ability to design awesome buttons.

Layout, balance, alignment and contrast are essential skills when it comes to figuring out the most efficient way of organizing information on a page.

#10 Study. Study. Study.
There are countless resources out there for learning about design. Here are just a few to get you started:

Resources
Smashing Magazine
Aarron Walter (aarron) on Twitter
Paul Irish (paul_irish) on Twitter
Responsive Design
Ryan Singer (rjs) on Twitter
Chris Coyier (chriscoyier) on Twitter
www.designskool.com
CSS-Tricks
AaronRobbs (AaronRobbs) on Twitter
Designing for Emotion
Welcome | Voice and Tone
Dribbble – Popular
iOS Mobile Patterns
The Main Tap › PatternTap
Google
Designer News

Awesome Sites
http://mailchimp.com
https://yourkarma.com/
http://facebook.com
http://layervault.com/

Good luck 🙂

See Questions On Quora

I got a Kindle today and I would like it a lot better if I could read math papers on it without the equations coming out all funny.  Some of my PDFs look perfectly fine on a computer but symbols go missing when I transfer them to a Kindle.  This makes them nearly unreadable because it changes the meaning of the equations.

I understand that this is a difficult problem and it’s probably low on your priority list, but seriously, if you fixed this my Kindle experience would be infinitely better.  Thanks.

See Questions On Quora

I don’t know if this is the type of UX success story you’re looking for, but there was a highly publicized case study of “The $300 Million Button” at Amazon.com (it’s also included in Web Form Design: Filling in the Blanks).

Basically, there was an unknown conversion bottleneck in the Amazon shopping process:

1. User picks out the stuff they want to buy and adds them to their shopping cart
2. User clicks “checkout” to presumably pay for the purchases
3. A form pops up, as it does on many e-commerce sites, that asks the user to Log In or Register.

This simple form caused $300M worth of shopping cart abandonment as many users resented having to register to make a purchase (Amazon originally predicted they would be happy about saving time on future visits with Amazon’s patented “one-click-checkout”), and others couldn’t remember if this was their first visit to Amazon and became frustrated with each failed login/password attempt. The point: no one wanted to click “Register”.

This, despite the fact that the registration form didn’t ask for any additional information that wouldn’t already be needed to checkout with. Additionally, even users who had registered in the past stumbled on the form when they forgot their email address or password.

The fix they came up with was to replace the “Register” button with “Continue” and a message that read:

“You do not need to create an account to make purchases on our site.  Simply click Continue to proceed to checkout. To make your future  purchases even faster, you can create an account during checkout.”

This little change resulted in a 45% increase in completed purchases, and for the first year, the site saw an additional $300M in revenue.

This is one of those classic marketing parables that reminds you to test everything and test often. Don’t just go with “common sense” or your gut feeling. You might not think that having the shopping cart on the right or left would make a big difference, but it can and does. And it can even have different results on different sites.

See Questions On Quora

I do believe that AirBNB’s “Neighborhoods” signals a significant change in the UX of the site and the service as a whole.

On the surface, you could say that AirBNB is competing with hotels, motels, and hostels in the “places to stay when I am traveling” business. This may be true, and it is certainly how AirBNB started out from a UI/UX perspective.

Hotels and the like are designed to serve the needs of a particular type of person: someone who is traveling for a specific reason, in most cases for a short period of time. Perhaps they are in town for an event of some sort, or maybe they have come to the new place on a business trip. In these instances, the person did not actively choose the place they were going, just ended up there due to proximity or because outside forces sent them there. For the most part, these people don’t know much about the city they’re staying in, and don’t care to. They probably want a clean, warm hotel room that is as close to the thing they have to do as possible, with easy access to the airport. If they’re feeling adventurous, they’ll ask the concierge to point them to a good local spot for dinner. Hotels, and therefore hotel booking websites, serve this population well. If you pay attention to the design and layout of these sites, you’ll see it reflected in their hierarchy and in what bits of information they choose to highlight.

I would guess, with no real evidence, that AirBNB has discovered that many people who are using their service are not this kind of traveler. I believe their new interface is designed to more closely align the tone of their service with the tone of their customers.

The “Neighborhoods” feature measures the places one might stay more qualitatively and less quantitatively. AirBNB chooses to highlight large photographs and descriptive tags about each neighborhood, as opposed to miles from the airport. This sort of approach is much better suited to casual travelers, vacationers, and a new breed of hipster nomad. These people ARE actively choosing the places that they want to go, so their decision is not as simple as the aforementioned business travelers. Additionally, they may be traveling for long spans of time. Very few people would be able to stay in a hotel for a month without losing their minds, but that is not the case with an AirBNB listing. If you’re scouting out a place to live for the summer, you certainly want more information than a simple hotel booking site provides. The pictures of community members, quotes from locals, and rich storytelling on each neighborhood page is a plea to travel in a meaningful way, not simply stay in hotels and hit the tourist traps.

Overall, I’m glad to see AirBNB taking this approach, and I think it will serve them well.

See Questions On Quora

“Simply increasing the content height” is exactly why the display is larger. The iPhone 5 is better for reading and writing than any previous iPhone.

Here are some examples:

• When writing, I can see a whole paragraph instead of sentences
• When searching w/ the keyboard visible, I can see 5.5 results instead of 3.5
• I can see 6 emails in my inbox instead of 4
• I can see 6 tweets at a time instead of 4
• I can read a whole additional paragraph in an email without having to scroll

If there’s one thing that I hope designers and developers take away from the increased display size, it’s that content is everything and the UI should do an even better job of getting out of the way.

See Questions On Quora