Email Preview

www.Litmus.com
Email preview with different browsers and devices.

Maintenance!

Who wants to learn about your maintenance?

Accessibility Evaluation Tool

http://wave.webaim.org

Skyfire - Flash to HTML5

Skyfire converts flash video to HTML5, so now flash videos can be viewed on iPhone and iPad
www.skyfire.com

Browser Keys

Cr-48 Chrome Notebook has browser keys on key board.

Floor Planner

http://www.floorplanner.com/projects/new

It is a very simple and useful tool for floor planning. Also it’s a very good example of ‘pallet – canvas’ RIA screen layout.

UI Patterns

http://ui-patterns.com/

Umpqua Bank

www.umpquabank.com

Baker Tweet

BakerTweet from POKE on Vimeo.

www.bakertweet.com
http://twitter.com/albionsoven

Augmented Reality

GE Smart Grid Augmented Reality

On 3 and 4 September I attended Design Yatra event at Mumbai there I got to know about 'GE smart grid augmented reality' it is really a very beautiful concept. Please check following link to know more.

http://ge.ecomagination.com/smartgrid/#/augmented_reality

Print: http://ge.ecomagination.com/smartgrid/ar/printme.pdf

ATM from IDEO

http://futureselfservicebanking.com

Neuromarketing

Neuromarketing: science of human decisions

Human is not a thinking machine that feels, human is a feeling machine that thinks, once in a while. We are make emotional decisions then we rationalize them, there is nothing called rational decision. Emotional are not optional, emotions are basic fuel that our brain need for all decisions.
Decision is a three step process.

Step1: All the thinking is done by ‘neocortex’ but it doesn’t trigger the decision (What I think about the decision)

Step 2: ‘Middle-brain’ process all emotions related to decision (How I feel about the decision).

Step 3: 'Old brain' plays a key role in decision making, old brain responds to only 6 stimulations.

1. Self-centered , my survival
2. Contrast
3. Tangible
4. Beginning and End
5. Visual
6. Emotion

Old brain doesn’t understand words, so words are not sufficient to influence the decision. Our eyes are directly connected (optic nerve) to the ‘old brain’ and this connection is 40 times faster than ears to brain connection. So it is advisable to use more visuals to influence decisions. To influence the decision one has to go beyond words, one has to use visuals those can elicit emotions.

Neuromarketing studies: skin moisture, heart rate and eye tracking.

Neuromarketing presentation part 1: understanding the old brain and the ...





Buyology - Truth and Lies about Why We Buy


Fear sells, President Bush in 2004 had a commercial calls wolf, people hated that ads, but people voted to him, because we are hardwired to be seduce by fear. Also brand those are associated with ritual and religion are more successful.

Reference: Patrick Renvoisé
http://neuromarketing.ning.com
http://itunes.apple.com/us/podcast/neuromarketing-patrick-renvoise/id326139313?i=60799871

Jitterbug Phone

http://www.jitterbug.com

Muddle Through

http://idioms.thefreedictionary.com/muddle+through

Muddle Through (something) to continue despite confusion and difficulties.

If people manage to muddle through so much, does it really matter whether they “get it”? The answer is that it matters a great deal because while muddling through may work sometimes, it tends to be inefficient and error-prone. - Steve Krug

Guidelines for Tooltip

Some usability guidelines for tooltip

1. The tooltip text should be kept small limiting to one or two words only.
2. Should not use symbols and punctuation in the tooltip text.
3. Tooltip should be visible for 3-5 secs when the user hovers over a button/tool and should be turned off after that.
4. Should be really useful for novice users.

Dashboards

A Guide to Creating Dashboards People Love to Use & Reference for data visualization

A good dashboard should have following features:

1. Support casual use
2. Lead to action
3. Customizable
4. Explanation before information

Blank Alt for Icons

http://www.accessibilityindesign.com/alttext.html

Alt text used for bullets and bullet-icons make meaningless audio clutter for users of screen readers.

WCAG 2.0 - Colour Contrast

http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-levels-head

Conformance Level: One of the following levels of conformance is met in full.

• Level A: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.

• Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.

• Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.

Note 2: It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

http://www.w3.org/TR/WCAG/

A: (1.4.1 Use of Color) Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

AA: (1.4.3 Contrast (Minimum)) The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• *Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• *Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• *Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

AAA: (1.4.6 Contrast (Enhanced)) The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

• *Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
• *Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• *Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Resources:
http://www.visionaustralia.org/info.aspx?page=628
http://snook.ca/technical/colour_contrast/colour.html
http://juicystudio.com/services/csstest.php
http://wearecolorblind.com/

Sparkline

Intense, Simple, Word-Size Graphics (simple datawords)

Examples:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1

Chartjunk

All visual elements those are not necessary to comprehend the information, examples:

1. Using 3D shapes for beautification
2. Reflection of bars in bar chart (imitating apple styling everywhere)
3. Ornamental shadings, textured backgrounds
4. Translucent shapes for pie chart
5. Stylish/Calligraphic fonts
6. Horizontal or vertical scrollbars for chart making comparison difficult

Tufte wrote:
The interior decoration of graphics generates a lot of ink that does not tell the viewer anything new. The purpose of decoration varies — to make the graphic appear more scientific and precise, to enliven the display, to give the designer an opportunity to exercise artistic skills. Regardless of its cause, it is all non-data-ink or redundant data-ink, and it is often chartjunk.
http://en.wikipedia.org/wiki/Chartjunk

Examples of Chartjunk:
Gradient for bar chart: http://www.jpowered.com/php-scripts/vertical-bar-graph/
Glass pie chart: http://fr.fotolia.com/id/7720545
Glass pie chart: http://www.istockphoto.com/stock-illustration-10045985-pie-chart.php
Background: http://www.syncfusion.com/content/en-US/Products/screenshots/aspnet/img/ChartBackground_larger.png


Captivating charts and graphs
http://www.macworld.com/article/134708/2008/07/chartsandgraphs.html

• Understand the Information

1. Understand data implications
2. Identify what is important for user
3. Make sure that you are using user’s language, use terms those your audience is familiar with

• Choose the Right Delivery Method

1. Bar charts are best for comparison and to show trends over time.
2. Flowcharts are good to show process and relationship between items.
3. Use pie chart for percentage

• Emphasize What’s Important

1. Layout: Top left corner for an important message, Bottom right corner does not get much attention, Horizontal UI is better that vertical
2. Font: use sans serif font
3. Colour: avoid bold primary colours, keep colour blind users in mind, pick one colour and use darker and lighter tints of it, maintain enough contrast for black and white print