Redundancy is NOT bad!
Posted by Michael Gaigg
Traffic light hell
The original motivation for this article stems from a recent discussion with a customer who argued that UI elements must not be redundant, i.e. there must not be two links on any single page pointing to the same target.
His argument was that the link to the contact form - which was embedded in the content - already exists in the header, thus replicating the other link.
To me it seemed clear that this "redundancy is bad" theorem doesn't make sense. But how could I argue the opposite?
Be aware of the "Rule"
Over the time I've seen many so-called "rules" appear, most of them are really hard to counter and battle or even detect in the first place. Remember the "Everything-needs-to-be-reached-within-three-clicks" rule? Says who? Why? So the user can reach any target without dropping off? It's not about the amount, it's about the motivation to get there, it's like a bicyclist that needs more strokes uphill but still has enough motivation to get there.
I call those rules Lazy-Designer rule, or should I say, don't know better designer?
What is Redundancy?
Redundancy is the amount of information used to transmit a message minus the amount of information of the actual message. One might call this "wasted space" or "overhead".
Unwanted Redundancy
In information theory the amount of information is described in number of bits and data compression is used to reduce or eliminate unwanted redundancy.
Desired Redundancy
But communication over noisy channels with limited capacity pose possibilities of data loss and that's why checksums are added for the purpose of error detection.
Error Detection
Simply put, the basis of communication is sending and receiving a message from a sender over a channel to a recipient. Error detection is the detection of errors caused by noise or other impairments during transmission from the transmitter to the receiver.
Error Correction
Error correction is the detection of errors and reconstruction of the original data. This reconstruction can happen in either of two ways:
- Automatic repeat request (ARQ), sometimes also referred to as backward error correction, basically a request for retransmission of data until the correct receipt can be verified.
- Forward error correction (FEC), where the additional data (redundant data) that was added is used by the receiver to reconstruct the original information.
Translation into UI Design
The objective of user interface design (=sender) is to communicate a message via the internet (=channel) to the user (=recipient).
Importance of the Message
Without going into details of quantity (information theory and entropy) or quality (importance of a message) it can be said in general that the better message (=content) follows the lesser is more and more precise is better recommendations.
Methods of Error Detection
But how can one assure that the message has actually arrived? That the user found what the designer has intended to present? Or in other words, how can I (=designer) detect that a user has NOT received the message (=error detection) and what can be done to correct (=error correction) it?
- Traffic Log Analysis can help finding patterns in user behavior purely based on click-through rates and times.
- User Testing helps finding qualitative answers.
- A/B Tests compare alternative design choices and their effectiveness.
Methods of Error Correction
More important is how the UI can handle errors in data reception, i.e. the user "didn't get it".
- ARQ is almost impossible to implement. How would I know that the user missed our message? Maybe he/she simply wasn't interested (e.g. in clicking the 'contact us' link).
- FEC on the other hand seems to be a real alternative. Adding redundancy may help the recipient to overcome the missed message and despite having noise (ads, other UI elements, etc.) being able to continue the task in the most likely way the designer had intended to.
Right Balance
Like mentioned above, it seems natural to enhance the quality of content and balance the quantity between removing content (=data compression or unwanted redundancy) and adding content (=desired redundancy). It's like an intersection having two or more traffic lights (desired redundancy) but surely not traffic light hell like on the satiric image.
On a personal note
I wish Directv would ship all their receiver units with two remote controls. You can't imagine the sudden peace in our house since we ordered a second one. "Babe, where is f...in remote again?", "Will you finally shut down the volume honey?", "Come on, skip the commercials, or are you sleeping already?"
Job Posting: User Interface (UI) Engineer at ESRI
Posted by Michael Gaigg
We are actively looking for a full-time User Interface (UI) Engineer here in Professional Services (Applications Development Services) at ESRI.
If you feel qualified and are interested please send me your resume to mgaigg at esri dot com. I'm also happy to answer any kind of question (except payment) you might have.
My job here
A little bit about what you can expect here: In my daily job I consult, design and help implementing customized web applications that are for the most part based on our core mapping products and API's for JavaScript, Flex and Silverlight. Clients range from local and federal government to vertical markets like energy, water, environmental, etc. and reach local, domestic and international audiences - the challenges are never-ending, I promise 
You can become part of this group!
Job Description
Use your technical background and innovative visual design skills to simplify complex business processes through the creation of intuitive and visually engaging user interfaces.
Responsibilities
- Create sophisticated, imaginative, efficient, and visually striking interfaces for front-end solutions
- Design reusable UI components by utilizing or building UI framework components
- Develop storyboards, mock-ups, and prototypes to communicate ideas for navigation and interaction models
- Evaluate requirements and initial mock-ups; make technology recommendations that support optimal construction, maintenance, and performance
- Translate complex functional and technical requirements into detailed architecture and design prototypes
- Ensure cross-browser/platform integrity of Web designs
- Work closely with software developers and software testers to create a working end-to-end solution
- Define, maintain, implement, and enforce style guides, standards, reusable templates, and best practices for client-side software development
- Leverage the latest developments in Internet technologies
- Serve as a technical resource and mentor
Requirements
- Bachelor’s or master’s in computer science, graphic design, visual design, human factors engineering, interaction design, information architecture, or other relevant field
- A minimum of five years of experience in user interface design, information architecture, user-centered design methodology, and implementation in complex enterprise environments
- Significant and proven experience demonstrating innovative UI visual design skills
- Ability to balance designs with the understanding of technical constraints within a software development environment
- Highly proficient with cross-browser/platform CSS, HTML, XHTML, and JavaScript; knowledge of browser compatibility issues and their workarounds
- Extensive experience using JavaScript libraries such as Dojo and jQuery
- Good understanding of user experience (UX) and user-centered design (UCD)
- Ability to take a concept from sketch to final implementation
- Ability and willingness to take ownership of projects and help drive them to effective implementation
- Exceptional attention to detail, organizational, communication, and presentation skills
- Passionate about novel user interface design and software development
Recommended Qualifications
- Experience with GIS/ESRI products and solutions
- Experience with .NET, C#, Silverlight, and Expression Blend
- Experience with JSP, Java Web frameworks, Flash, and ActionScript
- Experience with Linux, PHP, and MySQL
- Proficiency with Adobe Creative Suite including InDesign, Photoshop, and Illustrator
- Ability to interface with customers, gather requirements, and implement new solutions
Employment Fraction
Full-time
Work Location
ESRI Headquarters, Redlands, CA
Web Design: Sexy versus Conservative
Posted by Michael Gaigg
In this post I try to keep true to my promise to add some spice to the world of web design and usability: I will try to investigate the cons of designing "sexy" versus "conservative".
So far clients still owe me a consistent definition of what they mean by asking for a "sexy" or "conservative" user interface. I guess I have a hunch and we all probably feel the difference but eventually it boils down to subjective interpretations.
Photo credits: AlphaX/X17, Adrian Varnedoe, A. Than/Pacific Coast News
Motivation
Just for a moment think of who you would rather want to have a long-lasting relationship with? The Paris Hilton on the left of the photo (sexy) or the Paris Hilton to the right (conservative)? Ok, probably neither, but for the sake of the argument?
In the words of one of our consultants: make the design 'sexy' for our marketing department and 'conservative' for our users. What now? Really?
Let's try to look at the cons of either side in an unbiased way by using a funny dating analogy:
The Bad of too Sexy
Designing too sexy gives everything away for free and leaves you with nothing to hold in reserve
Users know within seconds whether a site is right for them or not, they smell the scent of usefulness and determine that what is offered is worth further time investment. One might call initial attraction a success but it is human nature to want something more if we cannot have it.
So keep certain things a mystery. Don't give everything away upfront or for free. It's OK to tease though.
A 'slutty' design may lower your general value
Your users may feel that they have a higher intrinsic value than you do. Therefore you are not really worth further attention or a long-term relationship.
Design for emotions but keep in mind that trust is only built when your users can take you serious.
Sexy design may show your less than desirable aspects
Surely skillful designers know that it is important to emphasize the attractive aspects of your business and hide the less attractive characteristics. But, trying to pretend being somebody or something that you are not will come across as fake and unreal.
Stay true to your values and represent who you are. Don't pretend to be young or sexy if you aren't.
The Bad of too Conservative
Designing conservatively may indicate a low self-esteem
'Playing it safe' can be caused by many things: traditions, missing innovation, dusty policies, organizational structures, stubborn managers. Whatever it is, it will be felt by the users and could be interpreted as old-fashioned, slow (to deliver), outdated or simply lame.
Being bold is important (having a skilled designer helps too). Engage modern technology and trends like the social web.
Designing conservatively may indicate discomfort with your own business
You might have a hard time defining your business or telling an attractive story of who you are or what you do. This means you are not wholly comfortable or happy with what you represent and therefore choose to show as little of yourself as possible. Holding back is very risky because users (clients) might not understand who you are and don't know why they should get engaged or continue spending their time on your site.
Work hard to make your content/service attractive rather than the appearance. Don't hold back with something that helps engaging users.
Designing conservatively may not catch your users
Design must stand out because it will make YOU stand out. In times where everybody and everything is available on the web it's more important than ever to be unique in your offering, precise in how your business is different (or better) to others and clear in your message. Your front-end should clearly communicate all that! Designing too conservative may ultimately result in fewer visits and engagements.
Be unique and clear about your offerings and communicate it through your user interface.
Conclusion
The purpose of (most) web designs is to engage people and build relationships. That's why appearance is so important and that's why you should not design in stereotypes (aka 'sexy' or 'conservative').
Try to be clear about what you offer and honest in how you present it.
Like with anything in life, make sure to do your homework, learn about your target audience (think google). This will tell you how to dress appropriately and make the date between you and your users a pleasurable experience and hopefully a long-lasting one as well.
What's your opinion? How do you design? Why?
Integrating Prototyping Into Your Projects
Posted by Michael Gaigg
This article was inspired by Integrating Prototyping Into Your Design Process - Using appropriate fidelity for the situation by Fred Beecher which I extend by the following:
Prototyping needs to be iterative throughout the project!
Goal of Prototyping
Prototyping is not only a design tool but a research and communication tool as well.
- It should assist in optimizing the main task (top tasks) and validating its/their efficiency.
- Furthermore this should not add cost to the project but reduce project expenses while increasing ROI.
So the goal is to use different levels of prototype fidelity to incrementally identify and enhance the user's task(s).
Ideally this happens linear (increase visual fidelity as you add functional fidelity) but typically it is bent to either side (see Figure 1) where more emphasize on
- visual fidelity can be beneficial for marketing purposes or
- functional fidelity can assist earlier user feedback trough user testing.
Figure 1: Prototyping in the context of your project.
Integration into your project
Regardless of the project approach you take it will boil down into the fundamental project management phases of Requirements, Design, Implementation (and possibly others). Prototyping should not be solely perceived as a method useful during Design, it is essential during all 3 (or more) phases starting as early as Requirements phase.
I suggest the following approach:
-
Low-fidelity prototyping (paper / digital sketch)
- Create paper prototypes or digital sketches
- Design navigation architecture (workflow)
- Review with client
- User testing (optional)
- Iterate (until happy)
- Revise into 2
-
Medium-fidelity prototyping (simple HTML)
- Simple HTML prototyping (maybe even black and white)
- Proof basic workflow and important interactions
- Review with client
- Iterate
- Revise into 3
- High-fidelity prototyping (Enhanced HTML)
- Enhance HTML prototype (links and basic functionality)
- Settle on design (including corporate design, basic artwork)
- Review with client
- Iterate
- Revise into 4
- Start 'real' implementation
Implementation Effort
Each prototype (digital sketch, simple HTML, advanced HTML based on simple) should not take more than 40 hours of pure development (not calculating initial meetings and communication and possible variations based on project size) plus 80 hours reviews and iterating with client. Sounds impossible? Think twice. It is so much easier to modify a sketch than programming HTML. The 'real' implementation will be built upon a solid code foundation with a grown-up design already - voila!
Can I skip a prototype?
Yes, obviously you can. But it comes with a cost later on because you miss crucial information from the earlier phase and it is more expensive to implement modifications.
Technical considerations
The argument I hear most often is that 'prototypes' are wasted time/money because they get trashed anyway. This is absolutely not true! Identifying problems early almost always saves money later on, you don't find anything out until you start showing it to people, enhancing the quality of the product will help money flow into your pocket once deployed and most important, prototypes don't necessarily need to and should not be trashed.
Low fidelity prototypes can be more than just ‘paper’, this could be digital wireframes that look like sketches, e.g. Microsoft offers software that tie sketches (SketchFlow) directly into UI design (Expression Blend) and subsequently into development (Visual Studio) - check out the WebsiteSpark Program for almost free licenses.
Don't bend too much!
Danger! Don't bend the curve from Figure 1 too much otherwise you end up with
- a highly functional 'prototype' but without design, i.e. without visual clues whether your client/users will like it (buy it) and without validation that you got your information architecture right OR
- a highly visual 'prototype' that looks sharp, sexy and slick but cannot be used and lack usability ("we just installed the app and now our users complain they [...]" - substitute the appropriate phrase for yourself
Proof-of-concept
Creating medium- to high-fidelity prototypes can be considered proof-of-concept and can be beneficial to or sometimes even required by your project. Looking at Figure 1 that would mean to move their respective dots from Design/Implementation to an earlier phase.
What are your experiences?
Do you use / re-use multiple prototypes within your projects? Do your project structures support prototyping? To which extent?
Website Analytics I: Browser Support
Posted by Michael Gaigg
Which browser platform should we design for? To most web developers this question is a nightmare and dilemma at the same time, but yet again we face it almost on a daily basis. Just to show you how difficult an answer might be is the disparity between two projects I'm involved in, one for a federal government body that by definition only supports IE6 and another that is expected to be finished in 6 months and therefore was hoping to target IE8. Are these expectations realistic?
Analytics
Let's have a look at some website analytics that were collected over the past year (July 2008 - July 2009), taken from Fanposter.org, a social media website with over 5000 registered users from almost 100 countries and collected through Google Analytics.
Note: While I'm aware that the audience of this website might not be representative for all age groups or countries/regions, it still provides valuable hints about browser usage and trends.
Lesson 1: Internet Explorer on the fall
Internet Explorer is historically bundled with Microsoft Windows Operating Systems. IE6 was released August 27, 2001 just months before WinXP; IE7 was released October 18, 2006 and included with Windows Vista and Win Server 2008; IE8 final was released March 19, 2009 and will be included with Windows 7.
Figure 1: Website Analytics, Browsers Comparison
The combined total market share for Internet Explorer over the past year was 76.5% but the trend shows a clear decline over the past months from 74.0% in May to 68.8% in June and 53.9% in July.
Will this trend continue to hold true?
A lot will depend on the upcoming release of Windows 7 in October 2009 with Microsoft's power in reaching the people to upgrade their browsers. But almost certainly Microsoft will loose its dominant position of 95% in 2002 and 2003 (IE5 & IE6) or over 75% in the past year to its numerous very capable competitors.
Lesson 2: IE8 on the rise
Figure 2: Website Analytics, Browsers Comparison, Internet Explorer
When comparing the 3 current versions of Internet Explorer out there (IE6, IE7 and IE8 with IE5 and lesser not appearing in the analytics anymore and therefore being disregarded) it seems to be evident that IE8 is on the rise. Though the really surprising observation is that this increase cannot be accounted to users abandoning IE6 but rather to users upgrading their version of IE7. How come? The answer seems to lie in fact that many companies and their IT departments as well as governmental bodies still continue to hold on to and enforce the use of IE6. Can Microsoft overcome these - mostly security-related - concerns through IE8?
Lesson 3: IE6 might not die as soon as we all may wish
Figure 3: Google Trends; The spikes D, E & F indicate the introductions of Beta 1 (March 5, 2008), Beta 2 (August 27, 2008) and Final respectively.
As discussed above IE6 is still a requirement for many users. A quick look at Google Trends reveals that searches for IE6 (Figure 3: blue line) have been pretty stable over the past 4-5 years while searches for IE7 (Figure 3: red line) are declining and searches for IE8 (Figure 3: yellow line) are in the lead. This goes hand in hand with the observations in Lesson 2 above.
In the meantime let's join the numerous battles to kill IE6 like Norwegian Websites Declare War on IE 6 and IE Death March or more seriously at Bring down IE6. Joke or not, IE6 will be around for some more time and therefore needs to be considered if we want it or not.
It won't even help that Digg is discussing to drop support for IE6 or YouTube Will Be Next To Kiss IE6 Support Goodbye. Both sites don't need users that cannot upgrade IE6 e.g. due to limitations at work because exactly these users have limited access restricted by their companies anyway.
Lesson 4: Firefox stays on top
A very interesting observation is the fact that Firefox does a really great job in staying on top of things and keeping their user base up to date. In the last month of the observation period less than 5% of all Firefox users had a version lesser than 3, or in other words, the great majority of Firefox users was using version 3 and higher. And with versions 3.7 and Firefox 4 in the making, a huge base of motivated developers and fascinating plug-ins the future looks bright. Firefox's marketshare seems to climb steadily also, as of July 2009 it showed 32.1% (20.5% average over the past year) with the majority Windows versions and only 0.6% on Mac and 0.2% on Linux. Obviously we all love the high commitment to standards compliancy that makes developing web apps a blast, right?
Firefox 4 Mockup (Win Vista)
Lesson 5: Chrome & Safari
Google Chrome was released December 11, 2008 and first received as Google's never-ending battle against Microsoft (see graphic by Federico Fieni) but more likely just another smart move to keep users on the web - the faster, the better - or like Ben Parr explains "Revenue = Amount of Time on the Web".
Google vs Microsoft: Chrome
As far as marketshare is concerned, Chrome rose to 2.3% in July according to my analytics. This is still fairly small but not to be underestimated. In terms of testing Google's developer page for Chrome suggests that "if you’ve tested your website with Safari 3.1 then your site should already work well on Google Chrome". But what about Safari?
Safari accounts for 1.3% in the yearly average (with 1.2% on Mac and the rest on Windows). Should we test Safari with a marginal share like this? It really depends on your budget and company structure which might require unjustified additional resources for your QA team. Do the math for yourself: 1% of 10k visitors are 100 potential customers - is it worth the effort?
Lesson 6: Opera is the misunderstood genius
Opera shows an average of 1.1% with an unexpected peak in July 2009 - I need to continue observing where and why that came from. Needless to say, Opera is strong in European countries like Russia and on mobile devices such as mobile phones, smartphones and PDA's (personal digital assistants). It's a shame that Opera is not further ahead, it has been and still is innovator and spearhead in terms of new useful features as well as standards compliancy and implementation.
What are your experiences?
Without giving any decisive conclusions I'd like to hear your experiences or analytics to this subject. For which browser platform do you design for? What do you tell your clients when they ask you this question?
Beware of the Frankenstein Design
Posted by Michael Gaigg
Frankenstein Design
"It was already one in the morning; the rain pattered dismally against the panes, and my candle was nearly burnt out, when, by the glimmer of the half-extinguished light, I saw the dull yellow eye of the creature open..." (Chapter 5). Sounds familiar to us geeky programmers out there? Yes, and the root of all evil are clients that design their webpage from a sushi menu, picking whatever they like.
Usually I encourage my clients to look around, get inspired and show me what they like. It gives me a sense of how they think and into which directions they want us to go. But never forget: Clients identify problems, designers provide solutions! Understand why the client shows you a specific page or design element and what exactly they like in it. Don't feel pressured to include every detail in your final design otherwise you wake up at 1am facing a yellow-eyed creature and you'll end up with a Frankenstein Design.
Warning Signals
What are warning signals that your project might face a Frankenstein Design?
- Client mentions Stakeholders too often. Money makes the world go round, but will eventually ruin the user experience.
- Client fell in love with a bad design. Try to build solid knowledge about good and bad design principles so you can explain the pro's and con's of a particular design.
- Client needs to please too many interests. It's understandable that every party involved wants to see their logo on the page, but honestly, one is enough
- Client decides on a color scheme. Besides corporate colors clients feel strongly about certain colors that either clash with your design, psychological theory or existing color schemes or are simply bad taste altogether.
- Client has no idea at all. That means trouble! Not now, but once you are done. Guaranteed.
- Got more?
What you can do
- Listen. Hear what the client tells you and try to understand why they say it.
- Feel. Sense what the underlying need is and translate it into design elements.
- Talk. Speak up, don't shut up, don't wait until it's too late.
- Fight. Pick your battles, don't let rules overrule what you think is right, at least voice it.
- Reconsider. Don't get hooked to an idea too strongly, be open to erase your white-board drawings and start over.
- Document. Make notes, sketch ideas, capture screens, summarize. Send these notes out.
- CYA. Cover your ass, seek consensus and approval, set it in stone through written acknowledgments (mockups help).
Send me your experiences? What is missing on this list?
Excellent read: Quality in Web Design
Posted by Michael Gaigg
Stumbled upon this blog entry by liam, loved it, shared it: How to Spot Quality within Web Design: Examples & Tips.
One can truly see the effort that went into all the visual examples (thanks, love that most) and compilation of useful tips!
Here the outline:
- Spacing
- Pixel Perfect Detail
- Well thought out Typography
- Organization of Elements
- Restraint & Subtlety
- Using Colour to it’s Full Potential
- Doing something Nobody else has done
Got an interesting article or blog entry?
I'd love to read and eventually share your content. Please feel free to add your links to the comments section so I can 'stumble upon' them too 
Make it easy for your customers to throw money at you!
Posted by Michael Gaigg
Ok, I don't know how to state this any better: "Make it easy for your customers to throw money at you!" or "Don't talk back when your customers wave at you with their Credit Card".
The reverse postulation is also true: "Don't hide your products that are meaningful to your customers" or "Enable your customer to purchase what they want however they want".
What you should do
This being said, during the shopping procedure, remove any unnecessary distractions, offer alternative payment methods, only ask for information really necessary and most important of all, make sure it works!
I hate showing bad examples but I'm really frustrated and sense some redemption in publishing the following screenshots, so please bear with me:
Make a Payment
Yes, it's this time around, a check needs to be delivered and I wish to do this online. I've registered and see great potential in setting up automatic payments so that my money arrives in the banks hands on time. I select the choice "Automatically pay ... using a non-Wells Fargo checking or savings account" (Figure 1).
Figure 1: Choose a payment type
I arrive at a screen (Figure 2) with 70 links (besides 2 tab menus, header, footer and something that seems to be commercials). What the h...? Only later I realize the error message in between the jiggle "You have no accounts eligible to set up a recurring payment." - well, I knew that, but how about I can set one up now?
Figure 2: You have no accounts eligible to set up a recurring payment
All right, I really want to throw money at them, so I start digging into the links to see if there is actually one that might help setting up the missing 'eligible account'.
So I click on "Add accounts"... just to find the same error message from before (Figure 3). Am I crazy or who is?
Figure 3: Add accounts for access online error
I pogo-stick between some more links from the previous page with the same result, this $%^&*$ error message seems to keep on hunting me. Do I call the 1-800 number? I should, let them at least pay for their negligence - or just send a check by mail like always. The bitter taste stays, believe me.
Lesson learned?
No, nobody learned anything here, at least not Wells Fargo. They will probably never find out. Or how the famous Benny Hill once said: "Just because nobody complains doesn’t mean all parachutes are perfect".
But for you, my dear readers, please help making the world a better place to pay your bills. Don't keep your customers from throwing money at you Cheers.
Powerpoint Wireframe Stencils as Free Download
Posted by Michael Gaigg
The last couple of weeks were pretty busy for me. We were trying to design an application that has potential to grow beyond national importance and get high visibility. Needless to say expectations are high. Time constraints aside, my focus was to extract the goal of the application and streamline the user experience, do I sound like a marketing person yet?
Powerpoint Wireframes
In order to get quick and accurate feedback from our client I wanted to create visuals as early as possible. That's when Microsoft Powerpoint came in handy. I created wireframe mockups and iterated through the slides via video conference which turned out to be not only useful but essential to the mutual understanding. The client was able to adjust their process, our project managers increased their knowledge about the domain and our developers identified potential issues with integrating our mapping software.
Free Download
Download Powerpoint Wireframe Stencils
During the process of designing the wireframes I created my own set of Powerpoint stencils that covers all common interface elements as well as a set of small icons.
Powerpoint Wireframe Stencils
Example Usage
Just recently I started to redesign www.actress.at, the website of my sister who is an actress currently located in Berlin, Germany.
What better opportunity than this to put the wireframe stencils into work. After talking with her for some time over the phone I got a good sense of what her vision is based on the needs of job. Together with some photos from her agency and videos from youtube I created the following three mockups:
Mockup for the Homepage of Eva Gaigg's redesigned webpage actress.at
Mockup for a page inside the navigation architecture, in this case videos but also applicable for photos and other presentation items.
Mockup for the response form, probably a critical part of the application since this will be the butter on the bread.
Next Step: XHMTL Prototype
Following the wireframes exercise we created a color palette and implemented an XHTML prototype which roughly took us 3 days. Screen snapshots fed another set of Powerpoint slides for the big demo and will eventually go into the design doc as well. So far, so good.
Help me to improve the stencils
I really hope the wireframe stencils will be helpful for your work (as they made my life easier). I am interested in your opinion. What is missing? What can be improved? Send me your suggestions, ideas, updates
Your typical User – finally captured on Photo
Posted by Michael Gaigg
Your typical user captured on photo
Keep this picture in mind
After years of research looking for the typical end user I was finally successful. Hidden behind server log statistics, persona definitions, target audience screenings, user testing sessions and best effort anticipations on how the target customer will look like I was able to capture the Santa Claus of web design, the Deep Throat of e-commerce, the Mr. X of usability.
Regardless on how your marketing department defines the target customer or how your user research crafts the persona(s), you should always keep this picture in mind!
Your Users (customers) are:
Impatient
Users hate to wait. Long loading times, flash intros, videos or audios that start dangling away automatically will drive them nuts. Blinking advertisements and popup windows will only add to their hatred.
Give them a nice and clean interface that outline important customer care words with high information scent. Speed matters!
Nasty
I dare to imagine how users talk when something goes wrong not to mention the absence of adequate error messages or hints and help to recover.
Avoid sources of error and offer useful hints on how to recover in the case of problems.
Demanding
Users don't read, they scan. Users don't want to wade through the bun to get to the meat. They are not willing to spend time and effort to sign up for something before they know what it is. They are not willing to pay for something that is free somewhere else.
Give users what they want in a reasonable way.
In a hurry
Users are specialists in judging a site within seconds of arriving there. Is it relevant to their goal? Is there anything else they might find interesting? Last call...
Translate the first impressions into meaningful interactions.
In control
Your users will never tell you that your page sucks and they will never complain that they couldn't find what they were looking for. They will simply leave and never come back!
You better get your top task right
Remember the Grinch
Don't be fooled by the nice users during your user testing sessions, they would hate to hurt your feelings by cussing away about your useless system. They'd rather blame themselves, try to cope and manage the pain and save their mental outbreak for the pub at night.
What are your experiences with the Grinch of web design?
Recent Posts
- 500+ Free Stunning PC Icons August 31, 2010
- Highlights of Week 32/2010 August 16, 2010
- How to use the Google Font API August 10, 2010
- Secret of Pixar’s Success [Link] August 6, 2010
- Esri listens to their Users and changes Pronunciation of its Name August 3, 2010
- Highlights of Week 30/2010 August 2, 2010
Categories
Accessibility (13)
- Code Samples & Tips (4)
- Design Guidelines (11)
- Go figure (7)
- Good News (11)
- Here and there (11)
- This Week’s Highlights (23)
- Usability & UCD (14)
Web Design (13)
- Redundancy is NOT bad!
- Job Posting: User Interface (UI) Engineer at ESRI
- Web Design: Sexy versus Conservative
- Integrating Prototyping Into Your Projects
- Website Analytics I: Browser Support
- Beware of the Frankenstein Design
- Excellent read: Quality in Web Design
- Make it easy for your customers to throw money at you!
- Powerpoint Wireframe Stencils as Free Download
- Your typical User - finally captured on Photo
- 10 Webpage Design Lessons learned from a trip to Las Vegas... seriously!
- For which generation are we designing for?
- How to Create a Color Palette for your Website
Popular Posts
- Make it easy for your customers to throw money at you!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Section 508: WCAG 1.0 or WCAG 2.0?
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
People that inspire me
- Björn Seibert
- Boxes and Arrows
- Bruce Temkin
- Christian Heilmann
- David Leggett
- Gez Lemon
- Hannes Schmiderer
- Harry Brignull
- Henny Swan
- Jared Smith
- Jared Spool
- John Rhodes
- Joshua Porter
- Kel Smith
- Scott Berkun
- The Access Pond
Tags
What I'm Doing...
- Top 20 Wireframe Tools http://t.co/zRBd0W0 via @garmahis 1 week ago
- RT @wpzoom 500 Free Icons: WPZOOM Social Networking Icon Set http://bit.ly/aEGdUJ 2 weeks ago
- RT @esriuc GIS: Designing Our Future. The concept of GeoDesign is really taking off, keep an eye out. http://bit.ly/9TioWQ 3 weeks ago
- 1400 super cool web icons by FatCow: http://bit.ly/ctskcU 2010-08-11
- [JOB OPENING] User Interface Engineer, http://bit.ly/ui-engineer-position 2010-07-30
- More updates...
Posting tweet...