<?xml version="1.0" encoding="UTF-8"?>
 <rdf:RDF xmlns="http://purl.org/rss/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:syn="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/">
  <channel rdf:about="http://pinboard.in">
    <title>Pinboard (pesh2000)</title>
    <link>https://pinboard.in/u:pesh2000/public/</link>
    <description>recent bookmarks from pesh2000</description>
    <items>
      <rdf:Seq>	<rdf:li rdf:resource="https://www.nngroup.com/articles/flat-design-long-exposure/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2011/10/20/comprehensive-review-of-usability-and-user-experience-testing-tools/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2010/02/26/usability-review-of-charity-websites-taking-the-lead/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2010/01/13/shopping-for-bedsheets-how-hard-could-it-be/"/>
	<rdf:li rdf:resource="http://www.kaushik.net/avinash/sweet-web-analytics-resolutions-kick-notch/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2010/01/05/25-user-experience-videos-that-are-worth-your-time/"/>
	<rdf:li rdf:resource="http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit"/>
	<rdf:li rdf:resource="http://webdesignledger.com/tips/web-design-trends-for-2010"/>
	<rdf:li rdf:resource="http://www.kaushik.net/avinash/paris-hilton-kim-kardashian-telling-stories-data/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2009/05/28/12-tips-for-designing-an-excellent-checkout-process/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/"/>
      </rdf:Seq>
    </items>
  </channel><item rdf:about="https://www.nngroup.com/articles/flat-design-long-exposure/">
    <title>Long-Term Exposure to Flat Design: How the Trend Slowly Makes Users Less Efficient</title>
    <dc:date>2016-02-05T01:47:21+00:00</dc:date>
    <link>https://www.nngroup.com/articles/flat-design-long-exposure/</link>
    <dc:creator>pesh2000</dc:creator><dc:subject>design flat usability</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:pesh2000/b:670aee979285/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:flat"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2011/10/20/comprehensive-review-of-usability-and-user-experience-testing-tools/">
    <title>Comprehensive Review Of Usability And User Experience Testing Tools</title>
    <dc:date>2011-10-20T14:13:39+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2011/10/20/comprehensive-review-of-usability-and-user-experience-testing-tools/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[



        
        
          
        
         
        
          
        
         
        
          
        
      



Usability and user experience testing is vital to creating a successful website, and only more so if it’s an e-commerce website, a complex app or another website for which there’s a definite ROI. And running your own user tests to find out how users are interacting with your website and where problems might arise is completely possible.

But using one of the many existing tools and services for user testing is a lot easier than creating your own. Free, freemium and premium tools are out there, with options for most budgets. The important thing is to find a tool or service that works for your website and then use it to gather real-world data on what works and what doesn’t, rather than relying purely on instinct or abstract theories.

Free And Freemium Tools
A ton of free and freemium tools are out there to test your website’s usability and user experience. Many of them get you to use your existing visitors as a testing base, which can give you a very accurate picture of what users are experiencing when they use you website.

Ethnio
Ethnio enables you to intercept visitors on your website and recruit them to help you with research (you can offer incentives to make participation more enticing). Ethnio acts as a hub for your various UX tools, including Usabilla, Optimal Workshop and UserTesting.com. It even works with GoToMeeting for screen-sharing. You’ll get detailed reports on the people who respond to your recruitment efforts. Ethnio has a free plan that allows for up to 10,000 page views per month and up to 250 responses. Paid packages start at $49 per month (for up to 100,000 page views and 500 responses) and go up to $299 per month (for over 1 million page views per month and unlimited responses plus other features).



Simple Mouse Tracking
Mouse tracking is a great way to see how visitors are actually interacting with your website. This plugin lets you record mouse activity on your Web pages and then replay that activity in real time. It works in virtually all modern and not-so-modern browsers, it works with static and liquid layouts, and it is customizable by the end user.



xSort
xSort is a card-sorting application for Mac OS X. It gives you full control over the exercise, supports sub-groups, gives statistical results in real time, and lets you create, read, print and export reports easily. The visual environment of the app resembles a table with cards (and you also get an outline view).



KISSinsights
KISSinsights lets you embed surveys directly on your website. The free plan offers an unlimited number of surveys, with up to 30 responses for each one. The premium plan, at $29 per month, allows you to customize the surveys and thank-you messages, removes KISSinsights’ branding, and allows for unlimited responses.



FiveSecondTest
FiveSecondTest helps you better design your landing pages and calls to action by analyzing which elements of your design are most prominent. Just upload a screenshot or mockup, set the questions that you want answered, and then wait for users to complete the test. FiveSecondTest collects the responses for you and analyzes them for common keywords, which it then represents visually. The free community plan lets you earn tests by participating in tests run by others. Paid plans start at $20 per month with more features, including private tests.



AddUse
AddUse enables you to conduct user surveys and user tests. You get one of each for free, and then can purchase additional surveys and tests from there. Signing up is quick and easy and doesn’t require a credit card. AddUse offers real-time results and analysis, and also includes ready-to-use usability questions that you can incorporate in your surveys for faster set-up.



UserEcho
UserEcho is a simple widget for collecting customer responses and ideas. Just copy and paste a few lines of code onto your website and then wait for visitors to respond. The free plan offers one forum and one official representative, as well as simple moderation, admin control, rich-content editing and YouTube embedding. Paid plans start at $15 per month and include more forums, more representatives and more features.



Usabilla
Usabilla lets you run micro-usability tests to get a better picture of how well your website performs with visitors. You can collect feedback, discover usability issues, measure how various tasks perform, and then get visual results. The free plan lets you run one public, active test at a time with up to 10 participants. Paid plans start at $49 per month, allowing you to create private tests with up to 50 participants, and go up to $199 a month (allowing up to 10 active tests at a time and up to 250 participants).



Google Website Optimizer
Google’s free Website Optimizer lets you run A/B and multivariate tests on your website. Just sign up with your Google account and create an experiment. You can specify which page you’d like to test and which sections of the page, and then identify your conversion and success targets. Setting up experiments is a straightforward process.



Userfly
Userfly lets you watch videos of users interacting with your website. Just install a single line of code, and it will record every mouse movement and click that users make. The free plan allows up to 10 captures per month and stores recordings for 30 days, while premium plans (ranging in price from $10 to $200 per month) allow for more captures and downloadable recordings.



Clickdensity
Clickdensity is a heat-map analytics tool that installs in under five minutes. It provides heat maps, click maps and hover maps and gives you real-time results. The trial version can be installed on a single page and stores up to 5,000 clicks. Premium plans start at £2.50 per month, and all include an unlimited number of pages.



Navflow
Navflow is a tool for analyzing the conversion paths for your mockups and wireframes. Just upload the designs that you would like to test, run a private or public test, and then view the results. The free plan allows you to earn public tests by participating in tests run by others. Paid plans start at $20 a month and allow you to run unlimited private and public tests.



User Plus
User Plus offers two tools for testing your website’s usability: Tester and Advisor. Tester lets you test the important tasks on your website with real people. Just create a test, invite users and then measure and see what they do. Advisor evaluates your website’s usability based on ISO standards and gives you a usability score. Tester is currently in private beta, and for a limited time you can try it for free. Advisor offers both free and paid plans.



Chalkmark
Chalkmark is for first-click testing, to see what visitors click on first on your website. It’s a simple concept, but vital to ensuring that your website is converting well. A free plan is available for running short surveys on a trial basis before you buy. The free plan lets you survey 10 people, with 3 tasks each. Paid plans include unlimited studies, unlimited tasks, unlimited questionnaires and unlimited participant responses.



4Q
4Q is an online survey tool for evaluating user experience and customer satisfaction. Setting it up takes less than five minutes, and the intuitive suite of online tools gives you valuable insight into how visitors are interacting with your website with only a few mouse clicks. A free plan is available that lets you collect responses from up to 100 participants. Paid plans start at $19 per month and include more features and more responses.



WebSort.net
WebSort.net is a remote card-sorting application. Just create a study, send the link to participants, and wait for the results. You can create a free study with up to 10 participants. Then upgrade whenever you want to include 100 participants or more (starting at $149 per test). You can also buy a three-pack of studies for $299; or buy an enterprise license, with unlimited tests in a 12-month period for $2,499.



Concept Feedback
Concept Feedback lets you get feedback on your website so that you can increase conversion rates. Just post your website, get expert feedback from experienced design, usability and strategy pros, and then share the evaluation with your team or client. You can pay to have experts review your website ($99 per expert), or just get feedback from the community for free.



Premium Tools
Vendors of premium testing tools generally recruit users specifically to offer feedback on your website. Many of the tools come with videos of users interacting with your website, and some offer both remote and local testing.

WhatUsersDo
WhatUsersDo lets you test the user experience of virtually any part of your website. Just set tasks for users to carry out on your website, and then watch and listen to recordings of everything they do and say. Setting up a test takes less than five minutes, and results are available within 48 hours. Pricing is a flat fee of £30 per user, and five users are recommended for each test.



TryMyUI
TryMyUI lets you test your website with real users and watch videos of them using your website. You get to see all of their mouse movements and keystrokes and hear everything they say about your website. Users also provide written answers to your questions. A free trial is available, and the regular price is $35 per test.



Userlytics
Userlytics is a full-featured testing service that guides you through the entire testing process, from designing the study to scheduling tests, managing logistics and incentivizing participation. Pricing starts as low as $59 per participant but goes lower with volume discounts. You’ll also get videos of participants interacting with your website for accurate results.



OpenHallway
With OpenHallway, you create test scenarios, record users either remotely or locally, and then watch video results from your browser. You can share videos with clients or team members, and an unlimited number of projects and test scenarios are allowed within your storage limit. You can try OpenHallway for free, with a test scenario and up to three 10-minute user videos. Regular plans start at $49 per month, which allows for up to 1 GB of storage (3 hours of video), and go up to $199 per month for 9 GB of storage (30 hours of video) and downloadable test results.



GazeHawk
GazeHawk runs eye-tracking studies on any image or website. It offers targeted or general user studies, depending on your needs. The starter plan, which includes a 10-participant study with heat maps and gaze replays, is $495. GazeHawk also offer A/B testing packages ($995 for two 10-participant studies), a professional package with 20 participants for $995, and enterprise solutions for bigger tests.



Silverback
Silverback is downloadable software for your Mac for running user tests. You can capture screen activity, record video of testers’ faces, record their voices, and control recording with the built-in remote. And it’s all exportable to Quicktime. The app is free for the first 30 days, and the full license is $69.95.



Verify
Verify, from Zurb, includes nine different test types: click, memory, mood, preference, annotate, label, multi-page click, and linked. New user tests can be set up in less than three minutes. You can share tests with team members or make them public, and visual reports are included to make decision-making easier. The “Plus” plan is $9 per month and includes unlimited tests, while the “Premium” plan includes demographics reports, linked tests and PDF export. A 30-day free trial is available on all accounts.



Feedback Army
Feedback Army offers cheap and simple usability testing for your website. You can set up a new test in two minutes, submit a question about your website, and get 10 responses from Feedback Army reviewers. And it all costs only $15.



UserTesting.com
For $39, UserTesting.com provides you with video of a visitor as they use your website, speaking their thoughts about their experience. You also get a written summary of the problems they encountered while on the website. Videos are generally about 15 minutes long and can be downloaded for archiving and editing (even embedded on a Web page).



IntuitionHQ
IntuitionHQ lets you sign up and start creating tests for free. Pay only once you start actually running tests (and then it’s only $9 per test). Creating a test simply requires that you upload screenshots and then write tasks for users to complete. Once the test is created and published, you get a URL to share with whoever you want to perform the tests.



Mechanical Turk
While not strictly a usability testing app, Amazon’s Mechanical Turk service can be used to gather usability data or feedback from real users. Just set up a “HIT” (human-intelligence task), and then set how much you’re willing to pay people to perform it. You pay only when you’re satisfied with the results.



UserFeel.com
UserFeel.com performs remote usability tests for you, providing videos of users testing your website. Just specify the website that you want to test, set the scenario and tasks, and then watch the videos. Pricing is $39 or less per test, with a 90-day money-back guarantee.



Loop11
Loop11 offers user testing for up to 1000 participants at a time, with an unlimited number of tasks and questions. There’s no time limit and no limit on the number of websites or wireframes you can test. Try Loop11 for free (with a maximum of five tasks and two questions, with data stored for only seven days); after that, tests are $350 each. Tests don’t require any code to be added to the website being tested, which means you can even test competitors’ websites.



ClickTale
ClickTale offers a number of usability testing services, including visitor recordings, click heat maps, mouse movement heat maps, and conversion funnel visualizations. Premium plans start at $99 per month, with full playback and a choice of three out of the four heat maps offered, while other plans (at $290 and $990 per month) include more features. A limited free plan is available to try out the service, as well as enterprise options.



CrazyEgg
CrazyEgg offers heat maps so that you can see exactly how users interact with your website and so increase your sales or leads. In addition to standard heat maps, CrazyEgg also offers scroll maps, confetti (which allows you to distinguish between all of the clicks your website gets, broken down by referral source, search term and other variables), and overlay reports. The basic plan is only $9 a month and includes 10,000 visits per month, up to 10 active pages, and daily reporting. Starting with the “Plus” plan, which is $49 a month, you get hourly reporting.



Webnographer
Webnographer provides remote usability testing services. You can test websites, Web apps, prototypes and intranets with a large number of users anywhere in the world. The tests are unmoderated, so you get honest feedback. And no downloads or website modifications are required to run tests. Pricing is available on request.



Regardless of which tool you choose, the important thing is to recognize the value of user testing. Getting real feedback is an invaluable way to determine which parts of your design work and which don’t. With that information, creating a more user-friendly website that converts better is possible. Usability and user experience testing should be a part of any website redesign project, to ensure that the changes being made will actually have a positive effect.

To streamline the selection process, below is a chart with the key features of each tool, as well as pricing information.





Service
Cost
Tests existing or new users?
Type of testing
Visual reporting?


Ethnio
$0 – $299 per month
Existing
Surveys (a hub for other testing services)
Detailed reports


Simple Mouse Tracking
Free
Existing
Mouse tracking
Yes


xSort
Free
Both
Card-sorting
Yes


KISSinsights
$0 – $29 per month
Existing
Surveys
No


FiveSecondTest
$0 – $200 per month
New
Visual questionnaires
No


AddUse
$0 – $99, depending on number of tests
Existing
Surveys and user tests
Somewhat


UserEcho
$0 – $256 per month
Existing
Surveys
Somewhat


Usabilla
$0 – $199 per month
Existing
Micro-usability
Yes


Google Website Optimizer
Free
Existing
A/B and multivariate tests
No


Userfly
$0 – $200 per month
Existing
Mouse clicks and movement recording
Yes (video)


Clickdensity
$0 – $400 per month
Existing
Heat maps
Yes


Navflow
$0 – $200 per month
New
User paths
Yes


User Plus
$0 – $35+ per month
Both
User testing and usability scoring
Yes


Chalkmark
$0 – $109 per month
Existing
First clicks
Yes


4Q
$0 – $399 per month
Existing
Surveys
Yes


WebSort.net
$0 – $2,499 per year
Both
Card-sorting
Yes


Concept Feedback
Free for community feedback, $99 per expert
New
Expert and community feedback
Yes


WhatUsersDo
£30 per user
New
General usability
Yes


TryMyUI
$35 per test
New
General usability
Yes


Userlytics
$59 per participant
New
General usability
Yes


OpenHallway
$49 – $199 per month
Both
General usability
Yes


GazeHawk
$495 – $995+ per test
New
General usability, including heat maps
Yes


Silverback
$69.95
Both
General usability
Yes


Verify
$9 – $29 per month
Existing
Nine types of usability tests
Yes


Feedback Army
$20 per test
New
Surveys
No


UserTesting.com
$39 per user
New
General usability
Yes


IntuitionHQ
$9 per test
Both
Screenshot surveys, including A/B tests
Yes


Mechanical Turk
Varies
New
Surveys
No


UserFeel.com
$39 per test
New
General usability
Yes


Loop11
$350 per project
Both
General usability
Yes


ClickTale
$99 – $990 per month
Existing
Heat maps
Yes


Crazy Egg
$9 – $99 per month
Existing
Heat maps
Yes


Webnographer
Unknown
New
General usability
Unknown



(al)


© Cameron Chapman for Smashing Magazine, 2011.
]]></description>
<dc:subject>UX_Design testing tools usability</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:f3b7c61df5d5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:UX_Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:testing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:tools"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2010/02/26/usability-review-of-charity-websites-taking-the-lead/">
    <title>Usability Review of Charity Websites Taking the Lead</title>
    <dc:date>2010-02-26T19:16:45+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2010/02/26/usability-review-of-charity-websites-taking-the-lead/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[    Over the years designers have pushed themselves to create unique and inspiring designs. Companies have yearned to have websites which are innovative and make them stand out against their competitors. Yet charity websites have not progressed along with trends and expectations — they seem to have been designed for launch and then only updated with minor tweaks to suit the content.
It has become a recent trend for charities to look at their online identities and branding; spending money on creating user experiences which suit their user base, and over time getting people involved with their campaigns and messages.
Below we look at charity websites which have successfully developed their online brand using modern and creative ideas. We will also discuss how each charity website can be improved because, as we all know, not every website is perfect. There are always improvements to the design or usability that may have been overlooked by management, designers, or developers.
By the way, what was the last time you visited our sister site Noupe? Subscribe to Noupe's feed for more inspirational and design-related articles.
1. Red Nose DayRed Nose Day is a fundraising event dedicated to raising money for Comic Relief.

As you can see above, the Red Nose Day website design combines many different techniques to achieve a highly-minimalist and playful design. Throughout the website you can find non-web-based font headings implemented using sIFR, feature panels built in Flash and a striking navigation, built using CSS Sprites.
The design uses a simplistic colour scheme of white, black and red. Using red along with black and white has a high impact on the user, and of course reinforces the “Red” in “Red Nose Day”. The red is predominantly used on call-to-action areas since it is effective in drawing the user’s eye.
Donate button featured in Red Nose Day’s header
Because the Red Nose Day campaign reaches such a wide audience, the website design achieves the perfect balance between comical elements and factual information. Satisfying the requirements of such different audiences — the younger generation and more mature users — is a tough job and Comic Relief have managed it effectively and impressively.
ImprovementsNowadays, making content accessible should be a routine part of any site’s development. Unfortunately, the Red Nose Day design makes heavy use of light grey text on a white background. This lack of contrast can prove difficult for users with poor eyesight. A way to improve this would be to use a much darker grey or black in order to increase the contrast between the text and background. Alternatively, they could offer this option through user-controlled accessibility website tools.
As mentioned above, the purpose of the Red Nose Day event is to raise money for Comic Relief. As a visitor to the site, I would be interested to know the progress of the fundraising efforts. While a counter is included on some of the content pages, it would be more beneficial to the user if it was also displayed on the home page. This demonstrates to the user that the charity is currently active. Of course, they may have their reasons for excluding it from the home page that we’re not aware of.
Fund raising total featured on Red Nose Day content pages
2. Give Us A LiftThe Give us a lift campaign website, run by WRVS is aimed at raising awareness of how older people struggle to get to the places they need to on a daily basis without the support of community transport.

The design makes use of a large background image and cardboard cutouts to portray the theme of hitchhiking. Along with a striking colour scheme of a dark background with contrasting pink, green and blue elements, the design makes a big first impression on the user. These contrasting colours are carried through onto the content pages and, in the sidebar, two main call-to-action links in purple and green ask the user to either donate or volunteer.
A speedometer Flash element is positioned to the base of the page counting the number of volunteers. Due to this unique idea and design, the user’s eye is drawn down to the bottom of the page where another two call-to-action links can be found.
This campaign website makes heavy use of Flash elements in order to display donation totals, volunteer totals (in the speedometer), and the winners to the campaign’s Twitter competition. It is unusual to see such creative elements within a charity design and it’s refreshing to see a website that understands the content that needs to be communicated — but doesn’t sacrifice engaging creativity.
Twitter winners from the Give us a lift campaign website
Though the high impact design would have a stronger response from a younger audience, the website also caters for the older generation with attention to accessibility. On all content pages, a button can be found to increase the content’s font size using jQuery. Also, a dark font colour is used to add high contrast between the text and background.
ImprovementsAs mentioned above, the Give Us A Lift campaign website makes heavy use of JavaScript and Flash to display its contents. These elements could become unusable for the older user base as they may not have Flash installed, or have disabled JavaScript — making the video section impossible to use. The heavy use of Flash elements also increases page-load times. When implementing these elements, it is important to optimise the Flash and cater for circumstances where Flash may not be installed or JavaScript is disabled.
While the designer of the website has obviously tried to pay much attention to all of the details, with many elements popping out to the user, the main navigation seems to be lost and this can cause a problem for the user if they cannot instantly recognise the main source of navigation. This may be because the navigation not being featured within the main layout container; also, the lack of background colour makes it blend into the dark background image and the user could find it difficult to read the grey text on black. Brightening these elements and making them stand out more would make this design more polished and create a much happier user experience.
The Twitter page on the campaign website features a stripped-down version of Twitter’s feed widget. Though it is great to see this integration of social media into the website, the lack of creativity and separation between tweets creates an element that resembles Google Ads. This would obviously cause problems since the majority would most likely ignore this part of the page.
Comparison of Twitter Feed with Google Ads
3. ChildLineChildLine is a charity set up to aid children with a variety of problems ranging from helping with sexual and physical abuse to answering questions about concerns for parents and other family members.

The target audience of the ChildLine website is of a younger age, therefore the design reflects a very animated theme with cartoon characters repeated in the background, large font sizes and a bright colour scheme. The cartoon characters are also a representation of what the child might be feeling when visiting the website — a subliminal message that ChildLine understands what they are feeling, and can offer help.
Throughout the website, a yellow tab is fixed to the left side of the page and acts as a panic button for the user to click if they wish to quickly hide the website by sending the user to the Google home page. This implementation is similar to the “Feedback” button that popular sites use as part of the Get Satisfaction service.
Hide page tab from ChildLine website
Children are always looking to customise anything they can: desktop backgrounds, icons, Myspace layouts, etc. So ChildLine have made use of the MooTools JavaScript framework in order to allow the user to change the background colour and image of the website. After clicking the ‘Change Wallpaper’ tab at the top of the page, a white panel slides down for the user to customise the wallpaper of the site. These slide-down panels are used on many websites to display hidden forms and content.
A question is raised as to whether it is appropriate to allow this level of customisation on this kind of website. From a child’s perspective, however, this can create a fun user experience and a safe environment that they enjoy visiting. This creates trust between the child and the charity, which is an invaluable benefit. This sense of fun and trust will also mean the child is more likely return to the site.
Change wallpaper panel from ChildLine website
ImprovementsAn important part of the ChildLine website is to offer help and protection to children in need. The “Hide Page” tab discussed above is an invaluable part of this website, helping children navigate away quickly if the need arises. A similar offering is a footer link labeled “Cover Your Tracks”. This gives the child information on clearing traces of their website visit from their computer.
Though the pull-down panel is great for small amounts of content (for example, the wallpaper customisation), large amounts of content can disrupt the page flow. At the top of the ChildLine design, “Accessibility” and “Help” tabs are used to display large amounts of text on the relevant topic. This heavy amount of content pushes the main content of the page down below the fold and can cause confusion. A way to improve the usability of these sections would be to take the user to a new content page where headings, white space and imagery can help break up the lengthy content.
Earlier we spoke about the bold repeating background that’s heavily featured in the design. When scrolling down a long content page, this repeating background can disrupt the user’s flow and be quite harsh on the eyes. Making the background image fixed (by simply adding background-attachment: fixed; to the CSS), the user will find reading down the page a lot easier and not be distracted by the moving background when scrolling.
The yellow “Hide Page” tab can for some users be easily lost in the bright colour scheme and bold background. Due to the idea of emergency and panic behind this button, perhaps swapping the yellow for a red could provoke an automatic user response. The use of red would also mean that this tab would be harder to lose in the colors.
4. WWFWWF is the world leading charity in the conservation of wildlife.

The design for the WWF website is very different from the other three charity websites we’ve considered. The layout is very clean, grid-based, and focuses heavily on high-quality imagery to add a polished finish. By using a clean, organised layout and relying on eye-catching photography, the user is drawn to focus on what is important to the charity: its content and purpose. The WWF’s user base would be a more sophisticated and older generation than that of, say, ChildLine, so the user may be less daunted or afraid to read the content.
The features panel on the home page uses jQuery to rotate through different stories, latest news, and call-to-action buttons. Though the jQuery was custom written, it is possible to replicate using jQuery plugins or following tutorials such as Creating a Slick Auto-Playing Featured Content Slider on CSS-Tricks.
A neutral colour scheme of white, black, and grey is used to make any important call-to-action buttons more visible. These buttons have a striking green or orange background. When the user moves into the donate section of the charity website, the design is cut down to the bare minimum, again allowing the user to focus on the core messages. All navigation and unnecessary buttons are removed.
WWF donate now section
ImprovementsIn contrast to the other charity websites, it would seem that the primary objective of the WWF website is to teach users their purpose and goals. A lot of the content and call-to-action links are aimed at making the user read about the charity and what they can achieve. The “What We Do”, “How You can Help” and “Donate Now” buttons in the header vary in size, the former two being larger than the latter. This difference in size reaffirms that the charity feels that an understanding of their goals is important prior to donating. Users rank the importance of elements by their difference in size. If the charity wished to push more donations in the future, it would be effective to swap the sizes between these call-to-action buttons in the header, giving the ‘Donate Now’ call-to-action a higher importance to the user.
Varying call-to-action sizes in WWF design header
As part of the WWF design, a description of what a £10 donation could purchase, or how it could help the charity, is featured within a panel. However, when within the donation section of the website, a £10 radio button is not offered to the user, potentially causing confusion. The user is then left with the options of £5.00, £25.00 or entering their own value. There is quite a large leap between the two default amounts, and the user may be inclined to opt for the £5.00 option. Contradictory to the prior emphasis placed on the importance of £10.00 as a donation value, it would be interesting to know how many users opted for £5.00 but perhaps would’ve been willing to donate £10. Perhaps including this as a middle-ground default donation amount would be a nice addition.
5. MacmillanThe Macmillan Cancer Support charity offers help to those living with cancer and their families.

When the Macmillan Cancer Support website initially loads, the user may feel overwhelmed by the amount of information and links on the page. However, this portrays to the user that the website and charity have much advice and support to offer. A way in which the design tries to break down the information, is by compartmentalising everything into panels which can be closed and re-opened via jQuery as the user sees fit.
An improvement on this, and in effect making the initial page load less daunting for the user, would be to have some the panels already collapsed. Therefore the user can expand only those they wish to read more about.
Collapsible panels on Macmillan Cancer Support home page
These panels on the home page use block headings with strong background colours to make defining sections and sub-sections easier for the user. Dark green headings are used to define a new section, whereas a lighter green heading is used to define a new sub-section. By making these headings so definitive the user can break the content down into more readable chunks.
The bright colour scheme used in this design can create an emotional response from the user. The user may be made to feel more light-hearted and hopeful through the use of warm earth colours.
ImprovementsThe Macmillan design makes use of a lot of call-to-action buttons with distinct background colours. Unfortunately these links are left as inline elements, meaning that only the text is clickable. It would be more user friendly if these were block-level elements where the click area of the link would include these strong background colours. By increasing the clickable area, the chances of a successful click from the user is heavily increased.
The charity’s name and tag-line are displayed in the top left, as is customary. These elements, however, are not clickable, so this could cause brief confusion when the user is looking for a link to the home page.
Unclickable Macmillan title and tag-line in header
A large usability error on the Macmillan sign-in form is the lack of labels within or next to the appropriate fields. The user is left confused and must guess what information to put in which field. Though users are used to entering two pieces of information (user name and password), it is not clear whether the site requires a username or email address. As internet users, we have a long list of websites which we hold accounts for, all with varying requirements for a successful login. On the “Online Community” page, the same form uses labels within the fields (JavaScript is used to remove these labels when the user focuses on the field). To improve the consistency of the website and allow for a more user-friendly form, these labels should be applied across the website.
Sign-In Form without appropriate labels on Macmillan website
6. DogsTrustDogsTrust is a charity that aims at finding homes for stray and abandoned dogs.

The DogsTrust design uses a high-impact colour scheme mainly consisting of yellow, black and white. The yellow immediately catches the user’s attention, and can be interpreted as a positive, happy colour.
The main site navigation features many commonly-used techniques such as rounded corners, gradients, and a subtle 1px white line across the top. These elements, combined with the black create a visually effective navigation. The navigation only consists of five links, therefore giving users fewer choice, and creating a more focused user journey.
DogsTrust website’s main site navigation
The home page design consists of minimal content and uses effective white space to allow everything to appear above the fold without looking cluttered. The users of the DogsTrust website are highly likely to be dog lovers and therefore the use of dog imagery on the four main call-to-action areas would certainly draw the user’s attention. These areas also feature four varying colours which contrast well with the yellow and black.
Call-to-action areas with dog imagery and contrasting colours
ImprovementsThough we briefly discussed above that the home page uses whitespace effectively to reduce clutter, the header contains many links and words; the user could get easily confused. With login, register, contact, privacy and shopping links, a search form, and two taglines, the user is given too much choice, so this section could be improved.
While going through the process of donating, there are certain fields that cause the page to refresh and brings the user back to the top of the page again. The user is then required to scroll back down the page to continue filling out the form. During this process, this page refresh occurs 3 times, which can be rather annoying. It would be beneficial to develop the form using alternatives technologies, such as Ajax, which would remove the need for page refreshes.
The imagery on the DogsTrust website features happy, healthy dogs that need re-homing. It is assumed that this use of imagery is successful in receiving donations or re-homing dogs. However, similar charities make use of imagery where the dogs appear unhealthy and unhappy. It could prove useful for the organisers of DogsTrust to try out this type of imagery alongside the current images through A/B testing, therefore seeing which type of image is more effective in converting website users into contributors.
7. ShelterShelter is a housing and homelessness charity providing advice, information, and advocacy to people in housing need.

The logo featured in Shelter’s design is simple and effective. While being easy to read, the typography of the “h” is suggestive of the charity’s purpose. By using the colour red, the user is given a sense of urgency. The audience of the Shelter website varies a lot from a younger to an older generation, therefore the design is very refrained and simplistic. This allows the message to be portrayed through the content rather than through heavily-designed elements.
Throughout the design you will notice use of solid horizontal borders and lines which give a sense of structure and organisation. The lines allow the user to break the content up and be more easily read, but can also be interpreted as a symbol of shelter.
The footer features links to social media profiles such as Twitter, Facebook, and YouTube. This suggests to the user that the charity is up to date with the latest trends and advertising techniques. Users may be intrigued to click these icons and discover more content.
These social media icons also use jQuery to create a nice rollover effect which highlights and changes the text underneath to a descriptive caption of the icon.
Rollover effect on Shelter’s social media icons
ImprovementsWhen browsing the Shelter website, the user can find themselves clicking through a lot of links until they find the page they want. This can be due to the large amount of call-to-action buttons and lack of whitespace on certain pages. By increasing the whitespace between elements, an easier user experience can be created and also makes content easier to break down and consume.
Example page with large amounts of links where whitespace can be improved
Again, while browsing the child pages of the Shelter charity website, links to the donate section are easily lost among all the call-to-action areas, pictures, and content. Perhaps by making the background of the “Donate” tab in the top navigation red, utilising the red from the existing colour scheme, this may draw the user’s eye. The user would spend less time trying to locate the donate section.
8. Sponsor LeeThough not a charity website, Sponsor Lee is a microsite intended to raise money for Action for Kids charity.

Using a cool colour scheme of blue, silver, and white, along with friendly vector illustrations, gives the user a professional impression. This is important because the user wants to believe they are giving money to a good cause and not being ripped off. Lee Munroe, the designer of the site has been clever with his use of the fold as all important information is displayed at the top. Though users are not afraid to scroll, they do not have to look too hard to find the information they need.
Included in the header is a progress total and aim for the sponsorship. By including this in the design, the campaign is made to feel more realistic and the user can then identify with how much of a difference they, themselves, can make. Now the campaign has finished, users can see how well Lee has done against his target. By putting this total in yellow, the number stands out and the user can see immediately that Lee beat his target.
ImprovementsThe Sponsor Lee website displays a lot of creativity from the colour scheme to illustrations in the header. Unfortunately towards the bottom of the design, it comes across that parts are unfinished or broken, for example the social media links and footer. This can give an impression of lack of commitment or a rushed process.
Sponsor Lee website footer
9. ShelterBoxShelterBox is a charity that helps communities recover from natural disasters. This includes providing “emergency shelter, warmth and dignity to people affected by disaster”.

Like many of the charity websites we have already discussed, the ShelterBox design uses a very neutral base colour scheme of grey and white combined with a high contrast green. Main call-to-action buttons are then given a yellow background to effectively stand out to the user. On the right of the home page, the design depicts to the user exactly what ShelterBox as a charity provide along with a counter-style number showing the number of boxes distributed so far by the charity.
By showing the counter and including additional zeroes at the beginning of the total, the user understands that this is an ever-increasing number and therefore, an active campaign.
ShelterBox panel featuring box shot and box counter total
Adjacent to this panel, an auto-rotating image gallery is displayed using the jQuery Cycle Plugin. This acts as a call-to-action for the user to find out more, but also shows the user the charity’s work first-hand. This makes the user feel directly involved and may want to do more to help. Overlaying the image, a caption with a slightly transparent background that describes the content of the image is displayed. This method is currently very popular in image galleries.
Auto-rotating image gallery on ShelterBox home page
ImprovementsImportant elements of the website are lost due to the lack of creative design such as the “Latest Deployments” and “International” sites lists on the home page. The charity should style important elements such as these so that they stand out more. This can be achieved perhaps by adding background colours and making them bigger. By increasing the size of elements, the user will recognize these as more important.
Latest Deployments section on home page
The design lacks a sense of containment — the content of the website seems to bleed into the white background of some pages, making reading content difficult. Perhaps by making the background of the body a light grey and keeping the main container background white, a barrier can be created between the content and the rest of the page.
10. Action for ChildrenAction for Children is a children’s charity that offers support to vulnerable children in the UK.

The Action for Children website design is similar to that of Red Nose Day, using a very neutral colour scheme consisting of cream, white, and a contrasting red. Elements of the design are constructed of sketch-like lines to resemble a children’s drawing.
Elements of high importance are given a light cream background to help them stand out against the other sections that have a white background. The user can therefore easily detect which sections to pay more attention to.
Embedded on the home page is a video of British actress Davina McCall. By having a frozen shot of a celebrity on the home page, the user is reassured of the charity’s success and credibility. The effect being potential donations from a user who is feeling confident that the charity is well supported and perhaps inclined to become involved because of celebrity associations.
Once the user’s eye is drawn to the celebrity viral, they will notice four call-to-action areas displayed on the right. The wording of these are very snappy and simple to suggest to the user that these actions are easy, but meaningful. Alongside the wording, hand-drawn illustrations are used to add interest and creativity.
ImprovementsWhen viewing the sitemap of the Action for Children website, there is a bug in the CSS of the columns. Columns are too wide to fit the intended number in a row, meaning columns are misplaced below others on the right and breaks the flow of the page. This can be fixed by either making the content area wider on this page (as there is no sidebar), or adding a clearing element after each row. Making the columns easier to read allows the user to find the page they’re looking for quicker.
Another bug is the functionality of the inline popup windows that appear after clicking the “Send Page”, “Feedback”, and “Share Page” links. The windows are cut off underneath the title, making the forms unusable.
Example of inline popup window bug on Action for Children website
Support Needed: Stand With HaitiAs many are aware, Haiti recently suffered a major earthquake which devastated the country. Stand With Haiti is a campaign website set up by Partners In Health who, even prior to the earthquake, have been providing medical care in Haiti for over 20 years.

The first thing you notice about the Stand With Haiti campaign website is the colour scheme. The blue is both soothing and in keeping with the Partners In Health branding. In contrast with the blue, orange and deep reds are used on call-to-action buttons and on important pieces of information that portray a sense of urgency and high importance.
Consistency with the deep red is used so the user can easily recognise buttons and links — meaning an action is required from the user. Through the use of page structure, size, and order, a user visiting the Stand With Haiti website is clearly provided with an order of priority for certain aspects of the website. The first being to Donate using the large red “Donate” button found at the top of the page within the main header. This element is one of the first things the user’s eye is attracted to when landing on the website.
Directly underneath this large “Donate” button are two smaller, slightly darker red buttons. The purpose of these is to help users share the site on popular social media websites, with the goal of increasing the number of visitors and donations.
Finally, the user is left to browse and read the site’s content at their own leisure. Being a current crisis, it was an obvious choice to give higher importance to donations and spreading the word. By prioritising areas of the website, a simpler and more effective user experience is created.
Prioritised buttons featured in Stand With Haiti header
While acting as a medium for receiving donations, the home page of the Stand With Haiti website acts as a news hub for the latest pictures and information. This is crucial for users who wish to be kept up to date with the crisis and know how their donations are helping.
A jQuery-built image gallery, similar to ShelterBox, is used to display images of the crisis. Underneath there is a list of recent blog posts and instant updates from the charity’s Twitter feed.
ImprovementsAs we discussed above, the design features a lot of orange and red buttons. However, none of these buttons have hover or visited states. Adding these to the links and buttons would increase the usability of the website, showing the user clickable areas more prominently and helping them recognize where they’ve already been.
Donations being one of the main purposes of the Stand With Haiti website, it is important that the donate form is usable. Unfortunately, at first glance the donate form looks cluttered.
Stand With Haiti donate form
The form would be much more usable and readable with better use of whitespace. It could also improve if the form labels were clickable to their appropriate input field. While this provides easy-to-select fields, it also ensures that people with screen readers and auto-fill functions can use the form.
After adding effective white space and increasing the usability of the form fields, a button similar to those used on the home page of the site can be used for the “Process Contribution” button. This should also be repositioned as users expect submit buttons of this kind to either be on the left or right. Few forms, especially this wide, place their submit buttons in the middle.
Useful ResourcesMany of the methods mentioned above can easily be achieved yourself:
Rich Typography On The Web: Techniques and ToolsThe Mystery Of CSS Sprites: Techniques, Tools And TutorialsBackgrounds In Web Design: Examples and Best PracticesMooTools Tutorials and Resources Round-Up45+ New jQuery Techniques For Good User Experience10 Useful Usability Findings and Guidelines© Ben MacGowan for Smashing Magazine, 2010. | Permalink | 36 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: usability 
]]></description>
<dc:subject>Design usability</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:809ca9dbfdc4/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2010/01/13/shopping-for-bedsheets-how-hard-could-it-be/">
    <title>Usability Study: Shopping For Bedsheets – How Hard Could It Be?</title>
    <dc:date>2010-01-13T14:08:31+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2010/01/13/shopping-for-bedsheets-how-hard-could-it-be/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[    
Online shopping is a great way to economize and reduce the stress of shopping, but shopping online for certain types of products can be harder than shopping in person. Recently, I looked at how well major online retailers (Macy’s, Target and Overstock.com) facilitate shopping for a deceptively complex, though very common, item: a set of 300-thread-count, white cotton sheets for a queen-sized bed. Here’s what I found.
[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]
Macy’sAs with all things Macy’s, its website is highly polished and savvy with marketing. The home page is clear and well organized, with categories that are well delineated and prominently displayed. This clarity continues on the “Bed & Bath” landing page, where the “Sheets” option is emphasized, being listed under “Bedding” as well as in the “Featured Categories” on the right. But once they’ve made their big choices, most shoppers will undoubtedly run into problems.
The “Sheets & Sheet Sets” page is a stumbling block. The ways of filtering the hundreds of options in this list are limited, and the filters we find are confusing and inconsistent anyway. Although a prominent “Brand” filter is available, I don’t purchase sheets regularly, and so I don’t have a strong commitment to any one brand (at least not any stronger than I do to color, pattern, material, etc.).
The left navigation menu provides additional options, but these are of limited value. The list mixes promotional navigation (”One Day Sale”) with content (”Sheets Buying Guide”) and filters (”By Threadcount”). The best way to help shoppers narrow down a long list of items is by adding a filtering function, allowing shoppers to prioritize. This page would greatly benefit from a function that allows users to sort or filter based on common criteria such as color, price, size and material.
So, I try the “Sheet Buying Guide,” the link to which is prominently highlighted on the “Sheets” page. The “Guide” is a well-written glossary of terms, but it doesn’t deliver on my expectation of assistance with selecting sheets. Strike two.
Large view
The left column offers more product categories. Because the difference between “Sheet Sets” and “Bed Sheets” isn’t clear, I choose “By Threadcount” as the next best option. Selecting “200-320 Threadcount” reduces the results to a more manageable size. The pictures help me to distinguish the items, making it easy to dismiss patterned sheets and focus on the seven solid-color choices that fit the bill. However, with each item displaying as many as six different prices and four lines of underlined descriptive text, even this small handful of options is difficult to scan. Being able to compile a few options into a comparison table would really help!
Large view
It seems the only way to tell which sheets are available in white and queen size is to check them out one by one. So I start clicking on items. The first looked fine but got poor customer ratings. Seeing the rating on the product page, along the number of people who reviewed and would recommend the item, is helpful, but seeing this information on the results page would have saved me a click.
Large view
The second item might work, but I have to scroll down the page to see the available sizes and prices. Listing the sheet sets of different sizes alongside pillow cases and single sheets makes it a bit hard to scan for what I’m looking for. Also, I notice that printed and solid colors are listed as separate items, making the list longer and more complex than it needs to be. Being able to make my selection in a simple multi-step process would be better (e.g. Step 1: select the size. Step 2: select the color, etc.); either that or combining all of the colors into a DHTML drop-down menu that includes a thumbnail image. I decide to keep looking. The third item is a possibility, but it’s a bit pricey.
The fourth item isn’t available in queen size. The fifth doesn’t come in white. Now I have to remember: was it the first or second one that I liked? I wish I could mark candidates so that I didn’t have to remember (or takes notes). The inconspicuous “Compare to best sellers” link might have been helpful, but it isn’t: items are displayed in a nicely organized table, but they seem randomly selected from multiple product categories, such as mattress pads and pillow cases, and relevant data is missing from the comparison rows.
Moving on, I notice something new on the sixth product page. While previous pages displayed all sizes in a single-item selection list, this one has “Size tabs” at the top of the list. Did I miss this before? Because these tabs are so discrete and appear only on some product pages, I can’t be the only shopper who missed finding the best option for my needs.
Large view
Once I’m ready to make my selection, I scroll down to find… “Add to bag”? Macy’s would do better to stick with the standard “Add to Cart” phrase, and not introduce verbal cleverness—and uncertainty—at the moment a shopper is ready to commit to the sale. I click this, and the page refreshes with an error message at the top of the page. I’ve forgotten something, though the message isn’t specific about whether I omitted color, size or item type. I need to scroll down to learn that I haven’t entered a quantity. Displaying the error message next to the offending field would be better, or better yet, default the quantity to “1″ when I select an item color.
Large view
I correct the error and proceed, getting important feedback in the form of a pop-up window that confirms my selection, the cost and a running total of items in my bag. Appropriately, two options are presented: “Continue shopping” or “Checkout.”
The check-out page displays a clear and detailed list of items I’ve chosen, with an option to easily change quantities by using a drop-down menu next to each item. Any change quickly recalculates the total cost, including shipping charges and estimated tax, without requiring me to “update” or “save” the change, as one sees on many other commerce websites. At least this part of the process was a good experience.
Large view
Though Macy’s website has many nice features, the most important function of finding the right product is unwieldy at best. The absence of an effective method of narrowing down a list of products to find the item I’m looking for made the experience more difficult than it should have been. Although the high-quality photography makes it quick and easy to scan products, the combination of multiple colors or elements in a single shot sometimes confused me.
TargetI had high hopes for Target, which has done such a great job of transforming itself from a cheap discount chain into an affordable, appealing and style-conscious retailer. I went onto its website hoping it brought its customer focus to the online experience.
The home page is cheery, though a bit overwhelming. Colorful graphics and promotional headlines vie for attention and thus decrease the prominence of the main navigation a bit. On mouse roll-over, the main navigation pops up a list of categories and sub-categories. For my purposes, “Home” seemed the best option, and “Bed + Bath” the most logical choice. But then I notice a “Bedding” category in the promotional rotating carousel, which looks more relevant. Big mistake. There’s nothing there about sheets. I’ve landed in the seasonal section for some reason.
Large view
I return to my first choice, selecting “Bed + Bath” from the main navigation. This page has several other overlapping categories, such as “Bedding collections” and Home bedding basics.” I have to look hard to find “Sheets” under “Bedding Basics” just above the fold.
Large view
The “Sheets” page looks friendly, with bright-colored dots and a “Shop by color” option front and center. A quick scan reveals several other obvious filtering possibilities: I can also shop by “Material” or, on the left side, by “Color” (again), “Fabric,” “Special sizes,” “Thread count,” “Type,” or “Brands + designers.” Although I’m not sure what the difference is between the two colors, I choose the “White + Cream” color dot.
Large view
The “Results” page has a clean appearance, with various options for displaying items: as a thumbnail grid (the default) with larger images or as a list; although these options are indicated by icon and are not immediately obvious. I can also sort by such useful attributes as price and rating. A single price range is displayed for comparison. And knowing how much credence to give a rating is easy with the number of reviews indicated.
But there are too many items to sort through. I choose “300 thread count” from the filters in the left column, expecting the results to reduce to a manageable number. Instead, I get a whole new list of results, in all colors. Stranger still, bedskirts and duvets also appear in the long list of items. Apparently one can’t combine the color filter with the thread count filter. Not ideal. I guess I’ll have to wade through the list of “white” sheets.
Large view
The “Quick info” pop-up helps a bit, displaying additional information in a pop-up window atop the results page. It’s useful for seeing which sheets are available in queen size. Many of the “sheets,” though, are just pillow cases (too bad I can’t filter these out). In some cases, critical information such as color and thread count are missing, even on the “Full Details” page. One item comes in assorted colors, but I have no way to select the one I want. No wonder it has no reviews.
I find one option I like, but I’d like to compare it with others. I notice an “Add to TargetList” button in the “Quick info” window. I hope this marks the item as a strong candidate so that I don’t have to take notes. Unfortunately, I’m required to “Create a new list” before I can save the item. I want to keep shopping, but perhaps this won’t take long after all: it asks for my name, email address, reason for creating the list… and this is only step one of two! This is too much work. The retailer should let unregistered shoppers use this feature. Relatively few people must cross this high barrier to entry.
Once I’ve made my selection, I see a clear option to “Add to cart” or “Find it at a Target store.” This second feature is very good. It returns a list of nearby stores, showing the availability of the item along with address, phone number, hours and a map link: great if I wanted to do a little pre-shopping. Instead, I choose “Add to cart” to complete my online purchase. My “Quick info” pop-up refreshes, confirming my selection and recommending items that other guests have “shopped for.” Two buttons let me either “View cart + checkout” or “Continue shopping.” Choosing the latter simply closes the pop-up so that I can continue where I left off. Nice.
I liked the Target experience a bit better than Macy’s. Even though I was left with a long list of products to browse on both websites, Target allowed me to drill down a bit further. Also, the “Quick info” window made browsing quicker, freeing me from having to click through to successive product pages, as I had to do on Macy’s website.
OverstockUnlike many of its competitors that have taken traditional brick-and-mortar businesses onto the Web, Overstock focuses exclusively on its online business. But has it taken advantage of this focus to create a better shopping experience for consumers?
The home page is simple, with a rotating promotional carousel featuring products intended to catch interest. With a specific task in mind, I easily locate the “Bedding & Bath” category among the primary navigation options near the top. On roll-over, a drop-down list presents sub-categories that are sufficiently distinguishable, and I select “Sheets.” So far, so good.
The main “Sheets” page is nice. Overstock.com has obviously considered the needs of the shopper. A set of clear filters displays the number of items in each category. It allows me to apply filters additively, with useful options such as size, thread count, color and material. The effect is a manageable set of relevant options. One nice feature is that the number of results in the unselected categories refreshes automatically whenever a new filter is applied. One can even remove a parameter by simply unchecking a box.
Large view
Another good feature is the prominent display of user ratings for each search result. This makes it easy to compare items without clicking into the full descriptions. But I would also like to see the number of reviews. For me a four-star rating averaged from 10 reviews holds more weight than a single five-star review.
When filtering by color, I expected only solid colors to be returned, but several had a clear pattern. Still, the images made it easy to distinguish between them. Also, I didn’t see any way to set multiple criteria within a category. For example, I couldn’t choose to see all options priced under $50. But price is one of many sort options, so this is less of a concern. And Overstock.com sticks to a single price, regardless of size, which makes items easier to scan; unlike competitors that present a range of prices. Despite minor issues, the page gets me very close to finding my new sheets.
Clicking an item on the results page takes me to a product detail page. At first I’m a little confused. I didn’t expect other products to be shown so prominently here. Then I notice the discrete “People who viewed this also viewed” label above the items in the right column. Seeing other products distracts me from the task at hand. Rather than provide an unobstructed route to my purchase, the website has introduced alternatives—and indecision—at the crucial moment of sale. Also, should I care about items that others have merely “viewed” and not actually bought (bought items being shown lower down on the page)?
I make my decision and select a product. The drop-down menu is fairly long, with all size and color combinations presented in a single list. A more usable interface would be to display these attributes in two separate lists, with the options in the second list updated according to what you select in the first.
Large view
The shopping cart page is presented very clearly, with the options to “Shop more” or “Continue checkout” prominently displayed. But when I decide that I need two rather than one set of sheets, I really have to search to find the “Edit” link. Making the quantity field editable and then updating the total price, as other websites do, would be much better.
I also notice the “Save for later” link. This sounds great for setting aside items that I am not ready to purchase now but might want later. But having to put the item in my cart first doesn’t seem right. I’d much rather be able to do this from the product page, where the function could act as a kind of bookmark, while I continuing browsing.
Now I’m ready to complete my purchase. Once I register, the checkout is contained on one page, with clearly numbered steps. Though a bit overwhelming, a quick scan shows that the page asks for only the necessary information. Moreover, I don’t need to worry about losing my order, which has happened a few times on other websites midway through their multi-page process.
Large view
Overall, using Overstock.com was a positive experience. Despite a few very minor issues, I was able to make my purchase quickly and easily with comfort and confidence. Other online retailers should aspire to its virtues: a concern for the needs of the consumer, intuitive and effective tools and a clean crisp layout.
Shopping Made EasierIt’s clear from my exploration of Macy’s, Target and Overstock.com that a “one size fits all” approach to e-commerce design leads to some user experience challenges when the product category is complex or varied. On the one hand, online stores shouldn’t be obliged to customize the shopping experience for each product category, which would be economically unfeasible. On the other hand, appropriate, well-presented product filtering options go a long way towards ironing out the bumps in an “uncommon” shopping experience.
Interestingly, all three websites I looked at seemed to be constantly changing their design and tweaking the language and navigation options to see what works best. I’m glad to see incremental improvements being made on major retail websites. But given how long these websites have had to improve their processes, it’s surprising more haven’t done so already. Hopefully, as retailers become more aware of best practices and see the value of engaging skilled usability experts, the online shopping experience will reach its full potential as a stress-free alternative to shopping in store.
Further ReadingSearch Results Design: Best Practices and Design PatternsPrinciples Of Effective Search In E-Commerce Design15 Common Mistakes in E-Commerce DesignBest Practices for Designing Faceted Search FiltersWhat People See Before They Buy: Design Guidelines for E-Commerce Product Pages With Eye-Tracking DataRevealing Design Treasures From the Amazon(al)
© Janine Coover, Nick Gould for Smashing Magazine, 2010. | Permalink | 30 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: shopping, usability, ux 
]]></description>
<dc:subject>Design shopping usability ux</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:b9e60b01c5da/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:shopping"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:ux"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.kaushik.net/avinash/sweet-web-analytics-resolutions-kick-notch/">
    <title>Five Sweet Web Analytics Resolutions To Kick It Up A Notch</title>
    <dc:date>2010-01-06T09:13:37+00:00</dc:date>
    <link>http://www.kaushik.net/avinash/sweet-web-analytics-resolutions-kick-notch/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[The new year is such a wonderful time. Wonderful smells in the air. The world is full of hope. Unachievable things seem achievable and are being polished into shiny resolutions. World peace seems within grasp.
As we spring to action full of passion I wanted to share with you all a short list of things that will expand your little world of online marketing & web analytics.
We all have a tendency of getting caught in a rut, using the same tool to do the same things and spew forth the same data. Change is hard, even if we know that we should be executing a multiplicity strategy to win in the web analytics 2.0 world.
Before all the excitement of the new year wears out, here are five simple things I would love for you to try so that your company will have a glorious truly data driven 2010!
#1: Don't suck.
Seems obvious. And yet in our quest for ever more hard problems to solve we forget that the number one goal of every website is not to suck. Especially at the really simple and basic things.
At a recent conference there were three keynotes.
One was extolling the wonderfulness of their multi channel campaign tracking. When I went to their website it was a 100% flash website with a constrained small size where it took too much looking to click on anything and then too much scrolling to read anything and unclear calls to actions (if any). That's sucking. No amount of great multi channel tracking will save this company, they suck at the basics.
The second was about predictive analytics and how using massive integrations between online and offline databases they had accomplished some really cool reporting of data (and make no doubt the IT work done over 18 months to accomplish this was cool). Their home page is a mess. 24% of the content covers what any visitor might want, rest is the company shouting at you (in many annoying ways). That's sucking.

The third was about how to create data driven cultures and how this person had created a impressively big cross functional team across multiple countries and standardized on Omniture after a lot of work over two and half years. I did a search on some of their products and they did not have page one search listings (on Google or Bing) for what should be their head terms. (That's sucking.) They did have PPC ads, which I click on the ad for specific product they land me on generic nonsense pages. That's sucking.
I share these stories to illustrate vividly how we in the web analytics world get lost in our data and Omniture and Google Analytics and reporting and lose sight of the the basics and the customer experience.
It is important to realize that if you suck nothing else matters. Not your api driven integrated massively multi channel attribution analyzed campaign lifetime databases. That is not going to save you or your company.
Before you attempt the hard make sure that you do all the standard stuff to ensure your company has a fighting chance to win.
Here are some tips to inspire you:
 I LOVE looking at the bounce rates for the top 20 landing / entry pages to the site. Find the losers, fix 'em. These guys are so bad they could not even get one click from the visitors.
 Sit down with the owner of the top ten pages to the site and look at them. I mean really look at them and ask this question: "What the heck are we trying to do with each page?" Make sure there is a clear answer (and a match between Customer Intent and Webpage Purpose).
 Check the load time of your important pages. Use something simple like: www.WebSiteOptimization.com Or whatever complicated tool you have.
 Sign up for your websites campaigns using your personal email address. See how the emails look. Relevant? Personal? Click on the links, what to you see on the landing pages? Fix!
 Create a funnel for your cart / checkout / lead submission process. Find the biggest abandonment page. Fix it.
 Ask your Finance department where most money is being spent on the web. PPC? Affiliate? Display? What? Take a week to segment that data and find out how to save 10% of the cost.
 Count the number of links on your main pages. I mean count them. There are 98 links on a travel site I am looking at right now, on the page for a hotel in Chicago. 98! This is a top site.
What are the analytics people doing if they are not helping the product page owner figure out how to kill atleast 50% of those links on a product specific page. There should be one link: Search for Hotel or Make Reservation! Do this for your site.
 Fix the 25 things Dr. Pete lists in this delightful checklist: 25-point Website Usability Checklist.
There are so many ideas. I hope that before you go for massive web analytics glory that your use your wonderful powers first to make sure your site and customer acquisition strategy does not suck.
PS: Bonus tip: Make sure you visit your website once a week, atleast.
#2 Learn basic statistics.
The days of tools and reports simply puking data out are rapidly reducing. No longer can tools or "analysts" just puke 15 metrics on a report and hope to survive.
Web Analytics tools are starting to become smart (see: Analytics Becomes Intelligent). Data is starting to truly get numerous.
For all of the above reasons it is becoming ever more important that you are know atleast Statistics 101. You don't have to be armed with the knowledge of how to create various models or be able to jump into SAS and get naked with it. But you are going to have to know what a mean and a median and r squared and standard deviations and Z scores and confidence intervals and all that lovely stuff is.
If you have not been exposed to statistics perhaps you can take a class at a local community college or university. Many employers will pay for ongoing job relevant education.
Alternatively get one of the simpler books on the topic and immerse yourself in self education. Regardless of if you are a novice or an expert I think one of the best books to start with is The Cartoon Guide To Statistics ($13). A cartoon book? Yes. It is quite good.

Once you know statistics 101 you'll find that you'll think of data analysis differently and you'll get better at finding that proverbial needle of insight in the haystack of data. Knowledge of statistics is a key arrow to add to your analytical skills quiver.
Hello statistical significance!
#3 Try one (or two) new usability / VOC tool/'s.
My passion for the customer is, as they say, legendary!
Part of it is the humility I have developed at the powerlessness of clickstream data to answer all the needed questions. Part of it is that there are just so many darn good options out there to listen to our customers.
So this year why not try one of the newer more powerful and yet cheap usability analysis tools?

 
Here are some tools that are pretty cool and unique:
 Five Second Test. I absolutely love the idea of collecting "first impressions" from current customers, employees or just randomly selected people. Within thirty seconds you can take a screenshot of your lovely home page or landing page, upload it and for free get feedback from real people.
 4Q / Kampyle / UserVoice. Each of these tools does something completely different, and yet each allows people to type things that you can read and be wow'ed or saddened by. Why not try one of these tools this year and truly get in touch with your customers and a real and meaningful way?
 UserTesting.com. You are not a small enough company, or a big enough one for that matter, to do usability testing. This is usability testing for ultra cheap, $29 per person. Set out the tasks, identify your audience, test happens, you watch the video and read comments, you cry, you fix things, you become rich.
Also checkout Feedback Army.
 WebSort / OptimalSort. The information architecture on most website is terrible and the reason is that company employees create it for themselves. A great option to hear from the customers was to do card sorting studies. Problem? Expense! Not any more baby. Both these tools are quite affordable, all online and in a fraction of the time it would take to do a offline card sorting study you can get the key data you need. Sweet.
You don't have to do all of the above. But you do have to listen to your customers.
In 2010 Consider trying just two tools listed above that you have not used so far. I promise you that you'll want to give me a big hug the next time you see me.
#4 Try one new competitive intelligence tool.
I practically have a illicit love affair with competitive intelligence. And I am not embarrassed!
If I ever come to see your company, or you see me presenting publicly, then you have seen me present data about your company / industry and then proceed to say nice / not nice things. There is just so much gold out there to be discovered.
Here are some tools for you to try, ideas for analysis you could do:
 Compete.com / Trends for Websites. I love the depth of data now available in both tools for free (even if you use just the free part of Compete). Index your overall performance against your competitors.
Where do people go after they leave your site? What are the top five referrers for your competitor? What are the top sites that get traffic for the word love? All free from Compete.
People who visit my site, what other sites do they visit? What are the things they search for? What's the difference between US traffic and India? All free from Trends for Websites.
 Google's Search-based Keyword Tool. If you have never explored the long tail for your website (if you are a medium to large site) using SbKT you might be committing a crime. If you have never taken a list of keywords AND the landing pages recommended by SbKT where you have zero impression share and given it to your SEO team then you should feel bad. There is so much here.
[Learn how to use SbKT here: Monetize The Long Tail of Search.]
 Google Ad Planner. Some display / banner ads stink because they are just terribly produced and blink and annoy you with sound and do insane things when you move your mouse over them inadvertently. Most display ads stink because they are not relevant / well targeted. Make sure that is not your ads. Use the Ad Planner to hone into the exact sites where you can find your audiences.
What sites are visited by: Men who are in the market for engagement rings. Women who are interested in the NFL. Young adults who are looking to buy net books. Affluent 100k+ folks or comic book buffs or brides to be.
Now go buy advertising on those sites (from any ad network) and earn a higher ROI on your campaigns.
[Learn more about Ad Planner: Competitive Intelligence Analysis: Google Ad Planner]
These four tools should keep you busy for a long time. Don't go at it all at once. Ask your boss's boss what his next 90 day priorities are, find the tool above that might have the insights, go on a honeymoon with it.
#5 Identify two new micro-conversions and goal values for each.
The road to web analytics glory (and a promotion for you) runs through the Micro Conversions path.
I am absolutely convinced that we don't get the love that we deserve from our company leaders because (even if we get beyond data puking) we rarely quantify the impact of all of work that the website is doing.

During Q1 make it your personal quest to identify two new micro conversions for your website (many ideas in the preceding blog post).
Now make sure, and this is absolutely key, you take one more step and quantify the economic value of each micro conversion (instructions and ideas: pages 159 to 162 in my new book Web Analytics 2.0).

That economic value will help you arrive at the number on the right, $83,848. That number will finally help you understand the complete value your website is adding to your business (only $21,454 is from the Macro Conversion). That number will allow you to measure your campaigns with a level of accountability that will be supremely awesome.
If you do nothing else on this list (I hope it does not come to that), please make sure you do this item. It is that important (especially if you are a non-ecommerce b2b government peaceful protest photo sharing website).
For the true Analysis Ninjas let me share one bonus item, one thing that will put even them above the top. . . .
Bonus: #6 Measure one thing that is "intangible".
The hardest thing to do in online analytics is to measure the intangible. How did people feel about the website experience? What was the positive brand lift? Did the unaided brand recall improve 60 days after the campaign (online or offline)? And more such questions.
Each is really hard to answer, one must think differently.
Here is a post with seven different strategies: Brand Measurement: Analytics & Metrics for Branding Campaigns.
As an Analysis Ninja go all out on three of them this year and take your business to the next level of measurement and insights.
Good luck ya'll!
Ok now your turn.
Care to share examples of sucking that you have killed on your websites? Got a creative use of statistics in your web metrics practice? Which is your favorite online customer listening strategy? Have you had success with quantifying goal values for your micro conversions?
What is your company's online, or online analytics, new year resolution?
Please share your thoughts via comments, thanks much!
Five Sweet Web Analytics Resolutions To Kick It Up A Notch is a post from: Occam's Razor by Avinash Kaushik

    
]]></description>
<dc:subject>Advanced_Analytics Analytics Customer_Satisfaction Marketing_Tips Search_Engine_Marketing Usability Voice_of_Customer Web_Analytics Web_Insights Web_Metrics competitive_intelligence</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:f314c969a05c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Advanced_Analytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Analytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Customer_Satisfaction"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Marketing_Tips"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Search_Engine_Marketing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Usability"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Voice_of_Customer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Web_Analytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Web_Insights"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Web_Metrics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:competitive_intelligence"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2010/01/05/25-user-experience-videos-that-are-worth-your-time/">
    <title>25 User Experience Videos That Are Worth Your Time</title>
    <dc:date>2010-01-05T14:44:43+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2010/01/05/25-user-experience-videos-that-are-worth-your-time/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[    
We’re all mostly accustomed to educating ourselves by reading articles. Rare are the opportunities to attend conferences or watch live shows on subjects that we’re interested in. That’s why we are presenting here phenomenal videos and related resources on the topic of user experience (UX) by different presenters at different events. We have focused on current content but have included some older videos that are still relevant. It will take you more than 16 hours to watch all of these videos. So, make some popcorn, turn off the lights and enjoy.
User Experience VideosThe State of User ExperienceJesse James Garett, founder of Adaptive Path and author of the book The Elements of User Experience, speaks on what UX and UX design is, what UX looked like before and what are some of the challenges people are encountering now. He cites engagement as the main goal of UX design and, through some fantastic examples, shows that engagement is an universal quality achieved through visuality, sound, touch, smell, taste, body and mind. One of the most impressive moments from the session is when Jesse compares Beethoven to an experience designer, accompanied by the Ninth Symphony. Duration: 40 minutes.

UX Best PracticesIn this excellent video session, Nick Finck pries open the most popular websites today, including eBay, Amazon, Toyota, Flickr, Twitter and Netflix, to explain user experience best practices. Nick discusses both the good and bad experiences on these websites on the basis of visual design, information architecture, interaction and ease of use. For those unfamiliar with UX, Nick explains the basic concept and contributing factors. The last 20 minutes of the session are reserved for Q&A, and some very interesting questions and great answers come up. Duration: 1 hour 32 minutes. There is no video of the session, only 75 slides with an audtio track.

The Three Ways That Good Design Makes You HappyIn this short but fantastic lecture, Don Norman, known to many as the author of The Design of Everyday Things, explains visual, behavioral and reflective design and the ways in which each of them affects people. In his witty way, Done shows examples from everyday life. Duration: 13 minutes.

5 Minutes on Imitation in DesignIn this brilliant short talk, Jeffrey Veen explains what is meant by “Good artists copy, great artist steal.” By way of an interesting short story about World War II and the American army’s contact with natives of the Pacific Islands, he also explains “cargo cult” and how it still present today. A truly brilliant video. Duration: 6 minutes.

UX Team of OneIn this half-hour session held at the IA Summit 2008, Leah Buley of Adaptive Path shows what it means to be a UX team of one by telling her own story and recounting a real-life example. Leah explains the concept of generative design, which is the process of creating and sketching a lot of different ideas and then refining them. The slides are amazing because Leah drew them by hand. Duration: 32 minutes.

Experience Is the ProductPeter Merholz explains why it is important to focus not on technology or features but on the product and the experience you want to create. The session is rich in good and bad examples drawn from real life. Duration: 43 minutes.

Behavior Is Our MediumIn this fantastic session, Robert Fabricant talks about interaction design beyond computing technology. His examples include the family tree and one particularly interesting tree that his daughters drew. His examples from history, especially ancient history, are amazing and put interaction design in a broader context beyond the computer interfaces we’re so used to. Duration: 61 minutes.

Web Form DesignIf you think Web forms suck (because you have to fill them in every day), then you must see this video. This talk by Luke Wroblewsky at MIX 09 is based on years of experience in usability testing and study. Luke shows examples from the real world and addresses the major problems with Web form design today. You will see how some of the biggest websites have failed and what you can do to prevent such failures in your Web forms. Duration: 75 minutes.

User Experience Design for Non-DesignersIn this short mini-breakout session, Shawn Konopinsky explains what UX design is at a very abstract level. He shows three different types of user interfaces and how UX design applies to all three. He explains basic concepts such as concept ideation, interaction design and visual design and emphasizes the importance of an “Agile” approach to projects. Duration: 18 minutes.

The Importance of Identity and Vision to UX Designers on Agile ProjectsIf you watched the previous video, you will know why the Agile approach is important in UX design. This video and the slides go deeper into the Agile approach, relying on research done at London university. Johanna Kollmann explains the research and the results. Duration: 32 minutes.

Learning IxD from Everyday Objects“Inspiration surrounds us in everyday objects.” This is how Bill DeRouchey begins this brilliant talk about interaction design. We use icons, words or shapes to create a language of interactions. If we use the wrong language, the interaction becomes confusing, and this is what Bill shows, using many common objects and devices. One of the most interesting slides is the one that shows how users “hack the interface.” Duration: 45 minutes.

Two videos: Information and ArchitectureIn these two short videos, Mickey McManus explains related concepts: information and architecture, using everyday objects, such as cup of tea, to illustrate his argument. The videos are part of a short article in which Mickey draws these concepts together to explain what information architecture is. Duration: a few minutes.

Wireframes for the WickedNick Finck, along with Michael Angels and Donna Spencer, goes over wireframing basics via short easy questions. What are wireframes? Why use wireframes? What does the process of wireframing look like? The three of them also explain the different types of wireframes and show examples of their work. Duration: 1 hour 5 minutes.

Design Prototyping: Bringing Wireframes to LifeDan Harrelson explains the purpose of prototyping, why it is important and how it differs from wireframes and visual comps. With wireframing, instead of seeing how a concept functions or works, we see how it actually feels, which contributes to better usability testing. The video, like all videos from MIX 09, has “double view”: while looking at the large slides, you have a synchronized inset video of the speaker. Duration: 60 minutes.

Journey to the Center of DesignDoes user-centric design really exist? In this funny keynote, Jared Spool asks whether user-centric design (UCD) has lost its way and needs to evolve into something else. Ironically, as studies have shown, many great projects have succeeded without UCD. Jared suggests three key attributes of great experience design that can replace UCD. Duration: 1 hour 14 minutes.

User-Centered Design 101In this Web seminar, Frank Spiller demystifies the paradigm of UCD. He explains the difference between usability and UCD, which has confused many. From the perspective of the development process, he compares UCD to the Agile and Waterfall processes. At the end, he shows some UCD success stories. Duration: 58 minutes.

The Mint.com ExperienceAaron Forth of Mint.com speaks of the importance of aligning your user experience and business objectives. He goes over the challenges of delivering such a user experience at Mint, what the company did to attract brand interest and how Mint became one of the best personal-finance software tools today. Interesting fact: Mint discontinued IE6 support because it spent almost 20% of its time designing for the browser. Duration: 40 minutes.

Mobile User ExperiencesRachel Hinman start her talk about mobile user experiences with a provocative thought: that technology disengages us from real life. She says we should rethink our relationship to devices and use them in the context of concrete tasks. Duration: 24 minutes.

Tap Is the New Click“Several years ago, Minority Report was a sci-fi movie, and now we’re already there with [the touch wall].” At the beginning of his session, Dan Saffer shows a couple of examples of touch-screen technology that marks the beginning of a new era of interaction in which gesture and touch replace mouse clicks. He explains how to design for these technologies by going over how touch-screens differ from traditional websites and devices. Duration: 67 minutes.

10/GUIThis is a fantastic experiment that examines current mouse-driven user interfaces and their limitation while offering a completely new way of interaction. Although keyboard and mouse were really great innovations in past century, Clayton Miller think we shouldn’t stop there but rather innovate further. Duration: 8 minutes.

The Least You Can Do About UsabilitySteve Krug, known to many as the author of Don’t Make Me Think, here tries to convince people to do their own usability testing. Confirming Jacob Nielsen’s advice, that developers can do it themselves, Steve identifies the minimum requirements to make usability testing meaningful. At the end of the session, Steve performs a short usability test right in front of the audience, which makes this session truly outstanding. Duration: 60 minutes.

AJAX UsabilityKelly Norton talks about a very interesting, and often forgotten, subject: AJAX usability. He covers usability basics and how to design AJAX applications for humans. Full of real-life examples, he offers several concrete suggestions on how to improve usability in AJAX applications. Duration: 55 minutes.

Jason Fried of 37signals Speaking at Business of Software 2008In this short amazing session, Jason Fried shares his thoughts and experiences from 37Signals. Ideas are agile, some even radical. This video is interesting because many of Jason’s thoughts contrast with widespread opinion. In the second half of the session, Jason uses audience questions to explain his ideas in more detail. Duration: 55 minutes.

Bonus videosSketching User ExperiencesIn this keynote from MIX09, the first 25 minutes are taken up by Bill Buxton, known to many as the author of the book Sketching User Experiences. In an optimistic talk, he explains why now, in these days of crisis, is a good time to pay attention to design and what key factors are required to revitalize the user experience. Duration: 25 minutes.

Interview With Don Norman on UX Week 2008In a relaxed atmosphere at UX Week 2008, Don Norman answers interesting questions and share his thoughts on various aspects of design. One of the best bits comes at the beginning, when Don speaks of his “crusade” to replace the word “users” with “people.” Will we ever have “People Experience”? Do we already have it? Find the answer in this fantastic interview. Duration: 53 minutes.

(al)
© Janko Jovanovic for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: usability, user experience, ux 
]]></description>
<dc:subject>Design usability user_experience ux</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:6146daae3265/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:user_experience"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:ux"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit">
    <title>10 Usability Crimes You Really Shouldn’t Commit</title>
    <dc:date>2009-11-30T07:00:10+00:00</dc:date>
    <link>http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[Over time certain conventions and best practices have been developed to help improve the general usability of websites during their design and build. This roundup of ten usability crimes highlights some of the most common mistakes or overlooked areas in web design and provides an alternative solution to help enhance the usability of your website.



Crime 1: Form labels that aren’t associated to form input fields


Using the ‘for’ attribute allows the user to click the label to select the appropriate input fields within a form. This is especially important for checkboxes and radio fields to give a larger clickable area, but it’s good practice all round.

Crime 2: A logo that doesn’t link to the homepage


Linking the logo of a website to the homepage has become common practice and is now second nature for (most) web surfers to expect the logo to head back home. It’s also worth mentioning the logo should appear in the top left.

Crime 3: Not specifying a visited link state


Visited link states do exactly as they say on the tin. It’s not the most advanced CSS selector, but it’s one that is often overlooked. Give users a visual clue as to which link has already been clicked.

Crime 4: Not indicating an active form field


You can use the ‘:focus’ selector on lots of elements, but it’s super handy when used on inputs and textareas to indicate that the field is active. Add CSS styling such as a highlighted border, or a subtle change to the background color.

Crime 5: An image without an alt description


This is straying a little into the realm of accessibility, but it’s still an important consideration! Remember to always add a descriptive alt attribute to your images, unless of course they are used for decorative purposes, then the ALT attribute can be left empty (but should still exist!). When using an image as a link, enter a description of where the link goes.

Crime 6: A background image without a background color


It’s common to use background images behind passages of text, but it’s worth remembering that if background images are disabled by the user, there needs to be a similar tone in the form of a background colour to avoid the text becoming unreadable.

Crime 7: Using long boring passages of content


There’s nothing more off-putting than landing on a webpage that’s laid out as a continuous passage of text. Break up your content with images, headings and clear sections to make it easier to scan, read and digest.

Crime 8: Underlining stuff that isn’t a link


Everyone knows that text that’s underlined, or is a different colour is likely to be a link. Don’t go confusing people by throwing in underlined text elsewhere! To draw attention to a certain word, try using the strong or emphasize tags instead.

Crime 9: Telling people to click here


The words click here have been around since the dawn of the Internet, but have been shunned aside in favour of more usable options. Using the words click here requires the user to read the whole sentence to find out what’s going to happen. Instead, describe what’s going to happen in the actual anchor link text.

Crime 10: Using justified text


This is another tip that’s heading a little deeper into accessibility but is also an important point to consider. Justified text might look at neat and square to the eye, but it can generate some real readability problems, particularly for Dyslexic users who can find it troublesome to identify words due to the uneven spacing of justified paragraphs.

Similar Posts

10 HTML Tag Crimes You Really Shouldn’t Commit
15 Must Read Articles for CSS Beginners
How to Convert a Photoshop Mockup to XHTML/CSS
How to Build a Simple Button with CSS Image Sprites


   
]]></description>
<dc:subject>Articles accessibility coding css design html semantics standards techniques tips usability web_design xhtml</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:7c6ebb53b798/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Articles"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:coding"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:semantics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:standards"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:techniques"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:tips"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:web_design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:xhtml"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webdesignledger.com/tips/web-design-trends-for-2010">
    <title>Web Design Trends for 2010</title>
    <dc:date>2009-11-03T03:57:31+00:00</dc:date>
    <link>http://webdesignledger.com/tips/web-design-trends-for-2010</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[With a new year on the horizon, it’s time to pack away the old, worn web designs and prepare for the brave, new face of tomorrow. Although trends don’t start and stop on January 1st, there is a definite shift from what we craved at the beginning of the year to what we are seeking tutorials for at the end of the year. Most of the time, this shift is subtle. It’s a perfection or re-interpretation of a currently hot trend. Trends help us evolve as designers. As we master the skills of design aesthetic, we continue to push forward to what’s next or what needs to be fully discovered.

Make no mistake about it, you will recognize the ideas behind these trends. Although this list isn’t a drastic departure from what was popular in 2009, it marks different trends that will be expanded upon and made better as a result. As you think of how you will incorporate new trends into your designs, focus on the main idea of each trend. Be encouraged to dabble into these trends so that you become part of the movement.

1. Oversized Logos/ Headers
Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.

Main Idea: Huge headers that make your visitors remember you.

   

2. Sketch/ Hand-drawn Design
Hand-drawn design is not exactly new on the horizon, but we all know that it is still on the fringes of web design. Many designers admire the style but are afraid to create their own sketches because of the “I can’t really draw” attitude. If you look at the most popular hand-drawn websites (and relative to other types of trends, there are only a few), you will notice that most of your fellow designers can’t draw. These designs are not exactly headed to an art museum, but they do convey a sense of whimsy, and blur the line between cold web and personal interaction– the ultimate goal of the internet. If you can doodle, you can sketch for web design. 

Sketch in 2010 will become more elemental, and not as much the main focus of a web design. It will be used to personalize standard web copy in new and exciting ways.

Main Idea: Sketch becomes an elemental part of corporate design.

   

3. Slab Typefaces
Slab typefaces are relatively new, although they’ve been around for over 200 years in traditional media. To get a good visual definition of slab typefaces, think of the old Wild West “Wanted” posters. Those bold letters are slab typefaces. Slab typeface is commonly all capital letters and are bold and imposing. Many designers have shied away from slab typefaces in the past because logos and headers were smaller and more understated. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice. 

Main Idea: Slab typefaces is used to bravely express who you are.

   

4. Typography
Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. The idea of mixing varying font sizes together is completely unthinkable. Fonts are meant to be explored, twisted, and molded to fit your purposes. With the correct placement, a website that utilizes Typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos. 

Main Idea: Typography is young, but will continue to be a part of web design.

   

5. One Page Layouts
One pay layouts challenge you to edit away what’s unnecessary. In 2010, this trend will move away from the quirky navigation and become more minimal in its approach. Think of these websites as business cards. These websites will be more of a one-stop-shop for how to locate you and your work on various other sites– your blog and your social media hangouts. 

Main Idea: One page layouts will be more about personal profiles and less corporate.

   

6. Huge Images
A close relative to the oversized logo/ header, the huge image does much the same thing. It creates an visual impact that the visitor won’t soon forget. Unlike the oversized header from above, huge images are not part of the site’s branding. Instead, these images draw the visitor into your site, if not for their content then for their humongous size. In 2010, web designers will find themselves more comfortable using these big statements in their design to convey the site’s tone.

Main Idea: Huge images will be used to invite visitors in.

   

7. Change of Perspective
As we’ve discussed before, the desktop perspective has been done to death. 2010 will see a definite change in perspective to a more realistic view. There may also be a move toward side-shot aerial. 

Main Idea: 2010 will play around with different perspectives.

   
   

8. Interactive/ Intuitive Design
Flash has seen better days. There was a time when you couldn’t visit a website without running into an annoying Flash interface. These days Flash is a lot more relaxed and much more professional. Although some designers prefer jQuery for forms and popups, Flash still has its place in design, especially when done subtly. Flash still has no equal to its interactivity. In 2010, web designers will move toward the more redeeming elements of Flash. Because the average visitor is more web savvy these days, designers will also create sites that are slightly more intuitive than in the past. 

Main Idea: Interactive design will make a come-back.

   

9. Modal Boxes
Modal boxes are a trend that’s picking up steam and will be virtually everywhere in 2010. A modal box is like the popup’s more sophisticated older brother– it’s smooth, good looking and popular. Modal boxes are so easy to design and easy to use, making them the perfect solution for any designer concerned with usability.

Main Idea: Modal boxes will continue to pop up in 2010 designs.

   

10. Minimalism
Forget the old school minimal websites. Websites of 2010 will continue to feature lots of white space but with bold typology and surprising color schemes. Not all minimal websites will agree with the notion of black and white simplicity. Although minimalism is by nature muted, it will also showcase fresh colors. Minimalism isn’t cold, it’s warm and too the point.

Main Idea: Minimalism will venture into typology.

   

11. Oversized Footer
Oversized footers may be everywhere already, but 2010 will find them even more exaggerated. The footers of tomorrow will be less of an after-thought and more of an integral part of the design. Look for footers that feature contain random information, such as feed updates from various social media, daily polls, and Flickr feeds.

Main Idea: Oversized Footers will feature less important, but more personal information.

   
   

12. Retro
Retro designs are here to stay. Although a lot of the design community admires retro web design, it can be difficult to fully embrace this style without coming across “undone.” The key to retro designs is to be inspired by its tone and underlying playfulness. In 2010, retro design will be expanded as designers find new ways to honor vintage art.

Main Idea: Retro is new.

  

13. Intro Boxes
“Hi, my name is…” will find an even bigger stage in 2010 as designers recognize the beautiful simplicity of introducing yourself to your visitor. If you’re struggling with making a creative “About” page, the intro box will be your best bet. It forces you to condense who you are into a relatively small about of space. In 2010, intro boxes will push its own boundaries. Instead of the boring hello, designers will find new pick-up lines. And, instead of the left-flanked intro block, 2010 will see boxes in unusual placement, perhaps even in the middle of a page.

Main Idea: New ways to say “hello.”

   

14. Magazine Layouts
As more and more people migrate from the comforts of traditional press to online infotainment, designers are challenged to welcome them in with an easy transition. There is a move toward the magazine layout, where information is carefully organized on a single home page, giving the visitor an opportunity to explore as interested. The familiar layout will appeal to appeal to anyone who’s ever read a magazine or newspaper, but it will also be easier to use– no flipping pages! In 2010, magazine layout will become very huge for blogs in particular.

Main Idea: Magazine layouts will be used for infotainment sites.

   

About the Author
Jacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.
]]></description>
<dc:subject>Tips Inspiration usability</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:6ad3508a89f8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Tips"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Inspiration"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.kaushik.net/avinash/paris-hilton-kim-kardashian-telling-stories-data/">
    <title>Paris Hilton, Kim Kardashian &amp; Telling Stories With Data</title>
    <dc:date>2009-06-29T08:40:24+00:00</dc:date>
    <link>http://www.kaushik.net/avinash/paris-hilton-kim-kardashian-telling-stories-data/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[It is such a cliché: Don’t just present data, tell a story.
Yet it is rarely followed.
We almost always present data.
Actually we don’t present data, we send out reports. With data. Lots of it. With 6 size font and some pies and stacked bar graphs thrown in.
Then we are frustrated that no one seems to pat us on the back, sing songs in our glory, give us more money.
We don’t truly tell stories because it seems like a lot of work. And it can be. But you’ll be surprised at how often it is simply a matter of framing things differently, letting your imagination roam free.
Last month I had to present to a group of executives in New York. One of the key things I wanted to communicate was the power of not doing random advertising but rather using freely available data to target the advertising on sites where relevant audiences exist.
Goals Summary:
1. Show the power of free tools available. [Google's Ad Planner specifically.] 2. Highlight the importance spending money on advertising to relevant audiences. 3. Tell a memorable story.


Below is how I did it. . . . hopefully it will inspire you to look for stories in your data, stories that will hold interest and might even get you some smiles (and you know that a raise is not far behind!).
My first step was to try and tap into current events / pop culture. That calls for some research. I use Google Insights for Search as the best way to get a pulse on what people find interesting.
Specifically what I often do is run this query: Who are the most popular celebrities in New York in the last 30 days?

Turns out it is someone called Kim Kardashian. It also turns out I have no idea who this person is, an unfortunate side effect of not have time to watch television.
Quick Google search and I am caught up on why Ms. Kardashian is “famous”. She has some overlap with Paris Hilton in terms of the path to fame.
The key ingredient for any story is to have interesting protagonists. For this story due to their popularity it will be Ms. Hilton and Ms. Kardashian.
The plot: Your business has a need to market something related to Ms. Hilton and Ms. Kardashian, a perfume or a clothing line or a cd/dvd. Amongst other things you’ll want to make use of display advertising (banners / widgets etc).
How do you figure out who the right audience is, and where you’ll find them? As opposed to of course buying the main banner spot on www.yahoo.com were your ad might be a hit or a miss.
Tools for doing audience segmentation were quite expensive until recently. Google’s Ad Planner is free and makes this valuable data democratic. You can segment by demographic (age, education, income, gender etc) and psychographic (Extreme Sports Fan, Film Buffs, Fantasy/Comic Book Readers etc) data.
Perhaps its most cool feature is the marriage between all the above data with Google’s search data.
That’s where the analysis starts.
Question: What are the websites that are visited by people who have searched for the keywords “paris hilton” and “kim kardashian”?
Here’s the answer:

[Click on the image for a higher resolution version.]
Notice the I have typed the keywords on the bottom left. In the right frame are the sites that are visited by those who searched for those two terms. Some obvious sites, many surprises (good thing, now we know!).
I have a habit of sorting by Comp Index, just to check out concentration of the audience. For example a comp index of 990 means that you are approximately nine time as likely to find the same audience (paris, kim searchers) on wallpaperbase.com.
If you look at the higher resolution version (click on the image) you’ll easily find out how many page views are on the target site, what kind of advertising they accept, ad impressions/day and other data you need to create a media plan.
So far so good.
I have always believed that Men are more interested in the kinds of stories and “entertainment” value that Ms. Hilton and Ms. Kardashian generate.
The nice thing is I can validate that hypothesis. I simply open the Gender option in the left panel and choose Male.

You are looking at the top part of the segmentation panel. Notice the delta between UV (users) between the overall segment and just the Males.
Turns out I was not totally right. Males make up a bit less than half of the audience.
No worries. They are still a lot bigger than what many people think (and it is wrong to think it is overwhelmingly female).
My next believe, perhaps controversial, is that older males are more interested in Ms. Hilton and Ms. Kardashian than younger males. Now this seems odd because Ms. Hilton and Ms. Kardashian seem to be more cool and hip and more of a young generation cup of tea.
Well we can test my hypothesis, in addition to Gender I can also choose Age. . .

This data is still just for people, in this case Males, who searched for the key words paris hilton and kim kardashian.
It might have been a odd thing to say but it seems that 45 and older males are a lot more interested in Ms. Hilton and Ms. Kardashian. By almost two to one.
Surprised?
: )
Let’s prep for the punch line of this story.
I have identified a audience that is of value to my goal, marketing Ms. Hilton and Ms. Kardashian (or things connected to them).
I want to target the top end of this audience, Males 55 and older, how many of them are there and where can I find them (to ensure my advertising will be relevant for this audience and my ad dollars are spent wisely)?
Here you go. . .

[Please click on the image for a higher resolution version.]
How about now… surprised?
I was.
The top sites listed for this audience (older Males interested in Ms. Hilton and Ms. Kardashian) turns out to be bedrock sites, typically, for Republicans and the Conservative movement! Starting with a Comp Index of 1700 for impactguns.com. Other sites: weeklystandard.com, rushlimbaugh.com, nationalreview.com, worldnetdaily.com, and townhall.com.
Not in my wildest dreams would have I have expected that this audience would be so highly correlated with actual searches done for Ms. Hilton and Ms. Kardashian. It seems odd with the conservative moral values espoused.
Very Important: I am not judging them. To each unto his / her own.
For my marketing campaign one more valuable nugget of insight is in th above data (click above for higher resolution). Turns out they are also very rich. Note the prominent appearance of morningstar.com, pgatour.com, seekingalpha.com and ft.com.
So a bumper crop: right audience, lots of money to spend. That’s hot!
Now I have to go execute the campaign and I know where to target my ads, how many impressions/day I can expect and how many people I can hope to target.
 Relevant audiences change with seasons, hot trends, shifting preferences. Repeat the analysis to ensure you have the most current data.
End of story.
Closing Thoughts:
Turns out this was a very effective story to tell, most people in the room were media buyers (especially offline).
They were impressed with the kind of data we have online, and how easily accessible it was.
They will never forget how wrong one can be about who the relevant audience might be (it would be impossible to guess the Weekly Standard, Rush Limbaugh audience might have any interest in Ms. Hilton or Ms. Kardashian).
Data Wins.
Ok its your turn now.
When you present data how do you tell your stories? How easy or hard is it? Got a favorite story to share with us?
What did you think of the above story? Methodology or conclusions? What did you link? What did I miss?
I would love to hear from you. Thanks much.
PS: Couple other related posts you might find interesting:
Make Your Web Analysis / Reports “Connectable”Competitive Intelligence Analysis: Google Ad PlannerCompetitive Intelligence Analysis: Google Insights for SearchParis Hilton, Kim Kardashian & Telling Stories With Data is a post from: Occam's Razor by Avinash Kaushik
 
    
]]></description>
<dc:subject>Advanced_Analytics Analytics Marketing_Tips Search_Engine_Marketing Usability Web_Analytics Web_Insights Web_Metrics competitive_intelligence audience_segmentation display_advertising Google_Ad_Planner google_insights_for_search kim_kardashian online_marketing_analysis paris_hilton</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:3c55ff1f03f3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Advanced_Analytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Analytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Marketing_Tips"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Search_Engine_Marketing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Usability"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Web_Analytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Web_Insights"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Web_Metrics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:competitive_intelligence"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:audience_segmentation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:display_advertising"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Google_Ad_Planner"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:google_insights_for_search"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:kim_kardashian"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:online_marketing_analysis"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:paris_hilton"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/">
    <title>Useful Glossaries For Web Designers and Developers</title>
    <dc:date>2009-05-29T14:52:11+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[
Advertisement 
In a day in age where there are just as many freelancers as there are university educated designers, developers, and all around web gurus, it is amazing to me how much many of us don’t know or have forgot about our trade.  As a self-taught designer, I will admit to you upfront that there is a lot I don’t know when it comes to official jargon or certain aspects of things like typography and graphic design.  It is these reasons that I call upon glossaries from time to time.

These glossaries are also especially useful for those of you who are just getting started in the online business world.  By understanding that basics of the core materials that make up whatever it is you are getting into, you will be able to have a better understanding of what’s going on in your industry, as well as be able to learn faster.

But glossaries aren’t just for brushing up on old terms or for calling upon while you learn new things.  They can also make a great reference point for your customers. I am sure we have all had clients who thought they knew what they were talking about when it came to SEO or web design.  When you try to explain to these clients that they don’t know what they are talking about, the end result can sometimes turn ugly or at least bring on an unwanted headache. In these situations it is handy to have a glossary at hand to point your clients to. This way they can see that they were mistaken and you get the satisfaction of your own personal “I told you so.”

Last week we presented Web Design Industry Jargon: Glossary and Resources, a general guide to industry terms that should get you well on your way to understanding what web designers are talking about. In this post we go into detail in each single area of web design such as typography, usability, marketing, Photoshop, wordpress, graphic design, CSS, XHTML, DOM, JavaScript, print design, SEO, social media, software development, Twitter and further areas.

Typography Glossaries
You would be surprised how many designers, especially graphic designers, out there don’t know even the most basic of typography terms.  I am guilty of this myself.  I could probably count the number of typography terms that I know on two hands.  I couldn’t tell you what makes one font better than the other aside from the way it looks.  If you find yourself in this boat and want to learn more about the basics of typography, these glossaries are a good place to start.




Fontshop Typeface Glossary
Typenow Glossary
Large Typography Glossary
Adobe Typography Glossary
Thinking With Type Glossary
The Web Designer’s Typographic Glossary
A disagreeably facetioustype glossary
A Typographic Glossary
Type Terminology
Font Menu Type Glossary
Typography Glossary

Usability, UX and IA Glossaries
Do yourself a favor and start learning as much as you can about usability and design.  You would be surprised how much of a difference a user-friendly landing page can make.  Simple things like button shapes, call to action wording, and colors can play a big part in how users interact with your design.  Understanding the basics of usability can help you create better designs.  Start by learning the basic terms in these glossaries.




Usability Terms
The Complete List of Usability Terms
Glossary of Usability Terms
Universal Usability Glossary
30 Usability Issues To Be Aware Of
An Evolving Glossary of Experience Design
Interaction Design UX Glossary
Information Architecture Glossary
The Information Architecture Glossary (PDF)

Marketing Glossaries
Following closely on the heals of good usability is understanding marketing.  I wouldn’t go so far as to say they are one in the same, but they are definitely closely related.  Better understanding how marketing works can do loads for your business and your clients business.  Start educating your self by studying up on some of the more basic marketing terms.  Or if you are already pretty market savvy, but want to brush up, there are a number of more “advanced” glossaries below as well.




The Fundaments Of Web Analytics
Marketing Glossary and Terms
Professional Marketing Glossary
Business Marketing Terms
Viral Marketing Glossary
Brand Glossary
Branding Glossary
Advertising Glossary
Glossary of interactive advertising terms (pdf)
Google AdWords Glossary
Google AdSense Glossary
Marketing Glossary

CSS, (X)HTML, DOM and JavaScript Glossaries
As designers and coders, we often need to look up the definition and the applying rules for an attribute, selector, tree node, a property or a HTML-tag. Therefore lookup-references may come in handy. Good news – there are many reference resources out there. Below you’ll find some really good ones.




Sitepoint CSS Glossary
Codestyle CSS Glossary
CSS Properties (HTMLDog)
CSS Properties (Sitepoint)
CSS Selectors
CSS @-Rules
CSS Concepts
The complete CSS guide (Westciv)
CSS References at W3C School
HTML 4 Elements (WDG, HTMLHelp)
HTML Tags
HTML Elements
HTML Common Attributes
HTML Concepts
Full HTML Reference
JavaScript DOM Core
Full JavaScript Reference
Full jQuery Reference
Visual jQuery Reference
XML Glossary

Graphic Design Glossaries
Perhaps it is because many designers are self taught that they only have a limited understanding of professional graphic design terms.  Sure, we all know what cropping and justifying are, but there are so many other terms out there that many of us don’t know.  While we can probably get away with never knowing them, it can’t hurt to learn.  This is especially true for new designers.  Why not go ahead and learn these terms early on while you are still in the learning process?




Graphic Design Glossary, Terms and Definitions
Glossary of graphic design and web page design terms
Color Glossary
Graphic Design Glossary
Graphic Design Glossary
Graphics Glossary
Logo Design Famous Brands Glossary

Print Design Glossaries
The transition from print design, with its absolute positioning, fixed layouts and grid-structure to more dynamic and flexible web design isn’t an easy task. Therefore if your colleague is just doing the switch from print design to web design, you may need to be able to communicate with him in “his” or “her” language. Therefore general terms from print design may come in handy as well. Do you know what “4 over K”, “semi-gloss finish” or “column rule” mean? OK, let’s dive into the classic print design terms.




Newspaper Design Glossary
Glossary Of Common Print Design Terms
Print design glossary
Design and Print Glossary
The Glossary Of Printing Terms
Glossary of Printing and Graphic Terms

Web Design Glossaries
I would think that many professional and full time designers and developers already know just about every term in these web design glossaries.  However, I know that when first venturing into web design, many of the terms associated with the industry can be a bit foreign.  Thus, I decided to add this collection of web design glossaries to the list for those who are getting into web design and developing and could use a little extra help figuring out what everything means.




The Motive Web Design Glossary
Web Design Industry Jargon: Glossary and Resources
Huge Web Design Glossary
Sitepoint Web Design Glossary
Web Design Glossary
Web Design Glossary
Web Design Group Glossary of Terms
Photoshop Glossary
Complete Glossary of Photoshop Terms and Definitions

SEO Glossaries
Try to do some search engine optimization for your website or your clients?  Knowing what you are talking about is always a good idea, for both you and your client.  So often clients want some search engine optimization done, but really have no clue what they are asking for or what you are saying.  Referring them to some of the search engine optimization glossaries below can do wonders to save you and your client a world of headaches when it comes to SEO work.




SEO Glossary
SEO Glossary for 0 to Z
A Complete Glossary of Essential SEO Jargon
Search Engine Optimization (SEO) Glossary of Terms
The SEO Book Glossary
SEO Glossary
Search Engine Optimization Glossary

Social Media
Because it seems like something new is always popping up on the social media scene, it is only natural that there may be terms we aren’t familiar with from time to time. This is especially true for those who are just venturing into online business and social media for the first time. This also goes back to the comments I made about SEO terms. You can save you and your clients some frustrations by making sure you are both on the same page by understanding what each other is talking about.  Using these glossaries to explain yourself better to a client will work wonders in keeping you two on the same page.




A-Z of Social Media
Glossary of Blogging and Social Media Terms
The Bloggers’ Glossary
Social Media Glossary
25 Social Media Buzzwords Explained 
Giant Bloggin Terms Glossary

Twitter Glossaries
You had to know this list of glossaries was coming!  With so much going on in the world today about Twitter, it is only natural that new Twitter users are popping up every day.  When one first gets into Twitter the list of associated terminology can be very much like foreign language.  For outsiders looking in, I think that is very much the case.  I think my local news station needs to read up on these, as every time they talk about Twitter they look deeply confused about the words that are coming out of their mouth.




Twittonary - The Twitter Dictionary
My Twittonary: Every Twitter Term and Tool I Can Find
Twitterspeak: 66 Twitter Terms
Twitter Glossary
How to Speak Twitter
Twitter Glossary: Twitter Lingo Explained For The Utterly Confused

CMS Glossaries
Wordpress, Joomla, Textpattern and other CMS have a lot of its own and unique terms, tags and definitions.  Because many people who run blogs don’t know the first things about servers, PHP, or even Wordpress for that matter; it can be a bit intimidating.  But, as many CMS users know, there isn’t much to it once you know how everything works. The glossaries below can help both developers and new users to WordPress, Joomla and TextPattern.




Wordpress Codex Glossary
Joomla 1.5 Glossary
Textpattern Tag Glossary

Software Development
While most web designers do both front-end and back-end-development in their regular work, it may be helpful to have a good understanding not only of front-end (covered above), but also of common software development. A glossary with terms used in agile development, software engineering, prototyping and general software development. Apart from that you may want to understand what your colleagues-coders in Python, Ruby on Rails or Java talk about when throwing around fancy programming terms, right?




Python Glossary
Java Glossary
Ruby on Rails Brief Glossary
Software Testing Glossary
Software Engineering Glossary (pdf)
An Abbreviated Software Engineering Glossary
Software Development Glossary
Agile Development Glossary
Rapid prototyping glossary

Something is missing?
We definitely missed some useful glossaries in this list. Please help us make this list as universal and useful as possible. Please share useful resources with us in the comments to this post! All comments will be considered and useful resources will be added to the post. Thank you.





© Daved Brosche for Smashing Magazine, 2009. |
Permalink | 
60 comments | 
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine


Post tags: glossaries, glossary, marketing, photoshop, seo, typography, usability

]]></description>
<dc:subject>Developer's_Toolbox glossaries glossary marketing photoshop seo typography usability</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:900622ec2d7d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:Developer's_Toolbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:glossaries"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:glossary"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:marketing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:photoshop"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:seo"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2009/05/28/12-tips-for-designing-an-excellent-checkout-process/">
    <title>12 Tips For Designing an Excellent Checkout Process</title>
    <dc:date>2009-05-28T14:41:53+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2009/05/28/12-tips-for-designing-an-excellent-checkout-process/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[
Advertisement 
Shopping online can be a great experience. You don’t have to leave the comfort of your home and you can quickly compare and read about all the competing products in order to pick the best one for you. But it can also be a little frustrating if the process isn’t designed correctly.

Looking around for that checkout link, having to fill out registration forms and then being told the product is out of stock isn’t going to make your day. Spend a little bit of time fine tuning your checkout process and polishing off the user experience and you’ll be rewarded with happier customers and more sales. Here are 12 useful tips to help you do just that.

You may be interested in the following related posts:


Shopping Carts: Examples And Best Practices
Design To Sell: 8 Useful Tips To Help Your Website Convert
7 More Useful Tips To Help Your Site Convert
Optimizing Conversion Rates: Less Effort, More Customers

1. Don’t require registration to shop
Your customers are here to shop, not fill out forms. Make sure that the registration is done during the checkout process and not before — and certainly not before a visitor places goods into their shopping basket. Sign-up forms are barriers because they take effort and time to fill in. 

Target requires an account, but it’s only prompted after you’re ready to check out.

By moving these barriers further down the line you increase the chance of your visitors becoming paying customers. This is because they’ve already spent time shopping so they’re less likely to stop now and waste that initial involvement. If that barrier is placed right at the beginning however, they might just walk away. Think of it as holding the door to your store open for your customers to come in.

2. Inform customers if the item is available
Be clear about the availability of the items and inform your customers about the stock levels. If an item isn’t available, don’t take your potential customer through several steps just for them to discover that they can’t actually buy it right away. Don’t just display stock levels on product pages either, show them right on the search results page.

Overclockers provides detailed stock information right from the product listing pages.

Additionally, if an item is out of stock right but will be available at a later date, offer a pre-order option so those people who aren’t worried about getting it right away can still make the purchase.

3. Allow your customers to easily modify the order
Everyone makes mistakes. People put the wrong goods into their shopping basket or change their mind. Make sure you don’t frustrate your potential customers during the checkout process by making things easy to modify. 

IconDock makes sure to provide simple controls to change the quantity of an item or remove it.

If someone wants to remove an item or items from their cart, don’t force them to enter the zero amount; instead, provide a “remove” link that will delete a product from the cart and ensure order modification is quick and easy.

4. Provide users with real-time-support
Since the checkout process requires user’s input, it is very likely to assume that many users might experience problems – caused by any misunderstandings or some particular needs or interests that can not be easily defined using the available web-interface. In these situations it may be crucial to provide users with professional, personal assistance instead of sending them to large help- or FAQ-pages that may not have the solution to user’s problem. And, of course, if users don’t get the help they need and have doubts about the whole thing, they are very likely to cancel the checkout process.

The Dell Store provides its users with telephone- and chat-assistants. If a user has problems during the checkout process, she can immediately require assistance and get support in a couple of minutes. That’s user-friendly, helpful and may increase your conversion rates.

Therefore it’s a good idea to add a chat- or telephone-assistance for the checkout process. Not every company can afford it, but middle and larger companies may want to consider this option, particularly if the checkout process is more involved.

5. Keep the ‘Back’ button fully functional
The back button is one of the most used buttons in a web browser, so you can be sure some people are going to employ it during the checkout process on your site. Some sites disable the functionality of the Back button through automatic redirects or error messages, which is sure to negatively effect the visitor’s experience.

Ticketmaster gets confused when you try to go back.

Not only should the back button lead to the previous page without encountering any errors, you should also save the user’s data so that it is displayed again if it’s a form. This allows people to make adjustments and carry on without having to re-fill the whole form. Yes, sometimes it’s too late to go back, like after clicking that last ‘Complete order’ button, but by ensuring that all the other pages get along with the Back button you can deliver a better user experience to your customers by saving them time and frustration.

6. Provide photos, specifications and links for the items in the basket
Your customers will need to review their basket before clicking that final button that will complete their order to ensure they’ve actually got what they came here for. Item titles alone aren’t the best method for helping your visitors to quickly scan over the basket, so make sure to add pictures and product specifications — e.g. size, color, hardback or paperback. 

Amazon specifies colors and details, e.g. paperback/hardback, links back to the product but fails to provide thumbnail images.

Oxfam shows thumbnail images of each product for easier scanning.

Additionally, you should link these items to their product pages just in case the customer wants to verify that it is indeed the right item. 

7. Provide a progress indicator
Checking out is usually a multi-step process. This means the customer will have to navigate several pages before the order is complete. To make this process usable be sure to add a progress indicator that says exactly at what stage of the checkout process the customer is right now and how long there is left to go — i.e. list all the steps.

Apple shows an elegant progress indicator on their checkout pages.

Knowing where you are in the topography of the site or process will give your users a sense of control, which is important from a usability perspective. Also, knowing what stages are yet to come will eliminate any confusion — i.e. they will know when they get to the last step. This will makes it easier to click through as you know you can still modify or cancel the order at any of the stages before that.

8. Keep the checkout interface simple
The checkout process is different to the rest of the browsing experience on your site. During this process your customers aren’t shopping — they’re making the purchase. This means all the browsing controls are redundant here and would only distract your customers from the task at hand. Eliminate these unnecessary elements — e.g. product category links, top products, latest offers, and so on — to keep the interface simple. 

Dell’s checkout pages lose the product navigation and focus solely on the checkout process.

Provide a “return to shopping” link in case the customer wants to go back and buy something else. Additionally, ensure all the buttons that point to the next step in the process are large and prominent so they’re not missed.

9. Don’t take the user out of the checkout process
It’s essential that the checkout process isn’t disrupted, for example, but taking the customer to a different page. Taking the user out of the process can cause two problems: 1) they might get confused about where they are and even lose the checkout page by closing the tab or window. 2) they may get distracted and fail to complete the process.

Laskys show help tips when hovering over certain elements to clarify their function.

To remedy this, we really need to find a way to show all of the necessary information on the checkout pages themselves. If you need to provide some help or information that doesn’t fit on the current page, use floating windows or, as a last resort, a pop-up window to display this. This allows you to present new material to the user without taking them out of the checkout process.

10. Inform the users about delivery times
Shopping online has one big disadvantage to shopping in your standard ‘brick and mortar’ store: you have to wait to get your stuff. To address this be sure to tell your customers when they can expect to receive their products.

The Apple Store adjusts shipping estimates with AJAX as you customize your order.

This is essential for a couple of reasons. Firstly, your customers may need to make sure there is somebody at home to receive the delivery; and secondly, you’ll set an expectation so they won’t need to keep guessing. Make sure these dates are shown as early as possible, preferably on the product pages themselves, so that your potential customers can judge whether or not they’ll get the item fast enough for their needs.

11. Tell the customers what happens next
Okay, your customers have completed the order and clicked that last button — so what happens next? Finalize the order with a “Thank you” note. This is just being polite and your customers are sure to appreciate the kind words.

Amazon thanks you for placing your order and informs you about next actions.

Also, make sure to tell your customers what will happen next — i.e. a message informing them that they’ll receive a confirmation email when the goods are shipped. This will clear up any uncertainties about their order and set the right expectations.

12. Send out a confirmation email
Your customer may have checked out and placed their order, but the process isn’t yet complete. Send out a confirmation email with the details of their order and a delivery estimate. The order details will be helpful as they’ll allow your customers to verify that they’ve ordered the right things. 

Amazon sends you an email after you’ve checked out to confirm the details and also explain how you can modify it before it’s shipped.

If there’s a mistake, they should be able to log back in and modify their order before it has been shipped. Simple mistakes like choosing the wrong size or color will happen, so make the shopping experience easy and supportive for your customers.

Checkout pages gallery
Shopcomposition uses an elegant and minimalist checkout design.

Inkd’s checkout pages are clean and simple.

The beautiful checkout page at Atebits.

Threadless makes everything clear by providing plenty of information.

Swarovski clearly shows what stage of the process you’re at with a large progress bar at the top.

Openmoko’s simple 2 page checkout.

Sofa’s one page checkout.

Panic’s beautiful single page checkout page for their Coda editor.

To Conclude…
Building a good checkout experience is about several things. It’s about eliminating distractions to help the user focus at the task at hand. It’s about providing all the necessary information and help so that the customer understands all the stages of the process. Most important, it’s about making it easy, because after all, the quicker a customer can check out, the happier they will be and the quicker you’ll close the sale.

Related posts
You may be interested in the following related posts:


Shopping Carts: Examples And Best Practices
Design To Sell: 8 Useful Tips To Help Your Website Convert
7 More Useful Tips To Help Your Site Convert
Optimizing Conversion Rates: Less Effort, More Customers
The Conversion Is All About Usability
Use Conversions To Generate More Conversions

About the author
Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.





© Dmitry Fadeyev for Smashing Magazine, 2009. |
Permalink | 
64 comments | 
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine


Post tags: checkout, design, usability

]]></description>
<dc:subject>How-To checkout design usability</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:32e64c602e1f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:How-To"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:checkout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/">
    <title>Optimizing Conversion Rates: It’s All About Usability</title>
    <dc:date>2009-05-15T16:20:38+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/</link>
    <dc:creator>pesh2000</dc:creator><description><![CDATA[
Advertisement 
In eCommerce usability improvements usually have a huge impact on conversion rates. However, usability doesn’t only mean better visual guide or better site hierarchy. It also means a better communication with potential customers using a professional, trustworthy design, delivering the right information at the right time and communicating with users instead of throwing ad-slogans at them.

In this article you’ll learn what to consider when preparing a perfect landing page for your product, how to focus user’s attention on the most important parts of your sites and also how you can use videos and user ratings to improve your conversion rates.

Professional Design Builds Trust
The most important rule for website usability is to keep it simple. Make your links speak for themselves. Make the structure of  your website predictable. Provide clear and visible feedback. Comfort your visitors and make it hard for them to do serious mistakes.

However, while these (quite obvious) guidelines may help your readers to get a solid understanding of how your site works, they will not necessarily lead to more sales. Besides, you may have some goals that conflict with this paradigm of  simplicity, the most important of which are probably up-selling and cross-selling.

Build Trust and Credibility
When it comes to building customer’s trust in your company, a professional, trustworthy design becomes crucial. In the Web, people are very likely to mistrust online-business, so you better make sure that you appear credible and serious. Inkd.com does just that with a professional look, a solid grid-based layout and following classic usability conventions.

Inkd.com

For everything you do on your website, keep in mind that the user always has  to be in control of what’s happening. This holds true for expert users, who will use your internal search to quickly access products they are interested in. They may want to be able to filter search results in a  certain way. And it holds equally true for the users-newbies, who wants to see proof of the teasers on your home page and  will likely use your primary menu to navigate.

When a user is attracted to the advertising campaign of a product, you have no  alternative but to lead that user directly to the product page itself. The next  click after that should lead the user directly to the purchase page. By the way, why  should you use a shopping cart in this case, if the user wants to  buy only one product? The cart becomes totally useless and creates more steps in  the sales process. With each additional step, the risk of cart abandonment increases.

The rule of thumbs: if a user finds a product through your internal search engine, he or she shouldn’t have to click more than twice to find essential information about  the product.

Deliver the right information at the right time
Speaking of good information, another important rule for leaving users in  control is delivering the right information at the right time, whether the information is related to the product, shipping, credit card security risks, privacy or what have you. Because of the large amount of information you  can deliver to the user, you need to sort it by priority.

Delivering the right information at the right time is important. Scribbles: before users type in any data, the site informs them about payment methods, privacy and purchase opportunities for educational purposes. However, both privacy data and the “education”-link could be given more visual weight on the page.

The user will have certain questions at each stage  of the shopping process; focus on the answers to these  questions, and make them the most prominent on the page at that time. Additional useful information can be “hidden” behind a hyperlink (as the “education” link in the Scribble-example above).

Don’t advertise, lead the users
Be careful about using graphic elements to prioritize information; don’t make them  look like advertisements. People tend to overlook page elements that  look like ads. Of course, you can illustrate the advantages of  your products with big pictures — really big pictures. Jakob Nielsen even recommends using full-screen-sized views:  “If I click on a product image on a product page, I am certainly  asking for a bigger version of that image. And as I intentionally  clicked, I’m able to wait for the really great picture. I’m not  only able to but I even expect to wait for some loading delay.”

The paradigm of simplicity means that store designers have to be very  careful experimenting with new techniques such as AJAX and rich Internet applications based on Flash. If you use these, you will  have to run usability tests. New studies  show that many people are still unfamiliar with functions like  dragging and dropping and do not know what words like “tagging”  mean.

Newsberry

Newsberry uses a beautiful layout with attracitve design elements. However, it fails to attract readers to sign up for the service immediately – users need time to find the obscure, modest “sign up”-button. How much time do you need to find it? Probably making the button stand out would work better in this case.

Be careful about using visual elements to prioritize information; don’t make them look like advertisements. Good example: Five Simple Steps

Mark Boulton’s Five Simple Steps does a good job of focusing users’ attention to purchasing options while not making them look like advertisements. Clear visual design and layout reinforce the sales funnel effect.

Getting  back to the questions that customers pose, one of  their big questions on landing pages is, “What next?” Take a look around the Web.  You’ll find tons of stores that hide their order buttons or label  them with ambiguous terms. For example, the German store Werbemittelguide includes the terms “Order or ask for an offer”  on a single button. While distinguishing between direct orders  and solicited offers gives users more control, placing these two different ideas on one button is confusing. In this particular case, clicking on the button does nothing other than put the  product in your cart. And the cart is positioned in the bottom-left corner: a  clear violation of user expectations.

Highight What’s Important And Use Proper Wording
Go to the website www.guut.de, look for a second and then close your eyes. Open them again for a second and then close again.  What did you notice? The big product picture on the left? The countdown? The huge orange order button? The label on the button says “Order  now” — a couple of years ago, a lot of Web designers would have regarded that as outrageous, outdated design. Today, it’s state of the art.

“Tell  people clearly what they should do next,” says US e-commerce expert Peter Blackshaw. What works with online shopping also holds true for  online communication, downloading a PDF brochure or any other  form of conversion. Make the most important option the biggest. Links  to “More information,” “Details” and “Technical data” are  also important, but less important than the conversion itself. They  should be displayed in a smaller font or in less aggressive colors.

The  US agency MarketingExperiments learned first-hand how strongly wording can influence conversion rates. It tested its own campaign, which aims to convert readers to paid subscribers. Every single element of  the email campaign was tested. The button that triggered  conversions was labeled “Continue here,” which at first glance  would seem to work perfectly. The outcome of the test surprised even  experienced experts. A new button labeled “Continue to article”  converted 3.3% better than the first; and a third version, labeled “Click to  continue,” convinced almost 10% more users.

After inserting an Amazon-style order button, Al Carlton doubled  sales on his website.

Video Is Often A Silver Bullet
It is becoming common sense for product descriptions  and product pages to include videos that show the products in action. In Germany, almost 60% of all  retailers surveyed by the BVDW indicated that they  planned to increase their efforts with video.

The bike  retailer Fahrrad.de invited sales agents from all brands to its new studio, which was built solely for producing videos for its website.  The sales agents were advised to explain why their products were  better than others. And most brands sent not only sales people  but also cross-country world champions to stand in front of the  camera. Some retailers might argue that their products are not suited to online video. By now, though, we can quickly find many products that are being advertised with online videos.

Both Getbackboard.com…

…and GoodBarry.com use prominent video blocks on their start pages. Videos are often used to quickly explain what the product is all about and what advantages it can bring to the customers.

What  is very important to understand is that the videos don’t have to  be full-throttle studio productions with enormous budgets. In many  cases a hand-made personal video will do. It may even perform better than a traditional advertising video because it’s more  honest. Websites that push new concepts, like eBags.com, try to build community  websites around their product videos, and users can vote on which video  they like best.

A  very nice idea was used by Pleo, a company that sells a kind of  robot pet that looks like a dinosaur. Pleo hit the sidewalks in certain cities, put the dinosaurs on the ground and shot people’s reactions. You could hardly advertise with more authenticity.

And  don’t let anyone fool you, there is only one format for online video  these days: Flash. Only Flash allows video to be seamlessly embedded onto a Web page and integrated with other elements on the  page. Because of YouTube’s success, most users are able to play back  Flash video. And producing video is really not expensive, even if it is farmed out to an agency.

Don’t Underestimate The Importance Of User Ratings And Customers Reviews
This may be one of the most important topics of all these days. In tourism, about 60% of all travellers base their decisions on online  research. They visit ratings websites to find the best destinations and hotels, free from the marketing overtures of the companies themselves. Similar websites can be found in  the electronics and other industries.

This  leads us to two questions:


Should store owners build their own ratings system?
How  should one deal with criticism?

The first answer is pretty simple. In  most cases the answer is, “No.” And there are a lot of reasons for that.  The most important reason is that no retailer is trustworthy in this way. People would  know that commercial interests are behind any  recommendation; the cost and effort to maintain such systems are  immense; and only the biggest websites attract enough users to build a  valuable rating system. If a website owner decides to build his own  system, he must provide the ratings right in the spot where users expect it: beside the products.

Take Thomas Cook Travel an example. After a lot of research, it built its own user ratings system, which is now one major filter in its internal search. An external system like Idealo.de (or PriceGrabber.com) might be a better alternative. Idealo gathers ratings from a  lot of platforms and aggregates them with tests and reviews from  websites and magazines. The plattform itself is neutral because individual  retailers cannot influence the content.

PriceGrabber.com

The second question is also easily answered,  but the consequences are significant. When criticism comes its way,  a company would do well to leave it on its system, as long as it isn’t obscene and doesn’t violate laws. This is what experts recommend. It is a very sensitive issue  for retailers, their suppliers, the  producers and brands, all of whom are trying to cooperate for mutual benefit. If you face this kind of criticism, forward it to the relevant partner and allow them to respond.

Stay Tuned
This article is the second first part of our 3-part-series “Optimizing Conversion Rates”. The third part will be published next week, and the last part will be published the week after that.


Optimizing Conversion Rates: Less Effort, More Customers
The Conversion Is All About Usability
Use Conversions To Generate More Conversions

Hence, you may want to subscribe to our RSS-feed  and follow us on Twitter . Any ideas or suggestions? Comment on this article!





© Frank Puscher for Smashing Magazine, 2009. |
Permalink | 
47 comments | 
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine


Post tags: conversion, e-commerce, optimization, rates, usability

]]></description>
<dc:subject>How-To conversion e-commerce optimization rates usability</dc:subject>
<dc:identifier>https://pinboard.in/u:pesh2000/b:d6511215fcba/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:How-To"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:conversion"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:e-commerce"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:optimization"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:rates"/>
	<rdf:li rdf:resource="https://pinboard.in/u:pesh2000/t:usability"/>
</rdf:Bag></taxo:topics>
</item>
</rdf:RDF>