Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 27 2013

14:01

Web Design Concepts to Entice User Interaction

Advertise here with BSA


Landing pages and social websites thrive on user interaction. It is the grinding mechanism which keeps people visiting your webpage over and over again. How you design an interface can say a lot about how people should maneuver through menus, links, buttons, and other similar page elements. Each solution is different and there certainly isn’t any prominent correct answer.

In this article I want to go over some more popular web design concepts for creating alluring interfaces. You want visitors to be swept away by the design and practically fall in love with your website. A beautiful design coupled with a beneficial experience is what can help your web application or website layout stand apart from the rest.

Relating to the Interface

The key to any enticing interface is to make the user wants to interact with your website. Obviously the primary reason should be their interest in your product or service… you want people registering an account because they actually want to. But it helps to give them a little incentive by designing catchy interfaces which practically sell themselves.

pinterest create a new board form ui design screenshot

Consider the newer photo sharing startup Pinterest as one example. All of their forms use big readable typography with CSS3 gradients on the buttons and input fields. Also the glowing borders are a nice touch to inform the user which field is currently highlighted. Even more importantly is that all the page elements blend so nicely into the website color scheme. Interacting with forms on Pinterest feels completely natural – as it should be on any website.

tumblr website buttons input fields new post screenshot

Tumblr is another case example where the buttons and input fields have been carefully crafted to blend nicely with the layout. The uniform posting box looks very similar for any type of content including photos, videos, or even plain text. The more you can blend forms into your website, the more relatable they will appear to your visitors.

By creating this natural connection it evokes a sense of safety and commitment. People want to fill out your forms and interact with the page because the elements don’t appear like they’ve all been thrown together at the last minute. Put in some TLC to your website’s form design and I promise it will pay off in the long run.

Design Elements that Pop

Similar to relatable interfaces we also want a design which can practically jump off the page. To phrase this another way, visitors should be able to determine which page elements are interactive and which ones aren’t. You can accomplish this task through all sorts of different methods like border styles and box shadows.

rightsignature homepage layout css3 design screenshot

The homepage design for RightSignature is one good example because of their advancing design trends using CSS3. The top navigation and right sidebar areas remain fixed on the page, as they also include the most interactive features. The visitor can scroll through all of this information while simultaneously registering for a new account. Also take note the registration form only requires two simple fields for the username and e-mail address. A lower barrier-to-entry will get a lot more signups because it takes less time and less hassle from the user’s perspective.

dribbble textured popular shots layout design

I am also a big fan of Dribbble’s layout because of the many design changes which have taken place over the years. Dribbble has always been using a very similar layout style, except the colors and textures have been tweaked ever-so-slightly. You could even incorporate the idea of A/B testing into your website to determine which colors or UI designs would be most appealing to your audience.

Readable Content

It might go without saying, but readability is a huge factor to user interaction. People keep using content-based websites and social networks because of the ability to skim content and quickly recognize its purpose. Consider a homepage dashboard with all the latest news from a user’s feed. How can they quickly determine between a website blog post, a user status update, or a new photo album?

medium blogging posts users homepage layout screenshot

The new micro-blogging platform Medium has grown very popular in a short period of time, especially among tech-lovers and startup enthusiasts. Each blog is made to conform into Medium’s typical layout design which utilizes big typography – nice and easy to read even at a distance from the monitor. This not only makes people want to write more articles, but it also gets readers more willing to stick around and read through a post if the content is easily legible.

etsy products list web design interface layout

A somewhat related yet different circumstance may be found on Etsy. People come on here looking for custom hand-made trinkets or neat little gifts for friends. The product gallery is designed in a way that you can quickly check out what is for sale, how much it costs, who the seller is, and other types of related items for sale. It is one of my favorite growing marketplaces because the design is so eccentric that it immediately catches your attention. Also the products are generally unique and often not sold anywhere else, so it’s a marketplace of rare items with an extremely intuitive process for buyers and sellers.

Points and Profile Badges

Not all websites have the option of creating profile pages for each user. This is typically common amongst social networks and communities which thrive on user-driven content. Applying unique rewards such as badges or points will get people much more interested in using your product. Stack Overflow is one such example where you can earn points by linking to threads, answering questions, or even asking questions of your own.

github user profile kyle bragger screenshot stats repositories

Another great example can be found on the Github profile pages. Here you can see every repository created by a certain user, along with their work done in other people’s repositories. You can also find stats like their follower count and the total number of starred repos. Point systems work best if you build them on top of the existing website functionality. It is a motivator which gets people pushing to contribute more content and grow their profile on your website.

Uniform Layouts

One final piece of advice for improving user interaction is to get all your pages designed in the same fashion. Uniformity is very important as I outlined in the first section of this article. As people use your website more frequently they become accustomed to the interface. A uniform design helps people grow to expect certain interfaces to behave in a certain way, and people will gradually learn all the little tricks of how your website works.

reddit social news community simple design homepage layout

Possibly one of the largest case study examples would be on Reddit. This social news community allows people to register an account and submit, vote, or comment on news stories. It has scaled tremendously over just a few years as subreddits have grown proportional to the userbase. As more people get comfortable with how the system works, it becomes easier for them to engage deeper into the website and contribute even more content. Think about this concept for your own website and how you might implement uniform design techniques to improve the overall user experience.

Closing

These are just some examples of design trends you may try in your layouts. I have played with a number of fantastic web applications, and the best ones have always been designed with the user in mind. Focus on the end user and consider if your webpage is optimized for the easiest frontend performance. Additionally if you have similar ideas or suggestions on usable interfaces feel free to share with us in the post discussion thread.


Advertise here with BSA

July 25 2012

13:30

How to Build a Killer User Experience Team

We are in an era where the term ‘User Experience’ is still evolving and enterprises are still figuring out how to fit this piece of the puzzle into their organization’s structure. The field is new and filled with lots of uncertainties for the decision makers of an organization, but it is definitely promising and filled with tremendous opportunities!

Being a User Experience designer right now is an interesting and rewarding experience for the fact that the scope of exploring unknown lands is infinite and I feel proud to be one. The Internet obviously has a major role to play in the upkeep and growth of this field, and it has lived beyond its expectations up to now. There is a lot of stuff happening around UX nowadays. There are UX conferences, more blog posts explaining the need of User Centered design, and people surely are getting a better picture of the topic, day by day.

While this really is great news for us UX designers, we have miles to go ahead until we reach the pinnacle, where UX design will be considered most pivotal in a system’s design and development process. For this to happen, inclusion of Experience design in an enterprise scenario should be justified, i.e., UX should yield results in terms of tangible values like increased hits, high user conversion rate, improved task completion time and so on. I work for a large enterprise where people don’t have time for elaborate UX sessions and detailed demos on the benefits of embracing UX holistically. All that matters is the revenue, and it is the single tangible entity that defines the importance, or rather, it is what defines whether something deserves respect or not. Fortunately enough, the team which I am a part of within a large enterprise took the bold step of taking UX seriously and demonstrated the benefits of doing so, in our own way, to the top management.

This post makes use of my personal experience and wisdom that I have collected over time working in large enterprises, and I will try to present a detailed analysis of key points which will be decisive towards the making of a User Experience team, that delivers.

What is the need of a UX team?

The scope of this post is confined to large enterprises where revenue matters the most, where things are already working fine (in terms of revenue) and where there is very little awareness on the need of a good UI. In other words, where the word ‘user’ is often forgotten and has taken the backseat! The result will be ill-designed applications with significantly diminished user experience, insanely long task completion times and a huge dent in the reputation of the company, when it comes to the quality of interaction and the overall experience with the product. Though these negatives are obviously visible, people never realize the missing link, the reason is being unaware of the importance of a good UI, less tech-savvy customers who never demand a better experience and, most of the time, simply the lack of proper resources to get the job done!

Push for a UX team here! The challenge lies in convincing management, that this is the solution which connects the dots effectively. It’s just the beginning. Challenges will come like a landslide upon you, and only perseverance will work.

Starting to build the team from scratch

I am not a perfectionist, and I fully understand that there is no ‘perfect’ team. But without understanding what you are looking for, you will never be able to identify if you have found the right person or not. A great UX team is not one which is solely comprised of highly qualified or certified professionals, but one with  productive, passionate and positive thinkers who have the right skills. So it’s not only important to identify passionate people, but equal weight should be given to identify the right balance of skillsets, before you go on a recruitment drive. My understanding so far on the right ingredients for a UX team has worked out well and I take that gut feeling forward.

1. Bring in the experts

Like every other trade, there is no replacement for the wisdom that experience brings to the table. Experienced and seasoned professionals are an integral part of any team. Make sure you have experienced professionals who are self-driven. In many cases, people land up recruiting misfits just because either the hiring team didn’t have an in-depth understanding of the required profile, or the process of evaluating the candidate was not effective enough. This is where the importance of effective recruitment process comes into play.

Be focused on the specifics of skill-sets you are looking for when you set out to hire a person. For example, while recruiting a front-end engineer, look for his preferences of tools and techniques, which will give you a better first hand idea on his expertise and way of working. This has worked for me most of the time. My point here is, make your recruitment process more creative and find out your own ways to get great talents aboard. Also remember, always be on the lookout for better talents than you, and create a team of greats and not a team of dwarfs!

2. Fresh people bring vibrancy to the team

Often, in my experience, freshers (trainees) are the most underestimated resources in a team. I believe if you are recruiting a passionate and enthusiastic fresh soul to the team, the amount of positive energy and raw talent that these people bring into the team is unimaginable. If harnessed and directed in the right way, they can be one of the best sources of productivity for a team. Provide clear direction to the trainee, clearly set goals and checkpoints along with continuously motivating and directing them to reach the target and let them grow to their strengths. The key lies in identifying their interests and letting them grow with those interests and passion. The dividends being paid back will surprise you.

3. Certification is not the ultimate benchmark

Professional education/certifications definitely is an added value but not a necessity. Personally, I have worked with people with certifications/design education and also with passionate self-educated professionals, and most of the time the quality of the output was directly proportionate to the level of passion displayed rather than the education/certification. My point here is, let’s not take certification as a benchmark while recruiting an experienced professional. As I mentioned above, there are gems waiting to be discovered, and the only way to find them is to adopt some really creative recruitment methodologies. This is really important for a domain like Experience design, where passion is paramount.

4. Referrals might not always work – screen thoroughly

I decided to include this point based on some of my bitter experiences in hiring referrals. The ideology behind bringing referrals onboard is to increase the coordination and productivity of the team, assuming that people will find it encouraging to work again with their ex-colleagues or friends. But this might not always work unless you have a solid screening process in place. Blindly roping in a referred candidate can be suicidal at times. I am not completely against referrals, but my point here is to never take anything for granted when it comes to building a team that matches your expectations. Backfires in hiring can prove fatal for the team in the long run, and can seriously hamper the team spirit and productivity if not dealt with in the right way.

5. Never go with the numbers – assess based on the quality of work

Numbers can be deceiving and may not necessarily be proportional to the productivity/quality expected. You might come across a beginner who does magic with code while you may also tumble upon a veteran with no basic knowledge at all. So lets come out of the number game and give respect to those who deserve to be on the team.

6. Make training/sessions/workshops mandatory in the appraisal cycle

Creative designers feed on constant inspiration and that is one single thing that can drive the show forward. It is essential for a design team to conduct frequent knowledge sharing sessions, and exchange ideas. Make training sessions and workshops mandatory, this will help bring fresh inspiration to the team and will promote sharing and bring a sense of pride.

Key Roles in a UX team

While I am not a veteran professional with many years of experience, I’ve had some career defining moments where I have been closely associated with teams struggling to establish the right balance in the team when it comes to Experience Design. The diversity in my career (a video post-production artist to a web graphics designer to a front-end engineer to a User Experience enthusiast) has been most helpful for this state of mind. It has enabled me to look at my team from a variety of perspectives and identify shortcomings and positives. From my limited experience, let me suggest some key roles which can make the difference in a User Experience team:

1. User Experience Architect

The User Experience Architect is the team’s visionary. Every product thrives on its own vision, and unless the vision is clear, the influence it has on a user’s mind cannot be directed in the intended way. Designing a good experience is meticulously planning a chain of events in which the users are involved, and helping them find what they are looking for easily and smoothly. A UX Architect’s job is to carefully sandwich the vision into the product, while helping the user to be happy and satisfied in using it.

  • Should have extensive experience in driving the Experience design processes, as they might have to make key decision just based on his past experiences and wisdom.
  • They should be passionately associated with a product’s life cycle.
  • Knowledgeable in UX best practices and processes.
  • Ability to generate a User Experience Document based on personas and scenarios.
  • Deliverable will be in form of User Experience Document, Personas/Scenario details and a close association with the team at every stage to make sure the product is shaping up as they wanted.

2. Information Architect

The Information Architect is the authority when it comes to the information design of the product. A skillful Information Architect should be able to cruise along when presented with the challenge of organizing the information in a huge data-driven application with complex scenarios and screenflows. He will be responsible for laying out information and plays a key role in deciding the screen flows and interaction patterns to be followed.

  • Should be an expert in various wireframing tools like Axure, Omnigraffle, Visio.
  • They should be a master of IA techniques like card sorting.
  • Extensive knowledge in standard UI interaction patterns.
  • Deliverables will be wireframes, screenflows, sitemap and interaction design documents.

3. Visual designer

The role of a visual designer is crucial to a UX team’s success. Though the efficiency of a product is not skin deep, the skin does matter. The UX vision of a successful product is driven by a visual designer. While there will be numerous apps and services offering the same service or experience, the first impression and the visual aesthetics plays a very important role in carrying forward the experience of the product.

  • A visual designer should be a magician when it comes to color combination, typography, visual hierarchy and importantly should be a great communicator of ideas through whatever medium available, as design is all about communicating ideas.
  • Madly passionate about visual communication, colors, type and aesthetics.
  • Share the passion and ideologies of the UX architect and carry forward the UX vision the same way as he would have imagined. This is a key requirement for a UX team to click, and this is often ignored and overlooked upon.
  • A pixel perfectionist, and a critic lover.
  • A Photoshop rockstar.
  • Should have an open-minded approach to design, questioning each design decisions, and contributing to the Experience of the product in his own way.

4. UX All rounder (UX+ VD+Frontend engineering)

From my diverse career experience, this is a role which I feel will make the difference for any UX team. Someone who understands each stage of an Experience design process and who will be able to connect the dots seamlessly across each phase of the Experience design  process will be an asset for the team. They will make sure that the UX vision of the product doesn’t get blurred across each phases. The primary job of this person will be to be involved in each phases of the Experience design process, collaborate with the experts of the respective phases (eg. visual designer, while in the designing phase, information architect during the wire-framing phase and front end engineer during the prototyping and front end development process) and make sure the product gets transitioned between them smoothly. This includes guiding the visual designer in authoring graphics/UI elements which doesn’t fall out of the scope for a front-end enginee, or which is completely non-implementable from a front end development perspective.

  • Diverse and extensive knowledge in UX practices, Visual design tools & techniques
  • Front end development concepts, tools & techniques
  • A trend watcher
  • Should be on the bleeding edge of all updates, tools and techniques
  • A good communicator, and importantly a great team player.
  • The key is communication in this profile, as this person would be working closely with almost all members of the team.
  • Should have a strong hold on the concepts of each phases, and his/her experience will be put on test, while team discussions, as this person holds the baton for making convincing statements to bring the team to a common understanding and to clear out conflicts that are bound to arise in each phases of the Experience design process.

5. Front-end engineer

This is a key role in a UX team in my opinion, and I am surprised at the level of ignorance some enterprises (at least in the country I work in) show towards this role. Front-end development is when the product jumps into the first phase of life after much conceptualization and designing from other members of the UX team, and for that matter, this is the most vital part of the Experience design process. Front-end engineer’s responsibility will be to give life to the concepts and mockups and make them work on a browser or any other medium on which the product is expected to work on. The challenge lies in translating the ideas which are in the form of wireframes, documents and visual mockups into a working prototype. Working closely with the ‘UX all rounder’ will yield good results for a front-end engineer. In short:

  • a front-end engineer brings together the 3 forms of an application, namely content, presentation and behavior.
  • A rockstar in HTML/CSS/JS based techniques.
  • Should be a cross-browser compatibility samurai.
  • Should give attention to detail and should be able to appreciate design.
  • Well versed with optimization and performance boosting concepts and techniques.
  • Should have a solid understanding of the technology behind an application in which he/she is working on.
  • A sharp learner of new techniques and tools.
  • Ability to bring about a set of processes and standards, and in turn institutionalize the whole front-end engineering process within the organization at large.

6. Content Strategist

It is high-time we start thinking of content as one of the important parts of a product. The role of a content strategist has been a topic of discussion for a long time and the term ‘Content strategy’ itself is evolving. As an Experience design team, content should be considered as an important part of the product, be it web, mobile or any other medium. A content strategist will be responsible for shaping up the ‘tone of voice’ of the product. He sets the tone of the product by carefully planning the content. Here the content is not only text. It refers to whatever element used to communicate with the user. A content strategist might even have a call over the design element that the visual designer created, because it communicates something to the user. It is important to convey the right things in the right way to the user for a consistent ‘tone of voice’.

  • A passionate writer and communicator.
  • Should have impeccable command over the language and grammar.
  • Exposure to latest trends and developments in the web world will make a content strategist more desirable.
  • Ability to appreciate design.

7. Usability Expert

They are the Nielsen and Norman of a UX team. With much established techniques and tools available a qualified usability expert is always an asset to the team. They are responsible for assessing and making sure the product ships out as a usable unit. Most often, usability comments are best consumed at the initial stages of conceptualization, as keeping the very basic usability issues in mind can help the team move in the right direction. Also methods used to conduct user research and similar exercises can prove to be life-saving for highly sensitive which are:

  • Extensive experience in conducting usability tests and other usability related tasks.
  • Strong understanding on the working of the product, from a user’s perspective.
  • A good communicator.

Building a productive team takes time, dedication and lots of effort. Bringing in just the right skills may not always work. It is always important to bring in a balance to the team, by smartly utilizing fresh talent, setting goals and enabling each of them to have a sense of belonging and ownership within the team. While everything above is based on my experience in the field there are lots of other factors that some into play while building a team that delivers. The attitude, the passion, the thought processes, everything can make a major difference. Personally I believe in having members driven by passion and interest in the field, rather than just professional and academic achievements, and this has so far helped us in bring the right blend of talent to the team.

These are the words of wisdom which my diverse career has gifted me with. I would be excited to know more about this topic from experts and passionate UX practitioners. Share your thoughts, experience, and suggestions on building a rocking Experience Design team!

July 19 2012

08:13

The Importance of Creative Design For Mobile App User Experience


  

Just this spring, Apple revealed that more than 25 billion apps have been downloaded from its App Store. Add to that the 10 billion Android Market downloads announced at the end of 2011, and you’re looking at more than 35 billion apps downloaded cumulatively across both platforms. Clearly, consumers love their smartphones and the mobile apps they can get on them – but they can’t love all the apps.

With over a million different apps on the market, the competition is fierce. So unless you’re Facebook and pretty much guaranteed a ubiquitous presence on smartphones everywhere, you have to figure out how to make your app stand out. Having the next big idea might do it, but with the marketplace so saturated, that’s becoming increasingly difficult to do. New competitors are instead focusing on improving or redesigning existing ideas to make a better app.

One of the most effective ways of getting an app to stand out should be obvious, and yet many app developers don’t spend nearly enough time on it: creative design. What an app looks like is the first aspect people notice about it – even before they download it, and certainly before they test it out and see how it functions. That initial visual impression affects the entire user experience and will likely determine the ultimate success of an app.

If you’re doubtful, just look at Apple. Many people don’t realize that, despite now being a leader in the industry, Apple was actually not the first company to provide a mobile operating system or mobile apps. Before iOS, there were the likes of Palm OS, Symbian, Windows CE, and BlackBerry OS. And yet, like with almost everything else, Apple quickly surpassed the competition in the mobile market. In large part, this was because iOS simply looked better.

It set completely new standards for the role of creative design in the mobile app user experience arena; something that has always been one of the most basic foundations for all Apple products and services. And successful app developers have been smart to take a cue from the giant whose platform they’re building on. If you take a closer look at some of the top apps, you’ll see they tend to follow three general guidelines:

Forget Web Design

Mobile design comes with its own set of rules and expectations, so when you’re designing for mobile, don’t let the standards of web design dictate what you do. Sure, you should maintain consistency of look-and-feel across devices and stick to brand standards, but you also need to keep in mind conventions that have been established for mobile operating systems.

A great example is how Southwest adapted its website to the iPhone. The mobile app incorporates design elements from the site, but has clearly been created to provide the optimal user experience on a smartphone:

Keep it Simple

One of the biggest trends in mobile app design today is simplicity. Clean, intuitive interfaces that are easy to navigate and don’t try to be flashy. “Less is more” is not a cliché in mobile app design, but a standard.

One of the best examples of this is the incredibly successful Instagram, which combined a great idea with a simple, easy-to-use design and intuitive functionality. Many new apps are doing the same thing, regardless of industry. Two examples are the XFINITY TV and Medi-Weightloss Clinics apps below.

Make it Fun

Have you ever heard someone say they don’t like fun? For mobile apps, this means incorporating things like bright colors, cool textures, 3D effects, fun buttons, and any of a thousand other options. And no, simple and fun are not mutually exclusive as long as you don’t go overboard.

Just take a look at Yelp, Groupon, and Wunderlist – all popular apps that take advantage of interesting creative design elements while keeping the overall interface clean and simple:

As long as you keep your audience in mind, you can even forgo a bit of simplicity to make an app more exciting. Like when it comes to a drinking app. Take Brewski Me for example: every single design element – from background texture, to fonts, to buttons – took into account the preferences and interests of the target audience. It’s fun and flashy, but without compromising the simplicity or intuitiveness of the interface. There’s a reason it won the 2011 Best Beer App award.

For people outside of the app design process, User Experience (UX), a.k.a., how the app controls in the user’s hands, can seem a little nebulous. What exactly does it entail? Where does UX end and UI (user interface) begin? Do they ever cross over?

While they are two different disciplines, they are absolutely intertwined. UX defines the userflow and functionality of the product, while the UI is all about what visuals you see while using the app.

Some additional apps that do a great job of giving users an intuitive UX coupled with a stunning UI are:

Clear

UX Highlights: Simple list of to-dos, gesture-based clearing of items, pull-down to add a new feature, pull-up to clear a finished list, and pinch to move through menu hierarchy.

UI Highlights: Bold, gorgeous colors. Beautiful chiming animations make you feel accomplished and keep you smiling. Vibrations upon choices give that little extra punch that you’ve completed something monumental. The usage of color coding to indicate priority is coupled with the work-as-you-expect it movement of items. Add in the different theme options, which grow as you install different applications on your device, and Clear is the end-all, be-all of to-do lists.

Path

UX Highlights: The springy menu at the bottom left, housing all of your action items, takes the place of the typical TabBar seen in most applications. Also the left-side slide-out navigation, which houses details about your user account is reminiscent of Facebook, but that’s okay because we think perhaps Facebook’s Timeline feature may have borrowed a thing or two from Path’s.

UI Highlights: Aside from the gorgeous graphics, all of the animations, interactions, textures, structure of information, loading bars and even the typing experience makes it easy to use. The parallax scrolling on the Timeline is particular mesmerizing.

Miso

UX Highlights: With a TabBar at the top, Miso sets itself apart, but keeps important information always in a users view. The simple grid view for popular shows lets you find data quickly, and interior pages are laid out in an easy to understand fashion. The Check-In & Rate screens are some of the most straight-forward, intuitive around.

UI Highlights: Using a dark interface, perfect for not bugging other viewers around you, coupled with tiny little animation touches, Miso makes for a great viewing experience. Pull to Refresh unleashes a rainbow of fun!

Tweetbot

UX Highlights: The account view pop-over allows for super-quick switching between accounts, great for experienced Twitter users. A slide-down sub-menu for each tweet makes replying or retweeting a pleasure. The custom icon bar at the bottom of a new tweet makes adding tags, photos even easier. By far the best Twitter application available.

UI Highlights: Everything? From the subtle textures used on the buttons and navigation bars, to the plethora of indicator sounds that let you know what the app is doing, Tweetbot is the sort of application you love to use – just because it’s so much fun.

Nevus

UX Highlights: The most important features of a skin care app – what the UV Index is and when you need to reapply sunscreen, are given center stage. The Skin Record feature is intuitive, fun, with a straight-foward “compare to a penny” feature to track size. Password protecting skin records is a nice added feature.

UI Highlights: Simple, clean colors work well in the sunlight and communicate effectively. The design of the Skin Record chart is particularly straightforward, while attractive.

Yahoo! TimeTraveler

UX Highlights: The card-style destination city chooser is simple and effective. The spinning “duration” picker is a lot of fun to play with. Top navigation floats above content but is always available for users to utilize.

UI Highlights: Animations on the aforementioned card-style destination city choose is flawless. Beautiful colors and buttons lets the app feel like Yahoo!, but very distinct as well. Informational rows are clean, while giving you plenty of room between each stop to facilitate reading.

Just Landed

UX Highlights: Quick interface lets you enter the flight number, then tells you how when you should leave to pick up your passengers on time. All of this without any muss, or fuss. Just to the point.

UI Highlights: Clean and stunning interface. From clever little animations of turbines spinning to the distinctive time meter indicating how long until you should leave to the beautiful illustrations beneath each airport, this app makes you want to always volunteer to pick up friends when they arrive!

Day One

UX Highlights: Simple interface shows you what you’ve done and gives you access to everything. Concise list views and a simple writing interface.

UI Highlights: The epitome of clean. Nothing superfluous, only solid colors and subtle suggestions. The sounds make this app a stunner.

Readability

UX Highlights: Big, bold rows, with menu items hidden at the top so they don’t get in the way of reading. Controls for changing text-size are unique and intuitive. Layout of reading page is uncluttered and pristine.

UI Highlights: A classic style, with subtle textures and slight values of brown keep this app warm and inviting. From the subtle fade on the font-slider to the choice Hoefler & Frere-Jones fonts throughout, this app is the best way to read content on a consistent basis.

Dropbox

UX Highlights: Human Interface Guideline is friendly all the way. They keep it simple and it works.

UI Highlights: Custom illustrators for each of the sections before you’ve added anything into the mix. Clean use of icons and the strength to remain reserved when other uploading applications go overboard with visuals.

TuneIn

UX Highlights: Easy to understand icons and straight forward usage of the list view. Layout of the radio station page is great, with many features right at your fingertips.

UI Highlights: Use of warm colors coupled with dark backgrounds and navigation draws the eye directly where it needs to go.

Flipboard

UX Highlights: From the now-classic grid-interface for news consumption, to the pull-down menubar, Flipboard gives you a high-level view of news & information. The “flip-up” paradigm with the interface is useful and entertaining. Keeping text in navigation elements to a minimum means you pay attention to the content instead.

UI Highlights: The moving images when you launch the application coupled with the clean, narrow fonts lets you know this app means business. Inside, the off-white background is easy on the eyes, while the usage of bold, vibrant photographs engage readers. Beautiful tutorial overlays add wonderful polish.

OkCupid

UX Highlights: The slide-up drawer TabBar is a fantastic way to handle multiple options. Large, easy to follow rows and layout make browsing simple. Photo gallery is intuitive and quick.

UI Highlights: Great loading animations, calming, comforting colors (nice to have in a dating app), with a clean, distinctive interface.

Stamped

UX Highlights: The color gradient picker for choosing your stamp color stands out as particularly amazing. The large new stamp button in the TabBar is to-the-point, and the simple icon-based filter works flawlessly with its pop-over tool tip.

UI Highlights: Subtle shades of white and gray, with splashes of color where they are needed. The large, narrow font helps Stamped stand out from most other check-in apps. Great animations and tons of style.

The Fancy

UX Highlights: A simple, elegant design that puts an emphasis on ease of navigation. Tapping the menu button in the upper left-hand corner of the screen will bring up a list of options. The browse button splits all ‘Fancied’ items into categories.

UI Highlights: Pleasant light blue and white theme. A selection of products can be purchased directly through the app’s effortless process.

To Conclude

The key with creative design is not to go overboard. The size of mobile screens ensures that every element counts, no matter how tiny. To make an app successful, each one of those elements has to be both beautiful and useful. What are your thoughts on the mobile app user experience? What are some of your favorite mobile apps that fit these criteria?

(rb)

April 19 2012

13:30

Enhancing Your eCommerce Site’s Credibility: Part 2

In the previous part of this series I addressed the role that credibility plays in online retail sites. Because an increasing number of users are leaving these sites, it behooves us to ensure that the ones that we design are perceived favorably. I then explored a few ways to do this–to increase a retail site’s perceived credibility– including both security and ethical considerations.

Picking up where my last article left off, I’ll now discuss how certain communication and user assistance strategies can be used to further improve your perceived credibility. Let’s jump right in!

Communicate effectively

Wherever possible, information should be presented using plain language and an appropriate tone of voice. Ensure that any information you provide (including product reviews, descriptions, comparisons, policies, or disclosures, etc.) is communicated in a way that helps users’ make decisions. That is, quite often, what they’re there to do.

Provide relevant product information

Customers can feel a little like Goldilocks when trying to choose the right retail site by way of its product descriptions – some are too flowery, others include a great deal of exaggeration, and still others are too technical to convey any real meaning.

Aim to get it just right. Provide product information that’s meaningful to your users. Convey relevant information that actually helps them to discern the pros and cons of their choice. If you’re in any way unsure, conduct user testing to test your hypothesis.

Lowes.com

Lowes shows the advantages and disadvantages of a product, enabling users to make a rational buying decision.

Use product comparison tables

Though product comparison tables are common, the metrics used within them can be difficult to understand – especially when it comes to raw materials, ingredients, and industry-related jargon. Explain the meanings of all attributes – as either in-line help or tool tips – so that users can actually understand the advantages that one product might have over another.

Lenovo.com

On the Lenovo site, users can view additional information about a comparison attribute on mouse-over.

Guide users to product recall information

People are often none-the-wiser when it comes to product recalls. As usage of some products can prove hazardous, it’s imperative that you bring such products to your users’ attention.

Consider guiding users to product recalls using your site’s home page. Timely guidance shows that you not only care about your users’ safety and well-being, but that you can be trusted to do so in the future.

Target.com

Target’s product Safety & Recall page reiterates its stand on consumer safety.

Explain terms and conditions

Lengthy terms and conditions often confuse and frustrate users. Explain your terms and conditions in plain language to help users better understand the experience you wish to provide. This includes your policies related to site usage, privacy, shipping, returns, repairs, warranty, discussion forums, and commenting. Throughout, use proper paragraph breaks, categorizations, labels, and a comfortable font size.

topshop.com

Topshop’s terms and conditions have been well articulated and categorized, making it easier for users to understand the various policies and limitations.

Explain international shopping

Though online retail sites have made it easier than ever for people to shop across borders, ambiguity surrounding basic things – such as time taken for international shipping, customs duties, and return policies – can make it difficult for users to actually proceed with cross-border online shopping.

Therefore, provide information such as what products are eligible for order internationally. Explain how an international order affects delivery times, a customer’s ability to return a product, get support on a product, etc.

If your business is based out of the United States and you comply with the U.S.-EU Safe Harbor program, let your European users know that you are in compliance with their privacy protection needs. Additionally, inform users about your policies and limitations around shipping goods to a restricted area, like a US Military address (APO/FPO/DPO).

Childrensplace.com

Children’s place has an FAQ devoted to international shipping that answers some basic questions that users may have.

Provide reviews, both positive and negative

According to data released by Bazaarvoice in Talking to Strangers: Millennials Trust People over Brands, 84% of Millennials (people born between 1977 and 1995) say that user-generated content (UGC) has a significant influence on what they buy (compare that to 70% of so-called “boomers,” or folks born between 1946 and 1964). Because a huge chunk of users will likely base their opinion on what strangers’ feel about a product , its imperative that you display user-generated content in a straightforward, honest way. To avoid frustration, have a concrete policy concerning the moderation of comments, reviews, and ratings.

Make all user generated content (such as reviews) easy to comprehend. Provide a dynamic summary showing the percentage of negative and positive comments/reviews and give users the ability to sort and search for specific types of comments/reviews.

Sony.com

Sony allows users to filter comments and also provides a graphical summary of user comments of its own products.

Continuous assistance

The last credibility strategy is certainly not least: provide online shoppers with continuous assistance throughout their experience. Here are a number of ways to do that.

Prominently display contact numbers

Though contact numbers are displayed commonly on retail sites, many times they are difficult to come by during an “emergency,” such as before making a buying decision and during checkout. In these situations, it’s especially important to help users on their way. If you’ve got it, after all, why not flaunt it?

Dealsdirect.com

The customer care number on the Deals Direct site is shown at several places on product pages and persistently on the header.

Allow users to contact previous buyers

Despite their apparent trust in product reviews by strangers, users are occasionally skeptical. What if the marketing department’s “cooking the books?” To overcome such doubts, consider facilitating communication between a potential buyer and someone who has already purchased a product.

You could also invite frequent buyers or selected members of the community to support new users by guiding them through the buying process. Ask and answer-type of services and user-moderated communities are two examples of such efforts. Encouraging users to contact previous buyers will instill confidence that the information shared on your site is authentic and unbiased.

direct.tesco.com

On the direct.tesco.com site, potential buyers can get feedback directly from actual buyers.

Provide help documentation

Help is commonly provided to users in the form of manuals, write-ups, articles, descriptions, and textual how-to’s on retail sites. But that’s old hat. These days, context-sensitive help, embedded, and inline help are quite common, as is live chat.

Because of the time it takes to read documentation, users are likely to prefer a quick how-to video. Research conducted by Nielsen has shown that video consumption across multiple platforms has risen globally. About 70% of global online consumers watch online videos, while mobile video is watched by 11% globally. Considering that the adoption rate for videos is significantly high among desktop users (and catching up among mobile users), consider providing demos, how-to- videos, and interactive presentations to help users quickly understand a product or service.

made.com

Made.com provides short product videos that describes the product and helps users to visualize how the product may look physically.

Respond to feedback

The absence of a timely and sincere response – especially to negative feedback and grievances on forums linked to your site – may give the impression that you do not really care about your users and their concerns.

Always respond maturely and promptly to negative publicity, without being defensive or rude. If you have made a mistake, there is no better way than to come clean. A show of aggression or indifference, on the other hand, is best avoided at all costs.

A JetBlue representative responds on Twitter.com

In this example from its Twitter page, a JetBlue representative responds to an aggrieved flyer by informing him proactively about its Customer Bill of Rights.

Conclusion

Over the past two articles, we’ve considered many factors that may enhance or detract from the credibility of your website. Whatever mechanisms you choose, ensure that they are sustainable in the long run. Credibility and responsibility are essential qualities to the trust in any relationship.

Finally, I leave you with a rough heuristic for improving your site’s credibility:

  1. Reconsider your business’ actual stance on credibility and reflect this on your site through a mix of design and content.
  2. Consider elements that are currently on your site that (might) affect its credibility.
  3. Consider elements you could add or change on your site that would increase its credibility.
  4. Triage everything: consider what’s the easiest or fastest thing and the hardest or slowest thing you could do. Features that are relatively easy to implement include showing the total cost of a product upfront or providing navigation cues to your shipping policy. The ones that require some amount of investment, organizational motivation, and approvals include: making actual changes to policies, creating product videos, defining a plan for social engagement, etc.
  5. Put a plan into action.
  6. Implement changes in a phased manner. Give it at least three months to have an effect.
  7. Test your hypothesis using a combination of web analytics and usability testing.
  8. Keep testing and make necessary changes based on feedback till you see actual changes in users’ behavior and your Return On Investment (ROI).

You can use the above points as the base to create a realistic site strategy that has credibility at its core.

To conclude, in Fogg’s words, “those who design for credibility gain a strategic advantage,” as credibility gives site owners the power to change users’ attitudes and behaviors.

Series references


March 28 2012

17:00

Stop Designing User Experience! I Mean It!

User Experience this! User Experience that! Stop it, will you? There’s plenty enough research done about User Experience . Now, can we please start designing? The problem with the Internet is that literally anything can go viral in no time. Same has happened with the keyword User Experience (UX as the nerds call it). Wasn’t aesthetically pleasing design the end goal for every designer? Then, from where did this term UX find place in our brains and how come it dominates our thoughts? Isn’t an aesthetically pleasing design that delights our user enough to keep them riveted?

Well, lots of questions there. I might be acting a bit extreme but I am a bit upset. I am upset with the trend that has forced an average designer to read tons of content about User Experience just to understand whatever it is. For me, UX is totally unrealistic. And whatever is unrealistic cannot be designed. Let me prove my point!

First Things First. What Is User Experience?

Click on the sign up button on any page and it takes you to the signup page which requires minimal user input before registering the user. Well, that is good User Experience. A slow loading webpage is part of UX and an out of location slider is part of UX too. Bad or good, but everything that happens on a website is User Experience.

So, UX is photography, coding, graphics, security, branding, information and design etc. Basically, UX is literally everything.

So, Who Are UX Designers?

Read the pointers above? Now, people who are involved in all those activities and other related activities with respect to that product can be tagged as UX designers. Be it the team lead, the project manager, the graphics designer, the content developer, the think tank team or even the testing team. All of these combine to form a consultancy group of sorts that helps the client to understand the importance of User Experience.

Did you ever stumble upon a client who wanted to focus on User Experience instead of the product? Did anyone ever ask you the question – “Where to find a User Experience Designer?” Well, such situations don’t come up as such terms are designer specific. All that customers look for is, as I always say, aesthetically pleasing design.

User Experience was a term that popped out of somewhere. It must have been some genius web designer with a lot of free time who coined this term. Later on, it grew as it was something new. It helped a lot of designers get a job of a new kind. It helped industries squeeze more money out of their clients. And, it helped writers to write about something which wasn’t heard of before. But, I guess now it is high time that designers take their words back. It is time when designers should give up on the concept of User Experience as it has done nothing new for the design industry. It is time when we stop talking and start concentrating on the aesthetics of a product.

Get It, But Why Not Design User Experience?

Well, I have my reasons. Let me list the most important of them all.

Those who have spent time in the web design industry will agree to the fact that users are very unpredictable. No matter what sort of analysis you perform, at the end of the day you will stumble upon users whom you cannot satisfy. Even when user experience based testing of any web design is done then too results aren’t satisfactory. The reason is very simple. The thought process of users in your dummy testing will never match with the thought process of real-time users. It isn’t really happening no matter how hard you try to immitate the real time user base.

Assume that you are designing a Facebook app which will focus on users from one country. But, what if that app gains fame in other geographical locations? Remember what happened with Orkut? Although Google launched Orkut in the US it garnered all the fame from India and Brazil. Who would have imagined that would happen? If Google knew this then they would surely have designed Orkut especially for India and Brazil.

We will never find out where exactly our hard work will be used and how will it be greeted, if at all greeted! Henceforth, assuming that you can design specifically for User Experience is assuming that you know every user and is a dumb mistake.

Isn’t that self-explanatory? User Experience is a very volatile term in itself. Internet has evolved exponentially in last few years and so has the perception of users towards the Internet. They have become extra vigilant and smart like never before. This results in ever evolving user experience which demands for more.

Now, in such a scenario it becomes impossible for designers to design a product which evolves with the ever evolving user experience. Nobody can design such a product. None! This simply proves the fact that our basic aim should be to design a product which is aesthetically pleasing instead of designing a product which is completely incomplete.

Got It? Now, Start Designing “For” User Experience!

Confused? Well, there is a difference between what I was suggesting before and what I am suggesting now. All that I am asking for is that so-called “UX Designers” should cease to exist. See, I don’t have anything personal against UX designers but I have issues with the concept of UX Design and the way it is used to extract money out of end clients.

Peter Morville’s Facets of UX explain a lot about what User Experience can be. Once you look at the honeycomb above then you will understand what I mean by Designing For UX. There is a subtle difference between Designing UX and Designing for UX but it is important for the ecosystem of the Web Design Industry that designers understand this difference.

Conclusion

Nothing much left to conclude I guess. I might have raised a few eyebrows and shook up some settled UX designers but this is how it is. You just cannot fool the end client just by using some technical terms that have no new meaning. Let us design for the ecosystem of our industry and not for our bank accounts.

March 26 2012

16:00

The Power of Stories for Enhanced User Experience

What ticks Twitter? It is not only the best possible news feed being generated by various Twitter users but also the stories that say it all in 144 characters. Although Internet has helped humans evolve the way they communicate yet the purpose remains the same – to stay in touch, to communicate and to share each other’s stories. How we do it hardly matters nowadays. Today I will discuss how stories have been used over and over in order to attract the attention of consumers and how it can be used to build a brand.

The Emotional Touch

Most of you must have seen this video but for those who haven’t must see it once. It won’t take more than 7 minutes of your precious time and it is worth it. A young girl could silence the delegates of the so-called “legendary” United Nations just by touching their hearts. It was all about connecting emotionally with her listeners and she did just that.

We must understand that most of the times the style in which one describes products on websites is almost mechanical. We have our own set patterns and we foolishly use those patterns to write down various descriptions. It is all about the amount of time one has spent doing the same work over and over. Correct me if I am wrong?

The importance of emotional touch in write-ups (and other forms of media) cannot be understood until and unless one actually gives them a shot. Humanization of communication between a company and the end customer goes far behind user experience. Make it real and involve humans in your stories or otherwise – lose!

In the early days of the personal computer, all the display screens were black and white. When color screens were first introduced, I did not understand their popularity. In those days, color was primarily used either to highlight text or to add superfluous screen decoration. From a cognitive point of view, color added no value that could not be provided with the appropriate use of shading. But despite the fact that the interface community could find no scientific benefit, businesses insisted on buying color monitors. Obviously, color was fulfilling some need, but one we could not measure. In order to understand this phenomenon, I borrowed a color display to use with my computer. After the allocated time, I was convinced that my assessment had been correct — color added no discernible value for everyday work. However, I refused to give up the color display. Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise. ~ Norman, D. A. (2002). Emotion and design: Atrractive things work better.

Quickly, What’s The Connection Between Emotion And Design?

Emotion triggers a surprise response which helps the end consumer connect with the product. We might not understand the importance of emotion as it is almost invisible but emotion does trigger thought and behavior. Underplaying the role of emotion in design (or any other product for that matter) will simply result into a design without a soul.

The emotional touch in a design helps the user understand the credibility of design and the amount of hard work that has gone into the making of that design. Also, it generates a bond of trust between the two entities. On the whole, the emotional touch will instantiate the ease of use for the end-user.

Ethnography and Stories for User Experience

Ethnography has recently started to make its way into the minds of User Experience teams and experts. Dictionary definition of ethnography is “The scientific description of the customs of people and cultures.” Lately, Ethnography made its way into corporate and consumer culture. It is being used to understand the potential buyers for a particular product. It helps one to understand the values, behavior, and motivations that drive a potential end-user. This is where the connectivity of UX with Ethnography erupted.

I am planning to do a completely different article on Ethnography and User Experience but because we are discussing stories and their effect on UX so let me take some space out to co-relate importance of stories in case of Ethnography.

Image via Stockfresh

Stories help companies connect with the end-user and nurture a bond between them. On the other hand Ethnography helps the same companies understand end-user’s daily life style and their thinking pattern. So, the science of Ethnography can use stories and their emotional power in order to connect with end users. This will help the end-user to open up with the target company and strengthen the understanding between the two.

The Importance of Water Cooler Moments

Yeah! They matter. Remember the times (which might have been yesterday for you) when you end up spending more than just a minute around the water cooler at your workplace? Stories discussed around the water cooler at times have enough importance to make or break a business deal. The amount of emotional investment that we do in such stories and their characters helps us connect with such stories.

Image via stock.xchng

What I want you to understand is if your story telling is such that the end consumer is discussing them at the water cooler in his/her company then you have pretty much done your job. In short it is the lasting impression that will make or break your end game. Story telling should be such that users are emotionally able to connect with them. I agree that Water Cooler Moments might not connect with our topic here but it is an important pit stop for your stories and your end consumer.

Summarizing the Advantages of Storytelling

I am not done yet but I hope that I have been able to give you a glimpse of what all storytelling can do and how strong your pitch can be if it is backed by a story that connects with end user. Now, let me quickly go through some of the benefits of story telling that enhances UX:

  • Regenerates dead papers by pushing life in them.
  • Simplifies designer’s perspective and helps him understand the end-user better.
  • Increases understanding between the team which is into UX as it brings everyone on a common platform.
  • Brings out the thoughts of end-user.
  • Accelerates speed of the project.
  • Improves communication between various teams as it is able to connect all of them on one single platform.
  • Value for end-user and profits for company on the whole.

Conclusion

Stories have always played a vital role in our lives since childhood. When we were kids, it was the bed time story that gave our mind the much wanted peace and helped us sleep. We might have grown up physically but still its the stories that help us connect with each other. No wonder why Twitter is ticking and no wonder that User Experience will touch heights once it stands on the pillar of stories that connect people.

February 18 2012

10:00

Why UX Design is like Your Clothes

Even if you gave five people the exact same clothes, none of them would wear the  clothes the exact same way. This is because everybody looks at something in their own unique way, this is just a testament to the creativity every person has inside of them. You’re probably thinking to yourself what in the world does this have to do with UX design, correct?

Well, a website is nothing more than a creatively designed collection of different sections put together to create something aesthetically pleasing. A wardrobe is a collection of different articles of clothing that you put together as fantastic outfits. In short, both are a combination of different items that make a visually pleasing whole. If you’re still a little unsure about this comparison, don’t worry. By the end of this article, everything will make much more sense.

Breaking Things Down First


*Image Credit: hellojenuine

The best, and most practical, thing to always do is to break things down first. So we are first going to relate the basic structure of a website (header, body sections, sidebars, footers, and misc.) to the typical items of clothing one wears everyday. Let’s get started, shall we.

The Header

In any website, there is something about the way the header is designed that decides how well the website as a whole will turn out. If its looks messy, unorganized, wild, and like little thought was put in, the conversion rate for a website with a header like this won’t change at all. It should be pretty obvious where this is heading. In a UX perspective, the header of a website relates directly to ones headwear (which in this discussion can include hair styles).

Everyone has had a bad hair day. Maybe you’re balding or you got a bad haircut and you need to hide it for a while. Well the silver lining to that is the invention of the hat. The proper headgear can make it all better in the blink of an eye.

The Body Sections

Now the body sections of a website are the largest part. This is the area where all the content in a website goes, which is pretty much the whole reason anyone visits a website, at least in an ideal world. Moving on, the body sections connect everything together and the rest of the website is built upon. So with that in mind, the body sections of a website relate to the torso and leg areas. This is like the website version of t-shirts, blouses, tank tops, jeans, skirts, or whatever else is suitable attire for your style and gender.

The Sidebar

The sidebar(s) is the area that sees the most influence from other parts of a website. This is because the size and importance of a sidebar is derived from how the rest of the website is designed. Since the sidebar is the main dependent aspect, and is not always a necessary section but always adds a little something whenever in use, it correlates directly to outerwear(coats, jackets, etc.).

The Footer

There have been studies that show the type of footwear a person wears says a lot about them. The footer and footwear have a stronger relationship than just their names, positioning, and functions. Like the shoes on one’s feet, a footer needs to strong, durable, and stylish all in one. That is a lot of pressure for something at the bottom of a website, but considering that in most cases a footer can make or break a design, it’s quite understandable.

The Miscellaneous (Popups, Overlays, etc.)

The miscellaneous areas of a site are best described as the areas that aren’t really necessary and can hinder the experience of a website if not properly incorporated. However if done correctly, they add to the overall experience of the site. The idea is to keep these unnecessary areas to a minimum and only use them when needed. For this reason, the miscellaneous sections of a website are like jewelry.

In Summary

Since all the sections have been broken down, labeled, and classified, let’s just do a quick review to make sure that everything is understood. The header is the headwear (which for this case includes hair), the body sections are the torso and leg areas (shirts, blouses, sweaters, jeans, skirts, etc.), the sidebar(s)  your outerwear and the footer is the footwear area, and the misc. area is the jewelry.

Deciding Factors


*Image Credit: cmozz

The basic wardrobe structure has been broken down, and the understanding of this relation is pretty much set. There is only one thing missing. What about the deciding factors that determine the wardrobe combination of said broken down sections?

Region

By definition, a region is defined as being an area or division having definable characteristics, but not always fixed boundaries. With this definition in mind, it is safe to say that different industries and/or markets are distinctive clientele regions. Correct? Well for that very reason, the industry (government, education, healthcare, business, etc.) the website one is hired to aid in building will be defined as the region.

Climate

After figuring out the region, there is another important step to take. This of course being finding out the weather of said location. Once the region is identified, finding this out is a breeze. For the most part, every area within a specific region has a general climate characteristic that relates with other areas at all times. Of course there will be slight timely variations for each area, but for the most part what is to be expected can easily be generalized. Isn’t safe to assume that most companies and/or organizations within the same industry will have the same type of content, but with personal variations? For this reason, the content/copy a site showcases is considered the climate.

Applying


*Image Credit: Fuschia Foot

Okay now the relation is understood, the deciding factors are determined, all that is left is to put this new information into practice. To help guide you along applying your new knowledge, take some time to look at this easy to follow example.

Example: The Photographer

So a new client, a freelance wedding photographer, approaches you to design their new portfolio site. From this profession description the deciding factors are quite easy to find. The region in this example is of course weddings, and the climate is wedding photos. Next you need to decide how the design of the website will be handled, or dressed.

Since content wise this site will be nice and breezy, any heavy wardrobe needs shouldn’t be brought here. Below, a sample breakdown is provided:

  • Header: Since the weather is pretty fair, going heavy anywhere on the site is not a priority. All that is required here is a definitive style featuring of course the information we have come to know for a header. This being simply the name/company logo and the navigation menu.
  • Body Sections: It may be good weather, but this area can’t just be blank. This section is reserved for your content of course, things like information about the photographer and photos of their work.
  • Sidebar(s): In this weather situation, adding any extra clothing would just make the wearer uncomfortable if it’s too heavy. So this section is not needed, but can be applied if kept very light.
  • Footer: With everything here going down the minimal path, it only makes sense to continue that here. A strong footer here can include something as simple as a line of bottom links, copyright info, and some social links.
  • Misc.: Although the rest of the clothing currently being worn is leaning toward minimal, a little something extra will really make everything stand out. In this case, things like lightbox overlays in the area showcasing the client’s photos, implementing jQuery to tag the photos by year, part of wedding, and/or angle so that once clicked on only that section shows up, or other things of this nature.

Have any more thoughts? Can the wardrobe strategy you have help?

January 04 2012

16:09

Stop Designing Pages And Start Designing Flows





 



 


For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves. Too often, we prematurely turn our focus to page design and information architecture, when we should focus on the user flows that need to be supported by our designs. It’s time to make the user flows a bigger priority in our design process.

Design flows that are tied to clear objectives allow us to create a positive user experience and a valuable one for the business we’re working for. In this article, we’ll show you how spending more time up front designing user flows leads to better results for both the user and business. Then we’ll look in depth at a common flow for e-commerce websites (the customer acquisition funnel), as well as provide tips on optimizing it to create a complete customer experience.

Start With The User

When starting a new Web design project, we’re often handed a design brief, branding standards, high-level project goals, as well as feature and functionality requirements. Unfortunately, these documents typically amount to little more than the technical specifications of the project, with almost no thought given to how exactly the website will fulfill the multiple user objectives that lead to successful interactions.

Popular user flows for e-commerce and membership websites
Two examples of popular user flows for e-commerce and subscription websites.

If you start with a detailed look at the objectives of the user and the business, you would be able to sketch out the various flows that need to be designed in order to achieve both parties’ goals. User objectives could range from finding a fact to replacing a product to learning a new skill to buying a gift for someone. Business objectives could be getting a lead, a like, a subscriber, a buyer, a download or a phone call. Identifying each user and business objective is the first step to creating design flows that meet all of them.

Map User Flows Into Conversion Funnels

Not all website visitors are created equal. Users come from different sources, with varying levels of knowledge and engagement, and with different goals. It’s up to you as a user experience designer to map those in-bound user flows to conversion funnels that provide value to the user as well as the business.

You should prioritize the flows and focus your effort on the few that will impact the most users and have the greatest gain. Custom flows allow you to architect experiences according to traffic source or visitor type and enable you to set the experiential pace, build user confidence and get buy-in on the way to the ultimate conversion.

Typical User Flows

Some typical user flows are:

  • Paid advertising
    A user coming from a banner or Google AdWord ad.
  • Social media
    A user coming from a friend’s post on a social network.
  • Email
    A user coming from an email newsletter or referral invitation.
  • Organic search
    A user coming from a deep link that was surfaced by a search.
  • Press or news item
    A user coming from a mention in the news or a blog post.

Each of these visitors has their own needs, expectations and level of knowledge, and they need to be treated accordingly.

Diving Into Funnels: A Closer Look At Customer Acquisition

Typical conversion funnels for e-commerce websites
E-commerce websites typically have many different conversion funnels.

Let’s look at a critical flow for many websites — paid online customer acquisition — and break down its various elements. For this example, we’ll examine the experience flow from new visitor to email subscriber to purchaser.

Consider a company that uses display advertising to generate new customers for its business.

Display Media

With display advertising, it all starts with the banner. The design of the banner needs to achieve one precious goal: get a click from the right person. Here are some key questions to answer when designing the ads that represent the very front of your user flow:

  • What type of user am I targeting?
  • Are they actively seeking a solution to a problem, or are they casually browsing?
  • What problem are they trying to solve?
  • How can I best capture the user’s attention?
  • How do I relate to the user?
  • Is there a message that will resonate with the user?
  • Is there a pain point that my product or website alleviates for the user?
  • How can I articulate this solution clearly and quickly?
  • What compelling calls to action will get our target user to click?

Your ads should address these main motivations and provide a compelling hook to get that all-important click. Up-front research and real-world testing will help to optimize the experience. Using this model, ReTargeter improved its banner click-through rate by four times. Its blog post lays out exactly how it achieved this success.

The Landing Page

The point when the user hits the landing page is when the user flow work really begins. Because these users are coming from a low-information source (such as a banner, as opposed to an in-depth blog post), you must design a flow that fills in the gaps of information by providing the user with the data that they need to be converted.

In our example, the user will hopefully be converted to an email subscriber; but depending on the business, the conversion could be to create an account, download a white paper or make a purchase. Whatever the conversion goal for the business, the key is to give the user a reason to keep moving through the flow, down the funnel.

Use the following methods to keep the user moving down the funnel:

  • Build user confidence by clearly articulating key benefits, backed by easy-to-digest proof points.
  • Streamline the content and design to focus on a clear call to action (in this example, to sign up for an email newsletter).
  • Remove friction at every step. Ask for the minimum amount of information, and reduce the number of fields, extra clicks and page-loading time.
  • Create an enticing hook, an itch that can only be scratched by completing the registration step.

KISSmetrics’ “Anatomy of a Perfect Landing Page” details the design, UI and copy elements that can help you meet your users’ need and drive conversions for your business.

Stacking Flows For A Complete User Experience Life Cycle

While viewing a funnel as something like Click on banner ad → Land on Web page → Register email is easy, designing and building stacked flows that drive the business’ ultimate objectives takes a bit more thought. In our example, we’ve successfully gained an email subscriber from the banner ad campaign, but the real business objective is to generate revenue through new purchases.

Treating the email subscriber flow and the e-commerce purchasing flow as two separate conversion funnels is an easy trap. In reality, the experiences are connected, and by looking at them as stacked flows, we can create a more cohesive interaction, one that drives optimal results for the business.

In our example, this stack is made up of the customer acquisition funnel and the customer relationship management (CRM) flow.

Stacked funnels create a complete interaction life cycle
Stacking funnels creates a cohesive user experience life cycle.

When designing this flow, you need to consider what the biggest levers are for converting the subscriber into a buyer. Many of the earlier principles apply, but this time you have more touch points to consider and leverage.

In this flow, you need to look at all elements of your CRM strategy and the purchase flow of your website, including:

  • Email communication back to the subscriber,
  • Pages that the subscriber lands on when returning to the website,
  • The flow from internal content pages to check-out.

Here are a few key considerations when designing the flow from subscriber to purchaser:

  • Tell a visual story that the subscriber can identify with and wants to be a part of.
  • Ensure that your emails reinforce the story, and give proof points to remind users why they subscribed.
  • Include compelling calls to action to give the subscriber an opportunity to relate to and be a part of the story.
  • Include prominent calls to action and easy, direct paths to the check-out process from the website’s internal content pages and blog posts. These validate the user’s hope about their role in the story.
  • Make the check-out process as frictionless as possible, and reinforce confidence along the way to help the buyer commit to being a part of it.

By considering how the two flows interact, you can create a seamless experience that builds confidence and deepens the user’s connection to your website, leading to the ultimate purchase conversion. Equally important, this flow also increases customer satisfaction because the stacked funnels keep the user experience smooth and on track to meeting their needs, with little confusion or ambiguity.

Putting Flow Design To Work For You

Whether you’re mapping out a brand new website or looking to optimize an existing user experience, flow design will keep you out of the trap of designing individual pages and interactions and instead focus you on fulfilling users’ needs. By prioritizing your user flows and focusing on the ones that drive the most value to the most users and to the business, you can make the greatest impact with your initial flow design.

When considering user flows, think past the first conversion, and design for the ultimate conversion, which might lie a few steps behind. This is particularly important with any type of commerce-driven business, for which the first conversion is often just a prelude to the primary revenue event. By stacking these complementary funnels, you create a more cohesive user experience that drives better results for both the user and your business.

So, the next time you’re asked to create a new design, step back and ask yourself and your team what user flows you are trying to create through the website, and let that insight drive the design process.

(al)


© Morgan Brown for Smashing Magazine, 2012.

December 29 2011

05:00

Cognitive Dissonance: Why Your User’s Brains Hurt

Cognitive Dissonance and The Choice Paradox

Cogni-Huh What-O-Nance?

A powerful cause of dissonance is an idea in conflict with a fundamental element of the self-concept, such as “I am a good person” or “I made the right decision”. The anxiety that comes with the possibility of having made a bad decision can lead to rationalization, the tendency to create additional reasons or justifications to support one’s choices. A person who just spent too much money on a new car might decide that the new vehicle is much less likely to break down than his or her old car. This belief may or may not be true, but it would reduce dissonance and make the person feel better. Dissonance can also lead to confirmation bias, the denial of disconfirming evidence, and other ego defense mechanisms.

Options

options-laptops
Everyone likes having options, right? I mean, if there was only one car ever made, regardless of how well it was built, or how cool it looked, there is nothing fun about being forced into a decision.

We want to personalize! We want the red convertible with the tan leather interior and the iPod hook-up, with custom rims. Green just won’t do! It’s this definitive decision that makes us happy, even ecstatic when we find the perfect [insert your idea of perfect here]. However, it is this same choice that can ruin an otherwise perfect experience.

Observed in many cases is the paradox that more choices may lead to a poorer decision or a failure to make a decision at all. It is sometimes theorized to be caused by analysis paralysis, real or perceived, or perhaps from rational ignorance. A number of researchers including Sheena S. Iyengar and Mark R. Lepper have published studies on this phenomenon.[2] This analysis was popularized by Barry Schwartz in his 2004 book, The Paradox of Choice.

I Want More Options… No, You Don’t

We are very busy people, we have schedules to keep, places to be, things to do. We don’t always have a gratuitous amount of time to make an informed decision and rely on what we’re presented with to help us make that choice. User Interface Designers, UX Professionals and hopefully “decision makers” know the value of a persons time, and ensure choices are as simple as possible.

Consumers have been bred to think more is better. We’re all guilty of it in some way or another but the fact is, choice suppresses conversion. We are more likely to be unhappy with our decision if we have too many options to choose from.

If we can not limit the number of options, there needs to be some method to narrow them down. This could be anything from a customer rating system to, putting the most common choice(s) up front.
options

Conclusion and Sources

Sometimes we can’t take away the number of options we’re asking the user to choose from. But we can try and solve for the best possible outcome. By giving the user a means to drill down their choices, or offering up a “Best Value” or “Popular Choice” we help minimize cognitive dissonance thus giving them a richer user experience.

When Choice is Demotivating: Can One Desire Too Much of a Good Thing?
Cognitive Dissonance Wiki
Changing Minds

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Cognitive Dissonance: Why Your User’s Brains Hurt

December 28 2011

15:22

The Myth Of The Sophisticated User





 



 


As I sat in my local co-working space, shoulder-deep in a design problem on my MacBook Air, I could hear him. He was on the phone, offering screen-by-screen design recommendations to his client for the project they were working on. When this acquaintance of mine arrived at the subject of a particularly hairy task flow, he said, “Well, these aren’t going to be very savvy users, so we should probably put some instructions there.” He followed this by rattling off some dry, slightly too formal line intended to clear up any confusion about the page.

The Myth Of The Sophisticated User
Image Source: Robb North

It was an act that reflected his apparent belief that some savvier type of user is out there who would immediately understand the screen and could live without the instructive text. I cringed. I’ve heard the same suggestion on far too many phone calls, and it’s been wrong every time. To shed light on my reaction to it and to illustrate why such a suggestion is problematic, let’s consider a quick tale of two users.

A Tale Of Two Users

First up is the type of user who my acquaintance thought he was trying to help. Let’s call him John.

John is a guy with little experience using the Web beyond the typical. He pays a few bills, Facebooks a few friends, buys the occasional bauble, but he has found himself having to use this fancy new internal Web app as part of his job, the one designed by the person in my co-working area.

At the next desk over is Jane, a tech-savvy user who spends nine hours a day doing one thing or another on a variety of screens — her laptop, her phone, her tablet — and whose hobby is loading up on as many apps as she can find. She’s never met a problem the Internet couldn’t solve. She has chops, and she loves to use them.

When John approaches this complicated Web app, he knows a couple of things: that he has to learn to use the thing in order to do his job, and that he often struggles to understand the complicated interfaces that seem to come at him from every direction these days. He’s not excited about having to cope with this one, too.

Jane, on the other hand, is a “producer.” She gets things done, and she pushes this app’s buttons without hesitation. The list in her to-do app has a hundred things on it, and doing work on this app is just one of a slew of tasks whose ass she’ll kick before even heading out for lunch.

John and Jane both see the same screen, but they see different things there. Their understanding and familiarity with it are not the same; their confidence in conquering it is at different levels; and different psychological factors are at play when they interact with it. For John, the pressure is in figuring out how to do this part of his job so that he can get back to nervously doing the others. For Jane, the pressure is in cranking through this so that she can devour the next item on her list.

Identical Needs

Now comes the part that too few people who make design decisions realize: while John and Jane have different problems and are different types of users, their needs are identical. In short, they both want to get the hell off this screen. John is unconfident, and Jane has other things to do. They both need the screen to make sense. They both need the task flow to be obvious. They both need to just get past it.

So, which user was my acquaintance helping by adding instructions to the page? In truth, the answer is probably neither.

The only reason a line of instruction would help John is because the screen was designed for Jane, whose vast experience helps her decipher the purpose, benefit and flow of this task. And that’s exactly the problem. Jane, though perhaps more likely to work her way through the screen with some success, has better things to do than struggle with it. She may have more technological experience, but she’s in a hurry. Besides, a poorly designed screen can make Jane feel as much of a moron as John feels. Her experience means nothing against a screen that wholly fails to explain itself.

John is less likely to recognize design patterns or to be able to parlay his previous experiences to this one. Jane is more likely to recognize patterns, but only if they’re used in ways she’s familiar with or can quickly adapt to (although weak designs are weak usually because established design patterns have been misused). John’s lack of confidence pitted against a tough design might kill his desire to ever work with it again. And Jane, despite being ready and willing to fight through it, will not be any more loyal after the battle.

In short, Jane is just as likely as John to walk away from this screen frustrated. And no line of instruction will compensate for a bad design.

Frustration Is Frustration

Despite hearing it all the time from designers and executives alike, the notion that tech-savvy users will be more amenable to difficult interfaces is, in a word, crazy. Yes, some users, when asked, would prioritize user control over ease of use (and vice versa: unconfident users would prioritize ease of use over control), but does this mean that the tech-addicted among us will more readily understand an unclear message, tolerate a poor task flow, or swear by a product that they themselves have trouble using? Heck no. Complexity can be managed, control can be beneficial, but frustration is never a good business strategy.

It doesn’t matter how savvy your users are, better design benefits everyone. Having a proficient audience is no excuse to slack off. You’re still designing for human beings, and human beings, one and all, have better things to do than try to make sense of a weak design.

You’re A Jane

If you’re reading this, odds are that you’re a Jane. You are a tech-savvy, confident user who jams those buttons down like there’s no tomorrow, fearlessly marching your way through whatever task stands in your way. When was the last time you had the time and willingness to put up with a poor interface from a company that thought it could get away with it because you’re an experienced user? When was the last time you liked it? When was the last time you recommended an app with such a design?

The next time you’re designing for John, remember that you’re also designing for the Janes of the world, too. Their to-do lists will be the better for it.

(al)


© Robert Hoekman Jr for Smashing Magazine, 2011.

December 06 2011

14:59

Effective User Research And Transforming The Minds Of Clients





 



 


Ah, the love of a client. That is indeed what we all seek as professionals, is it not? If we lived in a utopia, then that’s all there would be. Openness. Honesty. Passion. Flowing in both directions, client to service provider and vice versa. We want our clients to be right behind us in our ideas and open to new ones. In order for this to happen, there has to be trust.

Clients that deal with large agencies tend to place their trust in the big brand names of these shops. Freelance designers and small agencies do not always inspire the confidence in clients that large shops do, which means that trust has to be built, nurtured and never taken for granted.

So, what tools do freelance designers and small agencies have at their disposal not only to get a client on board with their ideas, but to inspire them and encourage buy-in from other stakeholders in the client’s company? We’ll take a look at few of them in this article.

Getting a Win-Win

Getting a win-win is when you deliver solutions that address the client’s business problem. The client should respond to your ideas with respect, placing their trust in ideas that they may not immediately identify with, and turning down ideas they intuitively know will not work. We must be able to respond with the same respect and trust, allowing some of our ideas to fall by the wayside and letting others shine.

Keep in mind that challenging opinions is OK, especially ones that are bound to fail. In this type of relationship, both parties handle tension objectively, putting aside personal feelings, to complete the goal. Indeed, this well-oiled platform allows for the creation of amazing work. So, how does a win-win transpire? It transpires through actions, research and delivery.

Actions: Engaging Your Clients

The way that the teams from the client and agency engage with each other is critical. First and foremost, be what you want your client to be. If you want them to be honest, be honest. If you want them to be passionate, show your passion. They may not immediately reflect your enthusiasm, but they will feel it, and over time it will reinforce your efforts. This is Client Relations 101 and should not be ignored.

Often, though, this honesty, enthusiasm and passion aren’t enough. One of the stakeholders might have wanted another contractor to win the bid, or a variety of other issues might prevent the relationship from maturing. At this point, get the client to stop thinking about any perceived shortcomings, and get them to think objectively about the problems they’re facing, with you as the catalyst for solving them.

When we come across a resistant client, we look to customer insight as the means to help the client focus on the user and the business problems that need to be solved. By discussing these in a controlled, test-driven environment, the biases of both the client and agency are eliminated, and the issue becomes how to objectively solve the problems together.

Research And Customer Insight: The Objective Problem-Solving Approach

Before diving into ways to use customer insight to guide a project, I’ll go over the types of research methodologies and testing protocols that my firm commonly uses. These include ethnography (a research method from the social sciences that involves field research and up-close observation in the user’s environment), heuristic evaluation (a form of usability inspection, in which usability specialists judge whether each element of a user interface follows a list of established usability heuristics), focus groups, surveys, prototyping, usability testing, user interviews and more.

These methodologies yield valuable data, and from this data we can build persuasive artifacts to convince the client of strategies that we know have a high probability of success in the real world. In addition to customer research, stakeholder interviews can be invaluable in highlighting, and gaining consensus on, the scope of UX engagement.

Some of the research methods described above can be extensive and could require the client to commit some of their budget. But conducting research up front to understand customers and what they want is less expensive than spending time and money correcting a solution after it has launched. If the client does not have a budget that supports social science research, then light inexpensive testing can be performed. Nothing is wrong with heading to the nearest coffee shop, finding five to ten people in your target demographic and asking them contextual questions or giving them a run-through of a proposed solution. This is generally enough to make a case for change.

Case in Point

My company was recently hired by Boeing Commercial Aviation Services, the services arm of Boeing, to help transform its customer portal, MyBoeingFleet.com. As part of this transformation, we conducted a large ethnographic research project. It was a huge endeavour, with more than 150 users interviewed around the globe. Though large in scale, it gave us valuable insight into Boeing’s users, enabling us to identify challenges within its existing customer portal. Once we obtained the data, we analyzed it in detail and created a series of artifacts to help the Boeing team clearly understand what we had learned. These artifacts and deliverables also served to convince the Boeing team of our capabilities and expertise, as well as help sell the project to key internal stakeholders.

Upon completion of the ethnographic study, we created a document called SUDA, or “system, user and domain audit.” This comprehensive document detailed the results of the ethnographic research, transferred knowledge of fundamental UX processes, and compiled our findings into persuasive artifacts. This was then presented to all major stakeholders. Two primary artifacts in the SUDA helped to convince our clients and other stakeholders not only to trust us, but to become our champions: those artifacts were the personas and customer journey maps.

These deliverables are a turning point in translating the user research into design. In addition, you will need to develop other artifacts, including wireframes, which must be thoroughly understood before any design work begins.

Personas

Personas are artifacts commonly produced by agencies that perform research. They are key tools for creating empathy among everyone involved in the project. They consist, by definition, of an archetype that represents the needs, behaviors and goals of a particular set of users.

One of my favorite examples of personas is the diptychs of Jason Travis. While not typical personas, which are generally accompanied by a textual explanation of the archetype, they still convey a user’s state of mind through the objects they carry. In order to build something for someone, you must first put yourself in their state of mind; this is one of the definitions of empathy. In the diptych below, you can quickly gauge how the person might think based on what they are carrying. A tremendous amount of information is conveyed through these objects.

Diptych
One of the diptychs of Jason Travis.

The challenge in developing personas for the Boeing project was the sheer scope and number of users. It could have easily led to 30 different archetypes, which would have been too many for the stakeholders to consume. To make our findings more digestible, users were divided into four major groups based on their activity or goal with the portal. Each group received one to five personas, based on real users. This was incredibly useful, because it enabled our team not only to construct a general archetype, but to expand on subtler aspects of the archetype through actual users. In the end, we had four archetypes, and nine total users to support those archetypes.

With these personas, we could attach a face to the actual navigation flows and interactions in Boeing’s customer portal. Our goal was to elicit empathy in our client and get them to feel the precise emotions their users felt so that they’d be willing to change the product for the better. To accomplish this, we chose to demonstrate the flows through customer journey maps.

Customer Journey Maps

Customer journey maps are graphs that demonstrate a user’s level of confidence and patience when performing various touch points in an interaction flow. Data is provided from an interview in which the user is guided through a particular task. As they move through the flow, we ask them how they feel at key intervals. For instance, if they are being guided through a shopping flow, we would let them perform the actions required, but when they click the “Buy now” button, we would ask how they feel about the process so far. They might be very frustrated or at relative ease. These feelings are then recorded, which gives us an emotional rhythm we can graph over time. Displaying the emotional journey in this way makes it easy for clients to understand, and it sometimes reveals shocking pain points.

Customer Journey Map
An example of a customer journey map.

For Boeing, the journey maps were eye-opening. By getting a visual representation of the emotional state of their customers, the client suddenly understood how important planning the user experience is to the product development process — and not only for the development phase, but for overall customer service as well. Presenting these and all of the other findings in the SUDA enabled us to begin tackling the design phase objectively, hand in hand with the client.

Delivery: Design And Interest Curves

There is a cognitive science theory called the “aesthetic usability effect.” It states that functional objects that look appealing inspire confidence in users, imparting in the users a higher tolerance for faults, a higher likelihood of overcoming learning curves and a slew of other benefits over less appealing alternatives. This is true even if the objects are actually harder to use! The theory also applies when you present your ideas and solutions to a client. Once you’ve prepared your materials, it is time to present them to the client. The more appealing the delivery, the more likely the solutions will be accepted.

Delivery is a critical moment in the transformation of a client’s attitude. If at all possible, make it face to face, and bring any executive-level sponsors from your company with you. With Boeing, we took our time to make sure that what we presented was visually appealing and well organized. Paying close attention to delivering the content builds trust; sloppy work will only work against your objective. Because most of you are designers, I am sure your presentations are incredibly visually appealing, but how do you construct your content so that it has the most impact? My advice: use interest curves.

Interest curves set the timing, or pace, of when to introduce various moments into your presentation. Take the following curve:

Poor interest curve

This shows interest points over time. It is also a poor interest curve. Now look at an optimal interest curve:

Optimal interest curve

You can see that you want to start off the presentation with something that immediately captures the attention of the audience. From there, slowly build to a climactic point (for us, that would be the journey maps), and end the presentation quickly thereafter. This will keep the audience simmering for more, and it generally leaves a great impression. This type of curve can be found in many forms of entertainment, from rock concerts to movies, and, for whatever reason, our minds are tuned to this pacing of interest. To create further interest, these curves can be embedded within each other, as the following graph demonstrates:

Fractal interest curve
Fractal interest curve

The point is, keep the client hooked with undulations of interesting moments, and make those moments grow in intensity until you impress your final point deep into their subconscious.

For The Win: Actions, Research And Delivery

Through your actions, by gathering customer insight and by creating meaningful, engaging visuals and deliverables that support your strategy, not only will you have concrete data to inform your designs and the project’s direction, but you’ll likely achieve that win-win. Getting clients on board with your recommendations translates to a more productive, successful project for everyone.

Good luck in transforming the minds of your clients!

(al)(fi)


© Leonard Souza for Smashing Magazine, 2011.

October 04 2011

13:00

Getting Experience with User Experience

So you know you want to shape the digital user experience of…something. Welcome to life after college. Now what? I often get asked by recent graduates “Where do I even start looking for experience and work?”

If you’re asking that question, then you’re already on the right track. Many UX veterans have changed careers to UX and eased their way into the field. There isn’t much of a clear path for those who are just starting out and have a formal UX related education. The challenge becomes getting a foot in the door and putting those book smarts to work with a career.

The experience you get and the amount you learn is most certainly dependent on your motivation, resourcefulness, and ability to work with others. One of the variables that can help cultivate your skills as a UX Professional is where you choose to incubate your skills.

I have found that the size and type of organization can play a role in the learning experience and growth. Let’s take a close look at how work environments can differ from each other for those looking to start careers in UX.

Start-up

All that money the big boys like Twitter and Facebook made didn’t come without blood, sweat, and caffeine. Get ready for lots of iterating, collaborating, and hat wearing. The workday may not be very structured and there may not be much in the way of a fancy UX lab or conferencing equipment. For someone new to UX, though, this can be a blessing. Startup UX is very grass roots. Gabi Moore sums it up eloquently:

For startups, you really can’t be perfect, you can’t afford all of the specialists that are needed to make a really awesome product. But something is always better than nothing. It’s just a matter of what that something can be.

You improvise user tests in loud cafes, you sketch on napkins, and you make presentations over Skype. Learning the basics and how to use the tools and resources available to you will help you appreciate and understand the fundamentals of user experience.

If you’re working at a start-up, you’ll notice that jobs have a tendency to grow or disappear very quickly, so it’s a good idea to keep in touch with your local user experience and start-up communities. They’ll serve as your mentors and provide a safety net as you grow into your user experience role.

Not only will you work very closely with people of a wide variety of skills, but you will get experience doing lots of things that aren’t strictly UX or even UX related. You’re likely to wear many hats within the company due to the pure lack of bodies to go around. Knowing how the gears of digital projects turn (outside of your own little UX corner) will make you a valuable asset to anyone lucky enough to hire you in the future.

Agency

In an agency, you’ll get good and you’ll get good fast. Agency experience is experience in dog years; although the work has a tendency to come in waves, those waves crash hard and loud. Be ready for long hours and high stress. Thanks to the way you’ll be billing your hours to the clients, you’ll likely be keeping one eye on the clock and the other on the quality of what you’re churning out. And you’ll have to speak to that quality and defend it to clients who don’t know you or your skills very well. You may work on 4 projects at a time, and once they are gone and out the door, that may be the last time you see or think about them.

It’s a little tricky to find an agency with a mentor who has the time to devote to formal training. Instead, you’re more likely to find someone with experience whom you can bounce questions and ideas off of. In most cases, it would benefit you to do as much reading and studying up as you can during the down times.

Though this may sound pretty rough, there are upsides: variety, efficiency, and interpersonal skills that will never become obsolete or out of date. Within a very short period of time, you may find yourself getting very comfortable interfacing with stakeholders, presenting to scary folks in big leather chairs, defending your work, and learning how to compromise (at least with less teeth-gritting than you may otherwise endure).

And speaking of getting comfortable in otherwise difficult situations, you might just find yourself picking up expertise in strange places—get ready to tap into your inner anthropologist. Within a 6-month period I learned the ins and outs of the designer fashion consignment industry all while learning how custom wedding invitations are glued. And it was complicated.

Small company

At a small company, you’ll spend your time with only a few projects, rather than the crashing project waves of an agency. You will get to know them inside and out. The benefit of working on fewer projects for longer periods of time is that you can build on your own research during the product lifecycle. You’ll get the chance to design something, then go back to test and refine. There is no better way to learn than from your own mistakes.

Where user experience has yet to make it into the lifeblood of the company, you’ll get to evangelize the importance of user experience to any outsiders and nonbelievers. You’ll learn how UX fits into the processes of managers, developers, visual designers, and marketers. Within a year you should be pretty good at wireframing, sketching, creating user flows, writing functional specs, and running and applying findings from all types of user testing.

You’re likely to work on a team of people in the same field as you, but with different philosophies and experience to bring to the table and learn from. Collaborating and working alongside like minds is a great way to get your feet wet while keeping a safety net in place for those times you mess up.

With fewer projects comes the risk of getting bored and the feeling that you may be falling behind with trends and new buzzwords. Make sure you love what you’re working on and push yourself to learn new skills.

Medium / large company

A larger company certainly has its advantages over the little guys. Part of the job here is evangelizing good user experience practices while learning how to win small battles. Asserting yourself as an expert (or what I call “UX street cred”) can make your job a joy, and it’s a powerful skill to have in your back pocket. You may get the chance to impact methodology, improve corporate outlook and strategy for user experience, and affect huge projects. Making a difference at a large company is an incredible feeling.

There is usually room for steady growth and more responsibility (as opposed to most “flatter,” smaller companies). The trade off is you may find yourself having to navigate a maze of high school-like politics and drama. One of the common responsibilities of a UX professional at a medium or large sized company is maintaining and being the guardian of human interface guidelines, functional specifications and personas. A lot of best practices should already be in place when you get there, so this is a great place to learn the basics.

Academia / corporate research

Some UXers really enjoy being at the front lines of technological innovation and industry standards with human computer interaction. The research that UX professionals cite to colleagues and clients, the stuff that’s supporting their recommendations, has to come from somewhere… and that somewhere is you. Be ready to get very good at running and facilitating structured and rigorous user tests.

By doing funded research, you’ll probably get access to testing labs and the ability to play with cool new technology years before the neighbor’s kid gets to. Researchers were designing and refining gestural recognition and touch interfaces decades before they made it into the Kinect and iPhone.

If you get a chance to work with students, you may find you learn just as much from them as they learn from you. And the best part? You’ll probably work very close with a professor; who could ask for a better mentor?

Keep in mind, that if you plan to leave this kind of position in the future, you’ll be leaving without gaining valuable experience with client/stakeholder management, presenting, and budgeting time. With the (potentially) flexible hours, this kind of job may pair well with occasional freelance work to make you a well-rounded UX machine (but shhh, don’t tell the brass).

Go forth and make us proud

The scale of and variability between companies and organizations obviously varies, as do the types of experience and work. Naturally, there are exceptions to all of these observations and they really depend on you. No matter how you chose to step into a UX career, there is no replacement for creating your own learning opportunities. That means not stopping when your workday ends, reading anything and everything UX related, and being active in your local and/or online UX community.

Question from the Editor: What kinds of places do you think best help prepare new UXers for a bold and bright career? Let us know in the comments!


Advertise here with BSA

September 20 2011

13:00

Design for Transcendence

Transcendent design takes us above and beyond the initial experience.

blinkingidiot

Transcendence is simply a word. We have a shared understanding of it, but the context that resonates with me is when design goes beyond ordinary limits to ultimately impact our behavior on a mass scale.

What design has to do with transcendence might strike most people in our community as either pure hyperbole or just the crazy ramblings of a UX designer waiting on an statement of work to be signed (er, maybe it is the latter). After all, as UX designers, it’s hard to imagine our wireframes causing someone to levitate or go through stigmata (though it’s easy for us to imagine a wireframe making someone want to be crucified).

While it’s critical that we target specific behaviors for our design solutions, it’s equally critical that we don’t fixate on those insights—after all, even if they are gleaned from such practices as contextual inquiry, they are ultimately just well founded assumptions. We need to allow for thinking that transcends methodology, something that enables the design to delight anyone who interfaces with it. That’s transcendent design.

Transcendence Enables Meaning

Let’s start with the meaning of the word transcendence. The fact that we have a shared understanding of it but that it connotes something unique to me is not unlike experiences we come across in UX design, or for that matter, any media or art. With all experiences there is an inter-objective reality that serves as a starting point—an agreed meaning between people, but then something happens to meaning where it ultimately evolves into the pure subjective reality of the individual.

Products are uniquely individual to the person using them. Whether that product is as broad as Facebook or as highly focused as a trip booking engine, the meaning is not inherent in the product itself, but in what psychological and emotional connections the individual draws through the product. The “experience” is cumulative, personal and residual. Our jurisdiction as designers can never exceed this space of shared understanding. We cannot make emotional connections for people or instill memories or contexts for them. We can only find the greatest common denominator—a mythic space in which these personal meanings are drawn.

In UX design, meaning can never really exist on a mass level. The significance of something, the ultimate expression of meaning, can only exist at an intrinsic personal level. As UX designers, we can only set the table—and define where that table lives. In other words, we can conceive of an environment for the attendees to have a magnificent dining experience—just not conceive of the experience itself. And we can focus on contexts so that our guests can find their way to the table and have a subjective takeaway, and hopefully return again and again.

In the traditional design processes, the burden of defining the product begins to rapidly encroach on our ability to sketch and experiment. Designers feel compelled to define the known design problem before having the chance to “transcend” towards new paradigms. Product definition can still begin early in a transcendent model but really only spikes after sufficient exploration of all the possibilities.

More than just persuasive design, which focuses on changing individual behaviors, transcendent design would look to identify an experience that can “transcend” the minutia of relativity, and ultimately impact anyone who uses the product. This notion runs almost counterintuitive to our user research sensibilities, which focuses on such audience segmentation activities as identifying contexts, deploying tribal marketing, long tail thinking and so on. The question “who are you designing for?” pervades every experience design thought process for good reason. We must consider these things, but not at the expense of a potentially innovative and meaningful individualized experience.

The design principles that emerge from strategic analysis should only go so far as to maintain focus, but never should they eclipse the possibility for the unexpected to occur. If we adhere to them too closely we may eclipse the ability to transcend the ordinary limits of design. When we give ourselves the latitude of untethered thinking we increase the possibility producing an experiential magic in our products.

This Sounds Scary. Why?

I’ve met many a UX designer who believes there is no mass audience, that experience can never resonate across tribes or psychographics. Within our discipline there is a scientific mentality—we research data, we observe behaviors, we deduce patterns and then we make a recommendation grounded in sound rationale. (Of course, those of us who toil on the agency side know that very few clients are willing to pay for this research).

It’s visually striking, sure, but has it really affected Pepsi’s bottom line?

But these tactics are not meant to be ends. Reaching people in context is a starting point, and their experiences are simply an end point. The body of UX design exists in the broad imagination in between. Yes, you may get socially conscious Gen-Y people to vote on a good cause in a Pepsi Refresh campaign, but what if that campaign exceeds the audience it intended? And it has, which I would say that’s a good thing (whether Pepsi’s bottom line has been impacted is another story).

Transcendent design poses the question to our community: Who are you without use cases and scenarios and personas? Without it we are simply creative. All our deliverables are just tools with which to creatively synthesize the connections between insights into what’s hopefully a vision for new paradigms. We are risk takers; we are people who can balance out our concern for the user with a vision for mass impact.

Transcendent Design Already Exists

Just as we can acknowledge the remote thickets of subjectivity, we can also cultivate the domain of things that bind us together–things that appeal to a common mythology.

Let’s look at a hypothetical family’s visit to the Seattle’s Space Needle. The father may be going because he feels he has to hit the major landmarks of a short trip with his kid. He’s stressed out with the child’s whining about needing a bathroom, his head buried into his Lonely Planet Guide so he can find how to get to it. His child may have other goals; he may be thinking, “Why do I have to go to that strange looking tower in the sky? It looks ugly I’d rather go to Gymboree or Disneyland.” (UX designers reading this should already thinking about how to reach these people in their contexts.)

When the family gets to the top of the Space Needle, something happens; some great democratizing force of tranquility. The majesty of a panoramic view of the sparkling Puget Sound renders them silent. The father may be thinking about how he’s so happy he can afford to treat his children to travel experiences. He may be feeling simply grateful. His child may be marveling at human engineering. He may be thinking about how mankind could build such a thing.

Together, they share an experience that has somehow transcended their personal contexts. The designer simply and rightly assumed: create a manmade object that delivers something unique, transcendent and undeniably impressive. Everyone, regardless of their gender, tribe and religion leaves the Space Needle with both a common “experience” and a personal one.

A Transcendent Design Case Study: Netflix

If it’s the common experience that we must focus on, it must be awesome and undeniably original. It must unify and go beyond the expected.

Generally, one could argue that transcendent design in digital media usually involves a UX innovator humanizing a new technology on a mass scale. Reed Hastings, the CEO of Netflix, was an engineer at heart. When he acquired a big late fee for misplacing a video and was afraid to tell his wife, Hastings came up with the idea for Netflix. Certainly, everyone prior to 1998 could relate to this problem. We all rented videos at the video store. And we all had late fees.

Hastings dreamt of a broad design that allowed people to subscribe and order DVDs to return at their leisure. No one, regardless of his context or demographic, could deny the new system was better than the last.

But transcendent design didn’t stop at the inception of Netflix. The company continued to transcend the expected—creating streaming video on-demand for a monthly fee, and by designing a refined recommendation algorithm that allows the product to intelligently suggest titles the user would never have discovered through conventional search.

If Hastings had allowed himself to slog through audience segmentation studies would Netflix have ever been born? Would he have started the company if he didn’t feel on a personal level the problem he was trying to solve? Of course, Netflix is also famous for the personalized algorithms that deliver amazingly accurate recommendations based on user behavior. But this came only after thinking of a disruptive business model that people renting from their local Blockbuster didn’t even think was possible.

As designers, perhaps it’s safe to assume that we are not always that different from each other. If the idea is transcendent enough, focusing on our differences won’t articulate it. Only by looking at our similarities can we find the right vocabulary for a transcendent design.

Bringing Transcendent Thinking into the Experience Design Process

Many UX designers have eclectic backgrounds—we might even be accused of being dilettantes. Where I work, I sit across from someone that used to be an underwater videographer. Across the room, there’s an abstract painter. Almost all the UX designers I’ve met are very interested in human beings and harbor a creative impulse to tell a story through design. Too often, the UX designer is framed to clients as the egghead who comes in after the Creative Director to clean up the design and have it “make sense.” And all too often have I met the UX designer who feels underutilized as a creative partner.

Leveraging transcendent thinking is well within our wheelhouse. We are not here to simply solve problems but to imagine experiences for which problems don’t yet exist.

Regardless of the design process, we can integrate questions into our workflow that can help us embark on an imaginative undertaking:

  • What makes this product change the behavior of a mass audience (perhaps something that ties together the various audiences you’ve identified in your user research)
  • What aspect of this product is limited by context?
  • Are we telling a story through this channel that can’t be told more effectively through another channel?
  • If we didn’t create this product, would it matter to the people we’re designing for?
  • What are the archetypal human conditions this product will solve? (i.e. “it will restore love into your life,” etc.)

It’s hard to push for ambition and innovation if the culture of your workplace doesn’t really share those values. But life isn’t about just having a job. If you believe experience design can impact millions of people then push for it any way or work somewhere else. But if we ask these questions we can always move the needle on the UX spectrum closer to innovation and imagination. We can also show that our value is more than in just being brought in to “clean things up,” but to make things that never were.


Advertise here with BSA

August 04 2011

13:00

July UX Resource Roundup

After a long hiatus, UX Booth is rebooting monthly roundups. In these roundups, look for a broad range of (sometimes bizarre) perspectives on user experience from many different Web-based resources. We’ll try and make horizon-broadening fun.

In this month’s roundup, you’ll learn about teledildonics, find out that tossing an egg will likely cause it to break, and see an OS review that’s probably longer than the user manual (and way, way better).

Netflix’ Big Fail

Tara the Shiba Inu

UX luminary Peter Merholz of Adaptive Path shares his feelings about the recent Netflix developments on the Harvard Business Review blog. He argues that Netflix has gotten a bit carried away with its success and is officially failing the customer empathy test. Short post, but worth the read.

Search: A Biography

Wikimedia Commons

Aristotle once said that if you would understand anything, observe its beginning and its development. So that’s why we suggest you check out this post on the evolution of the Web search to see how humble search beginnings evolved into what they are today.

Telling a Story on the Web

orbitgal

As we’ve pointed out before, crafting an experience for the Web is like telling a good story. There are characters, appropriate settings, and a narrative. Thanks in part to his background in journalism and media studies, author Robert Mills discusses how designers can learn from other types of storytelling.

The Monumental Ars Lion Review

Well, it’s sort of a lion.

Emuzesto

Behold the beast that is the John Siracusa review of Lion (from Ars Technica). While the article is obsessively exhaustive in all aspects of the most recent Apple OS addition, there are great bits on new interactions and interfaces. Also, bonus points for a Game of Thrones reference on page 13 (of a whopping 19).

Instinct in UX (it’s science!)

StaraBlazkova

“If you throw a rubber ball, it will bounce. If you toss an egg, it most likely won’t,” says author Taylor Bastien, which (hopefully) seems obvious. But he makes his point early in this article that instinct and intuition is important in all experience, especially those that are designed. Bastien delves into some psychological principals behind human behavior, and it all makes for a great read.

An Unlikely Tale of Usability Triumph

Killiondude

The holy grail of HCI is to bridge interaction gaps between humans and computers—issues that experience designers face every day. Christopher Mims shares with us a short case study about a triumph in usability design through teledildonics. We’re going to let you find out for yourself what that word means (hint: it’s what it sounds like).

A Chat with Mike Kruzeniski

Jan Mehlich

Core77 interviews Mike Kruzeniski, Design Lead at the Windows Phone design studio out in Redmond. He shares his personal outlook on interaction design and usability, and ends his interview by quickly explaining the 5 things that every designer should know (spoiler: knowing the basics is important).

That Table Looks Wobbly…

Simongibbons

Tables are pretty much poised, by nature, to be usability troublemakers without the proper care and attention. This article takes a look at a few good practices to adopt while creating tables so that they’re not only successful sorters, but also user-friendly.

A Man’s Quest to Pinpoint Mobile Context

Mohammad Nowfal

Mobile context: what does it mean!? Though fairly weighty in theoretical discourse, this thorough post by Jason Grigsby examines where the mobile medium fits in with the greater media picture. He includes a good deal of context to his argument as well, so make sure you’ve got time to get happily lost in design conversation.

.net Usability Case Study

After running usability tests before launch, .net Magazine documented the testing process in this informative post. Author Alastair Campbell outlines how .Net used A/B testing, eye-tracking, and Google’s Website Optimizer to reach their final product.

Moving on

Do you feel slightly more enlightened? Let us know what you think in the comments section. Also, if you think we missed something really, truly amazing, let us know at our resource section. And be sure to see all the other great resources that didn’t make the spotlight cut.


Advertise here with BSA

July 26 2011

13:00

10 Absentee UX Features on Top e-Commerce Sites

These carts are broken.

The following are some notable missing UX features in most online shopping.

Credit: Mightyohm

eCommerce sites are competing for customer attention and loyalty. The user experience features included in a site are the focal points for engaging customers, and can make or break the purchase process.

Editor’s note: In the spirit of full disclosure, the author of this article is also the founder of Usography.

But UX features aren’t free. In some cases, they are very, very expensive. Selecting the right feature set is an exercise that should be as well-informed as possible, and should take into account available resources, industry best practices, and the competitive landscape.

Usography reviewed 100 top e-commerce sites for its recently published Retailer UX Audit. In the process of conducting the audit, we were surprised to discover the user experience features that were missing from top e-commerce sites, sites that receive millions of visitors per month, and earn millions of dollars in revenue.

Here we’ll take a look at ten UX features that were missing from 90 percent or more of the sites we reviewed for the Spring 2011 UX Audit. We selected these features (from the complete feature list) based on their infrequent occurrence on e-commerce sites, and on their potential to engage customers and increase sales. They are presented below in order of decreasing occurrence. In parentheses next to each feature is the number of sites we reviewed that had the feature in the Spring 2011 UX Audit.

Product Videos (9/100)

A minute of video is worth 1.8 million words, according to Dr. James McQuivey of Forrester, a leading technology research firm. Product videos engage attention and convey information in a way that doesn’t require much effort on the part of users. Videos bring a product to life more than static images. Because of their potential for increasing sales as well as improving search engine placement, product videos are likely to become a standard feature on e-commerce product pages in the near future.

However, retail sites have been slow to include them to date. Some e-commerce sites that do include them are Zappo’s (illustrated below), Patagonia, QVC and Burberry.

Zappos

Zappos, hitting a UX home run.

Order Online, Pickup in Store (9/100)

Walmart’s e-commerce site was in the news earlier this year for starting to offer “order online, pickup in store” functionality. Pairing the convenience of online shopping with the immediate access of a store location is a winning combination that less than 10% of the sites we reviewed had taken advantage of. Some of the sites we reviewed that did have this feature, in addition to Walmart, were Nordstrom (illustrated below), Sears, and Container Store.

Admittedly, supporting this feature requires substantial backend logistics. If someone purchases a product in the store, and someone is looking at the same item online, the store inventory has to let the online catalog know in real time that one fewer of that product is available. Keeping store inventory and online inventory in sync is a feat that not every retailer can manage with current technology, but it is a UX feature that customers are likely to look for in increasing numbers as more retailers offer it.

Nordstrom

Nordstrom’s Pickup option.

Price Drop Alert (5/100)

Price is a key determining factor for purchase decisions. Customers often hop from one site to the next to find the best price. It makes sense, then, to let customers know when the price of a product they have indicated an interest in drops. It’s an incentive to return and buy it. Customers have to surrender their email address to use this feature, so it’s a win-win situation.

Nevertheless, only 5 of 100 top e-retailers had this feature in Usography’s most recent UX Audit. Among them were Newegg (illustrated below), Tool King, and Rugs USA. Of the sites that did offer this feature, the most common UX design was a Price Alert link adjacent to the product price or Add to Cart button.

Newegg

Newegg’s price drop alert.

Customer Product Images (5/100)

Product catalog images are idealized views of a product, paired with idealized people. Customers’ homes and bodies are different. They realize that, and it causes hesitation when shopping online: What will that look like on me? Or in my house?

To deal with this objection head-on, some retailers are allowing customers to post their own image of a product they have purchased directly on that product’s detail page. There is a risk, of course, that a less than perfect image will break the sale. But retailers like Petco (illustrated below), Northern Tool, and Zales feel that the risk is outweighed by the persuasive power of customers who bought the item and liked it enough to return and post a picture. In Zales product reviews, customers upload images that show how diamond products look on their hands. In the Petco customer image below, a cute Chihuahua models a dress on the product’s detail page.

Petco

Chihuahua model at Petco.com

Product Details in Spanish (4/100)

Given the census data regarding the growth of the hispanic population in the USA, it is astonishing that only 4 out of the 100 top retailers reviewed in the UX Audit include the option on product detail pages to view the page in Spanish. Granted, there is a substantial cost associated with translating a massive product catalog into another language. But having a product page that a percentage of your site visitors can’t read is a large, and growing, missed opportunity. A couple of sites that did include Spanish product pages were Victoria’s Secret (illustrated below) and Rooms To Go.

Victoria's Secret

Victoria’s Secret acknowledges their multilingual audience.

Customer Product Tagging (3/100)

Letting customers create their own tags for products keeps the taxonomy fresh and relevant. It also gets customers involved with products that they like. When a customer sees that another customer described a product in a certain way, it seems more authentic and natural than the terms marketers have devised to describe that same product. After all, they weren’t paid to say it.

Furthermore, customers typically have to log in in order to tag a product, which is a step that supports ongoing loyalty and self-investment. The three sites we reviewed that included this feature were Urban Outfitters (illustrated below), Amazon.com, and Zappo’s.

Urban Outfitters

Crowdsourced tagging at Urban Outfitters

Co-Shopping (2/100)

Co-shopping is UX feature that lets people in different locations view the same product page, and chat in a sidebar about the product. Usography has noted a decrease in the availability of this feature since Buy.com purchased DecisionStep, creators of the leading co-shopping solution called Shop Together.

The decrease in availability is unfortunate, because there are situations in which people who are not at the same location want to view products together, chat about them, navigate to other products, etc. People working for the same company who are located in different cities, or even spouses who are temporarily apart but need to make an online purchase decision, can use co-shopping to complete the transaction. At the time of our Spring 2011 UX Audit, the only retail sites we reviewed that offered the co-shopping feature were Buy.com and Dell.com (illustrated below).

Dell.com

Coshopping, alive and well at Dell.

BFF/Text Us (1/100)

Charlotte Russe was the only site we reviewed that had this feature. It makes sense that any retailer that sells to Millennials would set up a communication channel based on texting. But texting is not just for Millennials. SMS text messaging is the most widely used data application in the world, with over 2 billion active users! So why is Charlotte Russe (illustrated below) alone out there with this feature?

Charlotte Russe

Charlotte Russe sets up texting.

What Other Customers Are Viewing Now (1/100)

Customers looking for ideas or wanting to know what items are hot right now may like a window into what other customers are viewing at any given moment in time. Buy.com has an elegant feature that does just that. It’s hard to appreciate the impact of this UX feature in the static image below. It’s worth a look at it in action on Buy.com to see how such a feature could enhance browsing and serendipity.

Buy.com

Buy.com allows users to see who’s looking at what.

Virtual Try-On (0/100)

Well, none of the retailers we reviewed had this feature. At least not on the product detail page (if a feature is buried somewhere outside the main product catalog path, we didn’t count it.) Why do we include it here? Because it is arriving on the scene, and will usher in a more realistic form of online shopping that makes store visits less necessary for certain categories of merchandise. Virtual Try-On has recently made advances in consumer awareness through augmented reality apps that are appearing on the scene, such as Zugara (shown below as implemented on the Fashionista / Tobi site).

The feature isn’t limited to apparel shops, although that’s the product category that seems to garner the most attention. It could also show BMW customers what they would look like pulling that new metallic blue Series 7 into the driveway. Or, how your living room would look with different kinds of furniture and decor. The Virtual Try-On feature is so compelling for customer engagement that we’ll continue to include it in the UX Audit, even with a score of 0.

Zugara

Zugara helps users see possibilities, with a little help from augmented reality (AR).

Editor’s note: For more info about the technology behind augmented reality (which is needed for virtual try-ons), check out this explainer at How Stuff Works.

Onwards…

UX Features are focal points of attention on e-commerce site. Understanding how your customers shop for your products, and what competitors in that category offer in terms of features, are key building blocks in a winning UX strategy.


Advertise here with BSA

June 24 2011

10:00

Bridging the Designer-Developer Gap

How are ‘Right brainers’ different from ‘Left Brainers’?

Well, this is not a zoology question being thrown at you. If you are working on a team dealing with websites / apps, and if there is a design team working with a team of developers, you probably would be witnessing the answer to this question every single day you work!

This is an inevitable fact, and it is this difference that makes the two communities thrive, and the best team is the one which finds a way to converge the collective wisdom of both these ‘species’ into the final stage of their deliverable – An ideal human-machine interaction experience, filled with life and satisfaction.

But in reality, most of the teams stumble at this moment, when the ideologies of both of them should be given weight and injected into the final product, and this shortcoming, is the whole essence of this article.

What is the gap?

Every man-made object is created based on a single principle. Make a task easier and faster to accomplish, and for each object/gadget, the ‘form’ (the physical appearance) and ‘function’ (the way it responds and processes the task) plays an important role. The same logic prevails, when it comes to computer-based systems also. Here the ‘form’ is – ‘Look and Feel’ (Usability of UI and Interaction), and ‘function’ is – ‘performance and efficiency’ (Efficiency of the empowering technology implementation)

Talking about computer based interfaces, designers are in charge of ‘Form’, and developers, ‘Function’. In short an app is the work of developers, hidden below the skin and skeleton created by the designers. The vital part is to retain the ‘skin and skeleton’ till the end product without any change whatsoever, and this is the most unattended part of the process in most of the teams. Results are half baked products that are unusable, in spite of the numerous hours of effort put in by the designers, after painstakingly drafting wireframes, Visual Comps, and Prototypes, only to find all those ‘details’ ignored vehemently in the end product. It is not a pleasant experience to find a deployed app, without that gradient on hover implemented, after you spent hours finalizing the color scheme.

This ‘erosion’ in the ‘form’ proposed by the design team, when the product reaches its final stages of development constitutes the majority of the ‘Gap’.

What creates this gap?

There is an array of reasons we can attribute such a gap to. Here are some practical points, which play an important role in bridging the gap.

  • The missing link – Front-end Engineering
  • Awareness of design principles and usability
  • Team work
  • The ‘Hybrid’ designer
  • Passion for the finished product
  • Designer – Developer meetings

The missing link – Front-end Engineering

Often, the role of a design team comes to an end by delivering the Visual comps, by the visual designer, out of the wireframes. The dev team takes over, and from here the erosion starts slowly, ignoring and omitting the details in the design, concentrating only on the ‘function’, to the extent that, the page looks completely disconnected from the visual design.

So apparently, the gap between the Visual comps and the functional page is where the actual work needs to be done.

A front-end engineer comes in really handy in such a scenario, and forms an integral part of a design team, by considerably reducing the gap between the visual comps, and the functional page. An ideal candidate for this position should have expertise in XHTML, CSS and JS, which enables him to create clickable prototypes matching the Visual comps, or at least they’re as close as possible. By the addition of such a skill set, the dev team can concentrate more on ‘function’, as they always do, and the design team can be rest assured that, all the details are captured visually as well.

Awareness of design principles and usability

A developer is not destined to just code the application to perfection. It’s an added boon, in having a design conscious developer on board and avoid some basic mistakes which may have arisen due to lack of basic knowledge of design. Most of the shortcomings and problems that widen the gap between the designer and developer, is the missing knowledge of design principles, and failing to understand the importance of a good design and how it plays an important role in increasing the credibility and usability of a system. A design team working in isolation from a dev team, and vice versa, is not going to be able to bridge the gap. In fact, both the team should co-exist and interact by exchanging ideas and conducting knowledge sharing sessions and talks. This can help build a rapport as well as create a common ground as far as awareness of design is concerned.

This is really important for the sustained growth of a team as a whole, and also helps in eliminating critical differences at any point during the life of an application

Teamwork

It’s the team which gets the credit at the end of a successful project, and every member contributes his part to the bigger cause. Working in a team of designers and developers is always going to be a challenge, where ideas are subject to conflict and solutions are always a result of brainstorming and negotiation.

As always, it takes a lot of team playing skills, to convince the developer to stick to the design guidelines and come up with an appealing application that works and looks good at the same time. Creating a good rapport with the team members is vital, and often it can solve most of the shortcomings related to bridging the designer-developer gap. Both the teams should be willing to tackle any obstacles together, whether design or development related.

The ‘Hybrid’ designer

Delivery of XHTML pages to the dev team, alone doesn’t end the role of the design team in the whole process. He should be able to keep a close tab on the development process and should ideally understand the basics of coding, to tackle a possible deviation from the design guidelines, due to technical limitations and reasons native to the technology used.

This makes a multi-skilled designer, an integral part of any design team. At a time where people are hired based on core skill set expertise, hybrid designers can make the real difference, and its high time the hiring managers realize this and open up the doors for generalization also, rather than concentrate only on specialization!

Passion for the ‘Finished product’

Most of the time, an output-oriented team can have adverse effect on the final deliverable if they don’t see the bigger picture, which is the product itself!

It is the passion to see the final product emerge perfectly, which is missing among most of the team members, which results in those loopholes and shortcomings in the whole product. It’s a team effort and each individual should see that their contribution is towards a larger goal and shed the mindset of just meeting their individual milestones. This is an area where a closely knit team, scores over large teams, with hundreds of members, working together but yet in isolation.

Team rapport is the underlining factor!

Designer – Developer meetings

As mentioned, it is really important to take the ideas of both the designers and developers and make it something productive and useful. Meetings comprising both these ‘species’ together would serve the purpose. There would be some initial hiccups, due to the contrasting opinions, but believe me, its worth the effort, and the rapport and confidence that such a meeting instills within the team will be really commendable and helpful for completing better products in the end.

The Result

With the awareness of usability and user experience moving up the ladder, products are going to be judged based on their performance and ease of use, and it’s really vital to bridge this gap as early as possible, and move towards the world of usable and straight forward human-machine interaction, which leaves an ever lasting impression on the user.

April 30 2011

10:00

Blog Post Formatting: Make Reading For Visitors Better Experience

Finally we’re at the stage where we can use some of our design skills! In the next few articles we will look at how to make our content easy to read and scan; in the next post we’ll work on grabbing attention with good headlines! Your content won’t be read if you don’t add kick ass headlines! And your content won’t be read if it isn’t formatted to be easy, pleasant and quick to read! Many bloggers do not consider just how important these points are in the beginning, I didn’t either, but after being online so long, I really appreciate good formatting and yes, catchy headlines work on me as well as they work on anyone else!

So what exactly is good formatting and how do you give you visitors a better reading experience?

Text Formatting

Choose The Right Font

Pick the right font for headlines and content ( paragraphs) – what’s right depends on personal taste and the site topic you’re writing about of course, but take a look at this article – How to Safely Match Web Design and Typography for a more in depth explanation. Never underestimate the power of proper typography, it can be the difference between whether or not people read your articles.

Some of our readers have already noticed we use a serif typeface for headlines, which according to some theories, isn’t the best style of font to use for headlines. Well, I am writing this guide to remind myself how important it is to have really good and thought through typography and will change the CSS styling to 1WD shortly after publishing this article. How about that – case study in action!

Tip: Just to be clear, don’t use more than 2 fonts on your site! It’s ok to use different fonts for headlines and content, but if you use too many fonts your site will probably look very unprofessional. There are some exceptions for quotes, logo, just don’t get crazy, play with different CSS styles not fonts!

Importance of Typography

Still not convinced typography is important? Ok, then I suggest you read this article – What’s Left? The author removes all the content from blogs to show what happens when you a blog is stripped of everything but the design. While the article is about needless website redesigns, I enjoyed this simple test to see why “content is king” – for blogs content actually is everything!

If you would like to see what happens when you strip a site of it’s design, check MIN. MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

MIN · Examine the foundations of any site design..jpg

Related reading for better typography tools – Ultimate List of 32 Font And Typography Tools.

Paragraphs

Text Size

This is a tricky point too, because you can increase text size in a browser with a few clicks, but still wouldn’t it be better if we could read content right away when we visit a site? I think different formatting and distractions are the main reasons why feed readers, Zite, FlipBoard and Readability are so popular! Many blogs have strange text formatting, too many ads and social media which distract from the content itself! If you can’t remove ads or social buttons, take the time and care to create a great reading experience! How big should your text size be? Again it depends on your audience, but I think 14px is a good starting point – not too small, not too big.

Use Sans-Serif Typeface For Content

Use sans-serif font for content, it’s easier to read letters without serifs (I know, I know Times New Roman is serif and it’s a common typeface that people use when using Word, but online, sans-serif fonts seem to work much better, they also make big chunks of text much easier and faster to scan).

Separate big chunks of information

Paragraphs should not be more than 3-4 sentences. Imagine how hard it would be for you to read text without any formatting? Just one huge pile of words and sentences with no visual difference or hierarchy between the different topics, paragraphs and headings! Imagine yourself sitting at a desk full of different papers, notes, tools – how do you feel? Overwhelmed? There’s a good reason minimalism is so popular in web design! Put clear separation in your content as well!

Headings

Headings are both for clear content separation and search engines! You should use a lot of headings for the same reason you need to separate paragraphs clearly. With these headings you can grab reader’s attention or lose it! If there are no headings at all – you’ve already lost!

While H1 always will be your blog content headline, make use of H2 and H3 stylings as well. I don’t recommend using H5,H6 – it will just create confusion.

  • H2: use it to describe the main article topics, usually you’ll have 3-5 major points in an average article
  • H3: goes to explain some lesser points, Notice how I formatted this article? There was a paragraph section (H2) and since I was explaining a lot of different sub-topics (H3) there, I dropped it down for much easier reading!

Just go with H2 and H3 and you’ll do great! If you need to separate your content even more I would suggest using bullet points or numbered lists, but more about them later.

Here are some fonts for you to pick from which will help your headlines get noticed – 40 Awesome Free Fonts for Big Headlines

Bullet points, numbered lists

Use bullet points or numbered lists whenever you’re listing something. See how I did it with headings description? Readers will easily recognize that I have created a list and explained similar points and list points are easy to scan and read. No wonder list posts have been so popular, for most readers, the only way they read a post is by quickly scanning it, bookmarking it and then they go on to the next site.

Images


I work hard to find the right images, because I believe visual memory is the strongest one! If you read a post and want to go back again you may not remember site names or web addresses, but you will definitely remember a well designed, visually appealing site! How about using screenshots from a website or product you’re featuring?

However if your article isn’t about websites or online tools, it’s still a good idea to find the RIGHT images which visually convey your opinion or stand. Many bloggers don’t take this point serious though they should! Visual presentation is so powerful! I bet most of you reading this article right now always start with wire-framing or sketching your design to get an idea of how it will look! We make notes on paper because it’s a way for our thoughts to become real, isn’t it smart to get visual in blog posts too? If you’re writing about fear – show a desperate man in a picture, if you talk about power – show skyscrapers, freedom – sky, clouds! Help your readers get their imagination working!

Quotes

Do you remember writing essays and quoting very well known authors to lend a certain auhtority to your work? Great, relevant quotes will make you look more professional – good, relevant quotes show you know what you’re talking about and who the pioneers or leaders in your industry are. This is a great way to add some smart content to your article. You can use quotes to support your opinion, and then explain how they relate to the article topic.

To be honest I don’t do this often yet, just because I forget the sources to those great quotes and end up writing them in my own words, but when I am reading books, a great quote can be a powerful thing.!

Some people just can say something in a few words which we cannot!

Quote the most attention grabbing content in article! I’ve seen this a lot in newspapers, it’s a great way to get scanners to read your article just because they want to find where that quote has been used in context!

Using bold, italic

Bolding is used to emphasize just a few words or a sentence in the article. The previous sentence is an example of how I emphasized just those words which are crucial to explain how to use bold.

Italic is used differently, I usually use it for tips, comments I might have which seem little bit out of context. Basically italic is similar to bold, but draws less attention.

Interlinking

Oh, this is not directly related with blog post formatting, but I wanted to include it, because it will help you in the writing process! Once you feel you’re writing an article which has some points that you’ve already coveredt, link to that article! If you have any related resources to the post, let people know about them!

And yes, if you’ve found some great thought provoking article which could help your readers understand some points better – link to it! Yes, you’re linking outside, but because of valuable content people come back to you! With Twitter you don’t just link to your own articles all the time, you retweet (RT), it’s a great way to share some exceptional articles or tools you’ve discovered! You provide value – do it with your own articles too and your readers will appreciate you by doing so!

Typography Tools And CSS Frameworks With Typography In Mind

Here I found several tools to help you get started to improve your typography in web designs.

Awesome FontStacks

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code! This website will help you to remove the pain from guessing what kind of fonts you should use together! It will do the hardest part for you, you just have to choose which font stacks you want to use – sans-serif, serif, monospaced fonts. Fontstacks will automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste.

Awesome Fontstacks-1.jpg

Type-A-File

A really awesome way to get your site up to typographic snuff. It uses traditional semantic HTML tags along with some additional semantic classes named after commonly occurring elements in print design to create a solid typographic toolkit for your website, whoever you are.

Pick from several different stylings and sizes..and then download your css file immediately!

Type-a-file.jpg

FontSquirel : FontFace

Download hundreds of prepackaged @font-face kits which include multiple font formats, CSS and HTML code. This site is similar to FontStacks but it offers a much better variety of fonts.

Font Squirrel | Download Hundreds of Free @font-face Fonts.jpg

Better Web Readability Project – CSS Library

The main purpose of this project is to contribute to better reading experience on the screen by using CSS typography library. View typography demo

Typography.jpg

The Golden Grid

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites. While this framework’s main intention is for grids, it has Typographic style too. View Typography demo

The Golden Grid (typography).jpg

PX To Em

With a very simple function – convert, get CSS, learn, it’s all what this site does, but does its job well! Use Em’s because in that way when you zoom your browser, all other font elements will scale accordingly.

PXtoEM.com_ PX to EM conversion made simple..jpg

BluePrintCSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. View typography demo

Blueprint HTML Elements Tests.jpg

BaseLine

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.View Typography demo

Baseline - Typography.jpg

Atatonic CSS Framework

The Atatonic CSS Framework is a basic set-up of typography and grid tools. Atatonic is meant to make your web—life easier and is created to provide a stable grid and solid typography. View demo

Atatonic CSS framework — Demo.jpg

InuitCSS

This framework does a lot of things, but we are looking at typography. inuit.css has some little typographical niceties built into it from the start. It also has a typographical scale and a (loose) baseline to get you well on your way.

inuit.css—cooler than a polar bear’s toenails….jpg

Emastic

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. View typography demohandy blog template.

Emastic - CSS Grid Framework (typography).jpg

BlueTrip CSS Framework

BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing. Download the package, include the images and stylesheets in your site structure, and get going!View demo

BlueTrip CSS Typography - A Fusion of Blueprint and Tripoli.jpg

April 28 2011

13:30

UX London 2011 In Review

One of the biggest UX events of the year recently came and passed. Were you there? In case you weren’t, we’ve compiled a two-part writeup sharing all that we learned. Here’s our summary of this year’s UX London event.

To help report from the front lines, I recruited local, Boston-based designer, Sean Duhame. His background in set design and prop construction – and his degree in illustration – ensured that we gave readers markedly different perspectives on the event. Sean’s coverage of the UX London workshops will follow in a later article.

Getting there

Getting over to jolly ol’ London proved quite simple, despite a few hiccups. Sean had never been to the UK before and I booked two separate, overnight flights to London’s Heathrow airport. Naturally, we departed from Boston on Monday evening to arrive dreadfully early on Tuesday morning (UK is 5 hours ahead of us on the East Coast). That alone wouldn’t have been too bad, except that I realized our cell phones didn’t work only after we arrived. D’oh. We were subsequently left to wander around Heathrow airport looking for one another, all on very little sleep.

Pro tip: If you’re flying from the United States to the UK with a group, consider a more defined meeting point than “we’ll figure it out when we get there.”

We eventually did find one another, though. Eighteen pounds (30-ish dollars) and a short taxi ride later we had arrived. And boy, was it beautiful.

Getting settled

As soon as you set foot in The Cumberland Hotel, it’s obvious that ClearLeft has paired a great event with a great venue. Nestled comfortably next to London’s Marble Arch (not to mention an ample shopping district) with convenient access to the London Underground, The Cumberland has it all – even moderately-hard-to-use, slightly over-designed bathroom fixtures! Fixtures notwithstanding, the art-deco inspired Cumberland Hotel conveys an air of prestige that all attendees will appreciate.

There’s only two other mentionables regarding the Cumberland Hotel. First, the wireless in the hotel is paid-access only. Because the conference didn’t begin until Wednesday, this left the early birds wanting for an entire day. Not to worry, though; there’s a coffee shop around the corner with free access. Additionally, ClearLeft provides free wifi on the days of the event.

Second, it worth be noting that the coffee served at the event is quite good. On most days it was served piping hot, strong and delicious. Maybe it’s just because I attend more than a couple of conferences throughout the year, but the quality of a conference’s coffee matters to me. Three cheers to both The Cumberland Hotel and ClearLeft for hitting a home run there.

Getting Started

The morning of, a full, English breakfast was included for those that stayed at the Cumberland. For those that didn’t, pastries and coffee fit the bill. Around 9am Andy Budd welcomed everyone to the event and prepped us all on the massive learning ahead.

The rest, as they say, is history. Sean and I live-tweeted updates from the @uxboothlive twitter account. (For those of who that tuned in: what did you make of it?) I noticed, also, that the event was collaboratively outlined and added to over on Lanyrd.com. See UX London 2011′s Lanyrd page for a crowd-sourced version of this writeup.

Without further adieu, though, here’s my account of the presentations from the second row of UX London, 2011:

Alan Cooper

These Sketch notes illustrate some Alan’s major points: efficiency, collaboration, and autonomy.

© Amanda Wright 2011. Used with permission.

Alan’s (@mralancooper) presentation was the perfect way to begin this year’s UX London event. Inspiring as it was insightful, Alan’s “It’s All Us,” described where we’ve come from, the challenges we presently face, and what we’re going up against as a design community. It’s worth noting how useful this sort of recap is for those of us who are new to this profession. The software world has seen a tectonic shift in the past two decades, whether we were there for it or not.

Alan called our attention to its effects. An economy of atoms – based on efficiency – has given way to an economy of bits – based on efficacy. Management structures that worked for the former don’t necessarily hold for the latter. Today, our products are defined what makes them different. And “you can’t get that right [by managing] from a distance,” Alan says.

Successful software teams marry the best parts of Interaction design and Agile development processes to manage themselves. The natural yin/yang struggle between them adds a healthy tension – and a means of accountability – to the creative process. Today’s contemporary, agile approach reintegrates deciding and doing. It doesn’t need yesterday’s managers. And therein lies our call to action: “it’s all us, there’s no ‘them.’”

Lou Rosenfeld

Promptly after Alan finished his presentation on the possibilities afforded to today’s designers, Lou (@lourosenfeld) – of Polarbear book and Rosenfeld media fame – took the stage and changed our minds regarding the “traditional” design process.

For those of you unfamiliar with Lou Rosenfeld and Alan Cooper, both of these presenters are luminaries in the world of UX Design. They’ve each written a landmark textbook in their respective fields. But whereas their views often overlap with regards to user-centered design, their presentations could not have differed more. In contrast to the empowering, even liberating views proffered by Mr. Alan Cooper, Lou’s “Redesign Must Die” forced us to ask some very tough questions.

Namely, Lou contends that some of today’s laziest designers offer their clients (what amounts to) little more than half-baked redesigns of their existing sites. He says this from experience, at least vicariously. His own alma mater, The University of Michigan, has tried over 12 different variations of their first website with no end in sight.

If it’s a universally acknowledged project anti-pattern, why does it persist?

The problem with the “redesign it” approach is that its easy to prescribe and hard to avoid (at least from a competitive standpoint). Redesigns can successfully ignore the difficult, systemic issues that often lie beneath our clients’ more readily apparent woes.

Lou explains that we must collectively refine our client’s approach to Design rather than approach their design outright. If it’s the right thing to do we should help clients dive deeper and refine what’s they’ve already got. Lou reminds us that “[websites] are moving targets built upon moving targets. Their problems… their goals, necessarily change based on the context of the design effort.” By helping our clients understand the design context they embody, we can move them to make more prudent decisions long after we’ve walked away.

Kim Goodwin

Kim Goodwin

A former VP of Design at Cooper (Mr. Alan Cooper’s firm), Kim spends her days providing research, design, coaching and training to a variety of clients – all the more reason for freelance and in-house designers alike to listen up. Fortunately, this couldn’t have been easier. Because Kim spends her days working with clients both big and small, her presentational style is altogether relaxed and engaging.

In Making Personas Work… Without Breaking the Bank, Kim accompanied her talk with no less than sixteen (16!) persona case studies – about fifteen (15) failed attempts and one (1) successful one. Ouch. Common issues – such as over or under budgeting, lack of trust or buy-in, and documentation to excess – were all addressed.

To help us derive better personas, Kim recommends we:

  • Derive personas (and test them) based on behavior rather than job titles or demographics.
  • Consider a staged approach for larger research projects, whereby existing or initial personas inform future ones.
  • Be mindful. Personas are only as good as the change they facilitate. Don’t create them if they won’t stick.
  • Be rigorous. Coach your team in order to create a shared understanding of what personas can and can’t do.
  • Budget wisely. Spend money on your designs rather than your design tools.

The title of Kim’s talk comes from a Forrester research study on personas, conducted in 2003. In their report, Forrester found that not only were one third of the people surveyed using Personas unhappy with them, the average cost of developing Personas was around $80,000 dollars. Eighty thousand dollars? Yikes! Kim says that clients with those kinds of research budgets shouldn’t hesitate to contact her so that she can change their minds.

Oliver King

Oliver, Oliver King. What a curious presentation you gave. For more than a few of us in the room, Oliver’s bright vision for the future of Service Design was vaguely reminiscent of past Interaction and IA Summit events. Isn’t this all the same stuff as UX Design? Well, not exactly. But, then again, that’s the point of Oliver’s talk “Service Design and User Experience: same or different,” to elicit this very question.

Because both Service Design (SD) and User Experience Design (UXD) deal with the emotional and functional affects of our design artifacts – in other words, what happens as a consequence of the things we create – there are dozens of similarities between them. Oliver says there is no mistaking that UXD, SD, product design, etc. are all on converging paths. Where they differ, however, are their respective approaches.

Service designers (in much the same fashion as Lou advocates…), look at an organization’s procedural hierarchy; specifically, how variables at one level affect the whole. They then hypothesize how to affect the change they want, play with the variables, and observe/modify their impact. Yes, I said play. Service designers occasionally employ improvisational acting to see how curious differences affect an entire system.

Service Designers are called upon to refine any a number of processes that run an organization. Oliver points out that, to the untrained eye, Service Designers will often appear to be management consultants. However, whereas management consultants would focus on managers as their element of change, Service Designers are more apt to designate a Call Center employee, for example.

Although the subject of Oliver’s presentation was difficult (I imagine) for most in the room to contend with, it was nonetheless valuable and relevant. Oliver showed SD’s impact throughout. When service designers were called in to overhaul the BBC 2′s entire listener engagement program, their comprehensive, user-centered process was the only way to find out. And that’s something everyone can agree on.

These Sketch notes illustrate some Kate’s major points: strategy, clarity, and authenticity.

© Amanda Wright 2011. Used with permission.

Kate Rutter

Returning from lunch, it was Kate Rutter’s Strategy Patois: Language and Tools to Connect Design and Business Value that got everyone back on track. In many ways, Kate’s presentation reminded me of Sarah Nelson’s 10 Secrets from a UX Design Strategist’s Toolbox, which I first saw at An Event Apart San Francisco back in December, 2009. Both of these women insist that facilitating collaborative design is essential to cementing design’s credibility, its viability, within an organization’s process – and I couldn’t agree more. “Your colleagues [simply] won’t throw their weight behind something they don’t believe in,” she adds.

If you’re as curious as to where the title comes from as I was, patois is a word of French origin. You can kind of kind of think of it as a niche of the vernacular. In other words, jargon. We’ve got it; our managers have it; and it’s time we shared it.

Another undercurrent to Kate’s talk was that designers shouldn’t focus too much on their own panache. Instead, they do well to consider how their artifacts affect their company’s product strategy. Strategic, actionable deliverables are infinitely more valuable than hi-resolution, beautiful ones because they serve as conversation pieces; they evoke forward-thinking responses. Kate recommends that we use Isikawa diagrams, product evolution maps, and prioritization maps as jumping off points.

By tempering the change we seek with empathy for our business-minded colleagues, we actually gain more control over leading our company’s design charge. In the end, Kate reminds us to practice our elevator pitch, find a business buddy to pitch ideas to, and, most importantly, not to lose our souls.

Robert Fabricant

The penultimate presentation, Robert Fabricant’s The Behaviour Chain provided a bevy of “heady” issues for our altogether fatigued minds. Therein, Robert addressed Interaction Design, or “design with a capitol D.” This vantage point that was first brought to my attention in Jon Kolko’s wonderful book Thoughts on Interaction Design. To wit:

Interaction Design is the creation of a dialogue between a person and a product, service, or system. This dialogue is usually found in the world of behavior—the way someone may hold his knife and fork while cutting into a steak, or the way one chooses to purchase a beautiful chair, trading off cost for beauty or brand for convenience. Structuring dialogue is difficult, as it occurs in a fourth dimension—over time.

Jon Kolko, Thoughts on Interaction Design

Time, then, was a recurrent theme throughout the presentation.

Robert began his talk by asking for a show of hands: “Do you work online?” “Do you work in mobile services?” “Do you design physical products? environments? processes?” Robert’s line of questioning suggests that Design is a universal agent of change. We – the designers – are only bound by our ability to transcend our own labels and work outside of our media. In his own words, “we’re responsible for shaping the connective tissues that binds [our] systems together.”

© Amanda Wright 2011. Used with permission.

Robert pointed to powerful examples of the cultural impact of design: graphic equalizers have forever changed how we visualize music and ZipCar has forever changed how people think about renting cars. Robert’s own work, too, manifests change. His team, Frog Design, recently created a device that allows people in South Africa to respond to their own AIDS and HIV concerns in a private, prudent way. Although the path that led them to their final product was certainly protracted, its results were readily apparent.

In the wider context, designers are all-too-often forgotten about as agents of change – their designs get all the attention. When we look for the greater impact of design, though, it lies not in fashion or fad. Instead, it’s in behavior, in a cultural, cognitive shift. Robert concludes with an apt quote from fellow UX Designer Joshua Porter: “What you are seeing is [the change] you designed for.”

Matt Jones

Even before Matt Jones got settled onstage, he openly acknowledged that he served as UX London’s beer barrier. “You know that guy standing between the audience and the pub? Yeah, that’s me,” he said. Therefore, Matt promised to make it brief. Given the upbeat timbre of his presentation, The Lifecycle of Software Objects, though, I doubt anyone noticed if he went a little long.

Matt Jones blocked us from beer such as this.

© William Cho 2011. Used with permission.

Jones exudes a quirky vibe as he speaks. Standing on the balls of his feet, he sort of bounces around stage, calling to and fro a wide variety of sights and sounds to pique your interest and direct your thoughts. Curiosities witnessed include: A robot that emotes your iChat status (Matt made this just for fun), a video of Mary Poppins (“Imagine she’s a time traveller and you end up with a cross between Neo and Sarah Conner,” Matt says), a clip of R2D2 and C3PO from Star Wars, a video of robots playing tennis, and a video of Roombas carrying kittens.

Throughout his talk, Matt encouraged designers to reconsider how far we must go to create objects to which people will relate. All of the sights and sounds Matt presented shared this common thread. Sure they’re silly and they’re simple but, more importantly, they’re captivating.

Matt notes that the brains, the computer chips, inside GoGo Pets (a toy similar to a Furbie) cost about $0.07, yet people play with them for months. Why? “Instead of designing for artificial intelligence, we’ve designed for art. We’ve designed for empathy,” he says. Matt believes that designers have a responsibility for playing with things and discovering how people will respond.

Our role, then, is not so much to design a predictable system but to cultivate an adapting, changing entity. One of Matt’s favorite quotes is: “Lying about the future makes history.” Merely creating the conditions for interpretation, for storytelling cultivates empathy. It allows people attach their own meaning to the artifacts we create.

For more information on this topic, Matt recommends the book after which his presentation was named: “The Lifecycle of Software Objects,” by Ted Chiang. There’s also another slightly-obscure blog that I can’t remember. Does anyone have this?

Getting excited

What more is there to say? My UX London experience was something I’ll never forget. In between the fantastic presentations and the thorough, hands-on workshops, there was bowling, karaoke, and some great, low-key parties. In fact, it’s hard to imagine a better place for experience designers to share their passion.

One of the best parts about the event was its atmosphere. Working as a consultant on many of my projects, I find that I have to explain what I do again and again. No more at UX London. People there get it and want to engage in progressive conversations. By the end of the first day my head was spinning. My wrists were cramping, too, but I couldn’t wait to get up and do it all over again.

Your thoughts?

One final question for you guys: if you attended, what was the most important thing you learned? If you didn’t, what did you miss that we didn’t cover?

Books mentioned during the event


Advertise here with BSA

April 25 2011

14:07

February 04 2011

15:07

Business Objectives vs. User Experience

Advertisement in Business Objectives vs. User Experience
 in Business Objectives vs. User Experience  in Business Objectives vs. User Experience  in Business Objectives vs. User Experience

Here’s a question for you: would you agree that creating a great user experience should be the primary aim of any Web designer? I know what your answer is… and youʼre wrong!

Okay, I admit that not all of you would have answered yes, but most probably did. Somehow, the majority of Web designers have come to believe that creating a great user experience is an end in itself. I think we are deceiving ourselves and doing a disservice to our clients at the same time.

The truth is that business objectives should trump users’ needs every time. Generating a return on investment is more important for a website than keeping users happy. Sounds horrendous, doesn’t it? Before you flame me in the comments, hear me out.

The Harsh Reality

Letʼs begin with the harsh truth. If an organization does not believe that it will generate some form of a return on an investment (financial or otherwise), then it should not have a website. In other words, if the website doesn’t pay its way, then we have not done our jobs properly.

Despite what we might think, our primary aim is to fulfill the business objectives set out by our clients. Remember that creating a great user experience is a means to this end. We do not create great user experiences just to make users happy. We do so because we want them to look favorably on the website and take certain actions that will generate the returns that our clients want.

Business-vs -User-experience in Business Objectives vs. User Experience

Is the business world at odds with creativity? Image by opensourceway

User Experience Is Important

Let me be clear. Iʼm not suggesting that user experience is unimportant. In fact, I believe that creating an amazing experience is the primary means of helping a website fulfill its business objectives. A well-designed website makes it easy for users to complete the calls to action we have created.

Happy users also provide many other benefits. They can become advocates for your website. A happy user is considerably more likely to recommend your services and is more patient when things occasionally go wrong. Enthusiastic users can also become valuable volunteers; they have innumerable ideas about how your website and products can be improved. They are far more valuable than any focus group!

The point, though, is that happy users generate a return on investment, so spending the time and effort to give them a great experience is worth it.

When Business Objectives and User Experience Clash

You may argue that this is all semantics and that business objectives and user experience actually go hand in hand. Generally, I agree, but there are occasions when the two clash, and at these times we need to be clear that generating a return on investment should trump user experience.

Let me give you an example. We Web designers often complain when clients ask us to add fields to their online forms because they want to collect certain demographic information about their users. We argue, rightly, that this annoys users and damages the user experience. But we need to ask ourselves whether those additional fields would make users not complete the forms at all—as we fear—or would just slightly irritate them. If users ultimately complete the form and the company is able to gather valuable demographic information, then the slight irritation may be worthwhile.

Do You Have The Right Balance?

Iʼm a little nervous about this post because I realize that many people could misinterpret what Iʼm saying. But I passionately believe that the Web design community is in danger of becoming blind to all else but user experience. Iʼm convinced we need to spend as much time and effort on understanding and achieving business objectives as we do on creating a great experience.

I’ll end with this: during your last project, how much time did you spend creating personas, testing usability and generally improving the user experience? How does that compare with the amount of time you spent learning about the client’s business objectives and creating great calls to action?

Ask yourself whether you got the balance right.

(al) (ik)


© Paul Boag for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Business Objectives, user experience

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl