Kyle Wiebers

Let’s face it, improving user experience is a never ending job that usually leaves me grabbing at straws. I am always looking for new sources of inspiration. Recently I tried a new holistic approach for finding user experience inspiration that led to some success for a project I am currently working on.  I hope that these new sources of user experience inspiration can benefit you as much as they have for me.

Get Lost

One of the first things I did when I hit my UX barrier was to try something new to observe how I experienced.  During this process, I got lost which was much more beneficial to me.  I learned what type of information I looked for when struggling to realize where I am.  This experience was so unique, I discussed it with a few friends and fellow developers to see how unique my thoughts were.

Go to a Museum

I’m unsure what the web has done to my mind and way of thinking, but whenever in a new environment I consciously recognize my user experience within the environment. I realized how helpful this was when I went to the New York City Museum of Natural History. Never have I been to a physical place on Earth that serves so many people and has such poor navigation aids.  I recommend every Web UX Team go to a large museum or complex building and look at it through your eyes and then watch other people experience it, it’s like usability testing on human behavior.

People Watch (or talk to them)

This is the equivalent of usability testing the environment.  Decisions shaped by behaviors is interesting to witness firsthand.  This should be your goal when you people watch.  Find out why people make the decisions they do in their environments.  I found the best places to conduct educational people watching are places where decision making occurs.  Watching people struggle to make a decision is not only entertaining, but educational.  Observing how different people reason through their decision process can give you priceless knowledge of the human psyche.   Leverage this knowledge when trying new conversion strategies.

Use New Web Applications

Innovation is happening everywhere on the web.  I applied to all the betas I could and used new up and coming web applications thoroughly to see how the app flows for new users.  After 30 minutes of use for multiple applications I took away many different “pieces” of user experience that I could weave in with my current project.  Note: I’m not advocating for directly copying web applications experience methods verbatim, but you should be aware of them and how you can incorporate pieces of the experience onto your application or site.

The Good Stuff

Take the ideas presented in this post and use them as a base when looking for new sources of User Experience.  I’ve seen designers limit their sources of UI/UX inspiration to just other web based applications.  I’d advocate that you use these as a base and take inspiration from real life experiences to make your application feel more natural to users.  Incorporating elements that capture real experiences that users can have make your application more convergent and you may start the next big UX trend in the process.

User interaction feedback is quite possibly one of the most overlooked design element throughout the web.  Feedback is a vital piece of the user experience puzzle.  Without interactive feedback, the user’s perception of the current state of the application may be skewed leading to a poor user experience.

Consider the above example with the elevator “door close” button – when you push the button, nothing lights up or registers that it was pressed. The door eventually closes, which would happen if the button would not have been pressed.  Some will argue the door closing is enough feedback. These are the same people who will have an unpolished experience for their web applications.  In this case, the best way to give interactive feedback would be to have the button light up and fade out as the elevator door closed.  Thinking about real life examples of user interaction feedback will give you tangible examples when polishing your application’s rich interaction.

Feedback Elements

There are multiple different types of feedback elements.  Feedback elements normally correspond to user interaction states; loading, confirmation, transition, error and more, but I will focus on the aforementioned states.  It is important to let your user know what is going on at all times with web applications, especially at the point of interaction.  Many of these are already done on most successful web applications, but are overlooked on some applications I’ve used.

Loading

There is a simple rule to cover this state – when data is being loaded, let the user know with an activity indicator.  If no feedback is provided to the user, he/she will be left guessing whether the request is happening or not.  Usually when this occurs, the user will click to initiate the action a second time causing more strain on servers, a longer wait time for the user and poor user experience.

Confirmation

The ideal way to provide confirmation feedback is when the interaction occurs, at the point of interaction. For example, to confirm a web form submission, the best way would be to notify the user next to the submission button or at the bottom of the form.  I’ve seen confirmation messages at the top of forms which aren’t always noticed by the user.  An example of great implementation would be eBay and its transaction and bidding confirmations.

Transition

The transition state occurs in between states and is a key interaction that needs feedback.  The most important transition which needs feedback is user sign up.  This state of transition for a new user can be incredibly confusing, and providing great transition feedback will make the difference between users coming back and never returning.  Kevin Rose of Digg recently discussed its work on a user onboarding process.  This process provides the necessary feedback and will soon become the standard for new user transition.

Error

Errors are the most common user state that requires feedback.  This state normally has the best feedback provided to the user.  Although the reason for the feedback is normally for data sanitizing purposes, the implementation is usually spot on.  This feedback is normally broken into two pieces, notification and indicator.  Notification is the feedback that is visible and evident to the user, and indicator feedback shows where the error has occurred.  The key to this element of feedback is to include both parts.  Both parts will clearly communicate to the user without them needing to think.

The Good Stuff

User interaction feedback is a crucial piece of user experience that should not be overlooked.  Breaking down interactions into interaction states can help you identify where feedback needs to occur.  At the very least, loading, confirmation, transition and error states should provide feedback to the user.  For some examples of feedback done right, I’ve compiled a great compilation on Ember.

Do you ever find yourself stuck on how a particular user interface element should look? This happens to me two to three times a day – until I learned about design patterns. Design patterns are useful elements to improve the speed of design and wireframing. Libraries like Pattern Tap, Yahoo! Design Pattern Library and Ember App are now large repositories of best practices for user interface elements. Not only that, but they also help reinforce user’s expectations when they are used across the web, thereby improving the overall usability of your site.

Tools

Yahoo! Design Pattern Library is part of the Yahoo Developer Network and is a great repository of quality design patterns. Their design pattern contains some unique sets such as; Talk Like a Person, Leaderboard, and Your vs. My. Patterns are not only organized into sets, but also categories. Categories are great to browse through depending on what you are developing. If you are developing a web application, check Rich Interaction patterns. If you are developing a blog layout, check out the Layout category.

Pattern Tap is updated much more frequently than Yahoo! Design Pattern Library in part to the user community around this site. Pattern Tap allows you to register, create your own custom pattern sets. Pattern Tap does have a great user community going for it, but this can also be it’s weak link. If you browse through their pattern sets, you’ll see that quality is varied throughout the sets. Some patterns are excellent while others are downright abysmal. This wide range of quality is due to the user community.

Ember is a social tool that allows you to view submitted tagged LittleSnapper images throughout their entire user community. This is by far my favorite tool due to its integrated experience with LittleSnapper. LittleSnapper allows you to keep a local repository of design patterns and Ember shares and combines this with other users of LittleSnapper. If you look at Ember, you’ll notice that many of the tagged images relate to design. Howerve, Ember suffers from the same problem as Pattern Tap with over saturation of patterns and dilution of quality but not to the same degree.  This is countered with the ability to follow users and see updates to their tags.  This feature is what puts Ember far and above the other design pattern libraries.

Usage

Design patterns can be used many different ways. I’ll cover inspiration, wireframe assistance, and polishing up the experience your current website below.

Spending thirty minutes browsing through either PatternTap or the Yahoo Pattern Library should speed up your design time and be well worth the investment. Design patterns can help you conceptualize how you want your final product to look. You can also choose patterns which you feel would be perfect and save them to always give you something to review in times of design need. These libraries can also help you pound through mental blocks and find a creative solution to the problem.

Where should my navigation be? How large should image x be? How much space should my contact box be? These are all questions that can be answered during a design’s wireframing. Using design patterns, these questions can be answered faster. Going through these repositories will give you a visual way of thinking how your design should be, instead of just a conceptual idea. Design patterns can help you decide placement and size of UI elements, how to handle different types of user interface elements and much more.

So you completed this kick ass web application and everything is going smoothly until one day you notice your conversion rate on signup drops. You feel it’s time to revisit your signup process. Here is where design patterns can assist you. A quick look on Pattern Tap, and you already have a ton of possible methods to assist your improvements. Let’s say you notice specifically that users are getting a high fail rate and unable to discern what they did not do properly. Head over to the Yahoo! Design Pattern Library and look at notifications, and you can start improving this aspect.

The Good Stuff

In short, design patterns matter because you are designing around your users expectations. Using the tools that are out there, you can get a leg up on fellow designers by building your own pattern libraries. Integrating design pattern research as a part of your initial design process will definitely lessen your design time while improving the quality of your deliverables.

My first adventure into creating icons for a personal project has come and gone and left me with some things I want to share with you.  I’ve created round icons for Delicious, Ember, RSS, DesignBump, Skype, StumbleUpon, LinkedIn, Digg, Twitter and Facebook.  I’m hoping to use these to create a virtual business card I can include in my new design for this website.  Please feel free to take the set, modify the included Illustrator file and use them however you want.

They are licensed under a Creative Commons 3.0 Attribution License.  If you are looking to find me on any of these appliations, my pages are below.  Give me some feedback and enjoy!

• Delicious – wiebers
• Ember – wiebersk
• Skype – wiebersk
• StumbleUpon – wiebersk
• LinkedIn – Kyle Wiebers
• Digg – wiebersk
• Twitter – wiebersk
• Facebook – wiebersk
• DesignBump – wiebersk, this one is not shown but is the same as the stock DesignBump logo.

Simplecons

Download the set – Simplecons v1.0

So, think you are ready to take on the web world and become the next freelance all-star? You better learn fast that you are swimming with sharks ready to devour you without even blinking. Before taking the plunge, be sure to polish up these six crucial skills.

Passion

This one should be obvious, if you don’t have passion for what you are doing, change what you are doing.  Passion is what I refer to as the light at the end of the dark tunnel.  You will have to have passion to get you through the rough spots.  There will be times when it’s 4:00am and you are stuck trying to get your navigation hover state to look exactly how you want it.  Passion is will help get you through the bad times and amplify the feeling during the good times.

Pursuit of Knowledge

A curious nature will be a large asset to web developers and designers.  Methods come and go in waves and your goal should be to stay on top of or ride the wave and get back out on the next one.  New methods will always be developed to solve an old problem, new code libraries will come that will solve problems faster, new things come as time goes by and wanting to actively learn these will only help you out in the long run.  Knowing different ways of solving the same problems will allow you to see a problem from different sides giving you the upper hand on choosing the best solution.  It will also help you when communicating with buzzwordy clients who think they are experts, but are just familiar with trends in development/design.

Emotional Intelligence

I have talked to too many clients who say they are worried about working with freelancers because  freelancers can’t work well with people.  This connotation is negatively reinforced by freelancers who can’t work well with people and it turns into one of those situations where the bad people ruin it for the good.  Having emotional intelligence helps out the case for the good people.  Emotional intelligence plays a crucial role in your ability to communicate and work effectively in a professional environment.  If you are unable to tell what a client (or potential client) is really trying to say to you, then you are going to be hard pressed to find any work.

Work-Life Balance

This is the one skill that I struggle with the most on this list.  Being a college student with a full time part time job and then working on freelancing and developing this blog seems to take up the majority of my time.  Work-life balance is key to developing yourself as a person and ensure that you do not become your work.  Speaking from experience, as my work-life balance gets better the number of mental blocks I hit decrease and I seem to have more of the eureka moments.  Work-life balance is definitely a hard skill for lots of people in the industry, but a great work life balance will go a long ways for you.

Business Savvy

Business savvy freelancers are always more successful than their counterparts.  Understanding who are the influencers and decision makers for web content and how to grasp business politics in a quick manner are skills that will go a long ways.  You’ll find that as you work with different clients, some skills you learn are non-transferrable and will only apply to those type of clients.  Business savvy is most definitely a transferable skill that will work with bull headed law firms or small private colleges looking.  Being able to communicate what you are doing effectively in “english major” terms will be a skill that should not be overlooked.

Caffeine Addiction

Lastly and almost as important as passion, you must have a caffeine addiction  You really don’t need one of these, but it will help you as you find yourself doing work later and later into the night.  Many other freelancers I know swear by either a specific energy drink or coffee to get them through work sprints.

The Goods

I hope you work on polishing up these six skills before you start freelancing.  Having the opportunity to develop many of these skills through other real world experience was valuable to me as a freelancer.  What skills do you feel are valuable to tune before you enter into your own freelance business?  Let me know in the comments.

Welcome to my first weekly blend. This is going to be a consistent weekly post every sunday night reviewing the blog posts/web musings that have peeked my interest throughout the week.

The Blend

This week was interesting between the release of Google Wave and lots of different web design blogs with quality posts.  I’d categorize this blend as 2 parts inspiration, 1 part theory, 1 part tutorial, and 2 parts fun.  I’ll go into the detail of this concoction below.

Inspiration

Absolut Vodka consistently has well designed ads with a consistent message.  Over at amog they have a great post that showcases different Absolut ads over time. http://bit.ly/sf3G8

Here's an example of one of the Absolut ads

WebDesignDev is a great blog that I just started to subscribe to with lots of inspirational posts.  This past week they had a great post which listed 26 Excellant Dark Website Designs.  If you are interested in different types of designs and how color influences design, this post is a must read.  http://bit.ly/3lm0ZR

Here's an example of one of the dark websites

Theory

Inspect Element is another blog I recently subscribed to that has some excellant content.  Inspect Element mostly focuses on theory and design principles of the web.  They recently started part 4 of a 4 part series – The Principles of Good Web Design: Content.  Throughout this series, Inspect Element has applied different design concepts to the web in an easy to digest way.  This is a must read for people who are just getting into web design (like me).  http://bit.ly/3ljlW5

Inspect Element

Tutorial

TutorialZine recently published a tutorial on how to make a slick content slider using jQuery. This is a great intro for developers looking to get into jQuery and the possibilities of this amazing framework.  .  http://bit.ly/2wA5vP

Making a Slick Content Slider With jQuery

Fun

There were plenty of fun things out on the web this week.  A lot of talk was over Google Wave which went into closed beta.  I unfortunately did not receive a invite so I’m unable to give a first hand review, but I have the next best thing – Lifehacker.  Lifehacker did a detailed overview of Google Wave which is worth a read if you are interested in the next generation of collaborative web  apps.  http://bit.ly/Nozco

Lifehacker - Google Wave

The final part of fun was an entertaining workflow diagram of whether or not you can be a web designer from Six Revisions.

Can You Be a Web Designer?

Thus concludes the Weekly Blend for this past week.  Let me know what you think in the comments or what you want to see for next week.