20 November 2011

113: Designer vs Programmer


Designer vs Programmer

1) Abstract / Concrete


2) Concept / Detail


3) Future / Present


4) Originality / Conventionality


5) Imagination / Factual

18 November 2011

112: UX is not an assassin cleaner

UX satisfaction testing's annual project cost of $1,200 can save development teams 10 times or much more if used properly. It is the speed and accessibility that is most important.

Cheap/hacker results are better (even preferred) to what teams are presently being dished up --slow to no results. Meaningless philosophical drivel arrives too late to do any good. The team has secretly already moved on.

There is a resistance to using UX satisfaction testing in team development because programmer's attitude is it slows down the process. (Oh no! Not UX again! Rain on my parade.) In reality, user satisfaction testing doubles the real-world efficiency. Agile cannot be productive without rapid feedback. That is proven --but no one is doing anything because they don't know how to solve the problem.

I suspect one reason Agile fails to use UX is because they don't have a decent tool yet. When they do, they will finally operate closed-loop. It's a convenience issue. It has to be painless. What is presently available just doesn't fit their workflow. It hurts to use it. It's like starting a fire by friction --not near as much fun as a match and gas.

My goal/mission is to break down the resistance to good UX "inline". Right now it's done "offline". UX "afterwards" for damage control, repair, and cleanup. UX is brought in like an assassin "cleaner" after a project's gone wrong. Strategic UX is about avoiding failure in the first place.

Agile UX (rapid prototyping) must be more strategic than in the past --embedded into the actual development process like lean manufacturing checkpoints and quality control. It builds quality into the product as it's built --not in final inspection. It has to be part of the team process and expectation. The cry of "We can't live without it" is insistence value in marketing. I want insistence value.

Agile teams pay lip service to UX but are not doing it because it is "hard and frustrating" when applied. It requires too much thinking and then the results are fuzzy. They'd rather be coding. We can be just as fuzzy --but FASTER.

We are eliminating obstruction, fluff, and friction for concurrent UX testing.

They don't really want a volume of data. They want quick judgments to guide the next iteration (2 weeks). It's all about efficiency. That is something programmers can relate to --that is the need.

17 November 2011

111: Speed UX

There are two speed metrics: 1) based on actual pageweight -- you have offloaded some weight (sharing with Picassa); and 2) perceived load time (page rendering or recognition). As long as you are "perceived" as under 2 seconds you are fine.

Google owns Picassa. They are using good technology to speed up the image "delivery". You benefit from their expertise and wonderfulness. This is a good example of benefiting from cloud services.

I classify speed as "obstruction" when it is bad. It's weight is twice any other factor. You have zero UX after 9 seconds. It doesn't matter how beautiful or desirable the content is. People will not tolerate a slow load. You've ruined the experience. Like kissing with bad breath, it's memorable for the wrong reason. The first-impression is ruined. Obviously, instant loads of under 1 seconds are the best. Speed is then transparent.

Now try your tablet speed on a commute or remote location --not near a home wireless router. :) A real test of mobile user environment.

The 2-second threshold is not an "Internet" created parameter. It has been proven for decades a threshold of human tolerance for presentations. In other words, it's more classic (hardwired) than fad (habit). People ARE becoming more impatient and intolerant but only when the 2-seconds is violated. Their annoyance is more pronounced after 2 second waits. Up until then everything was fine.

Like McDonald's has shown American's will wait 5 minutes for food. Then they get more and more agitated with the wait and will even leave or make threats. That is for food. It's different for pages.

www.useit.com/papers/responsetime.html

If you liked this tutorial, please raise your hand. :)

110: Interview with Joe Harris


Can development teams do rapid user satisfaction testing themselves?
This would be called a focus group or simply emailing survey questions. You know how good those are and how long they take to assemble. They tell you what you want to hear. Teams sometimes try to do testing themselves by using in-house staff (hardly unbiased) but with interviews or paper and pencil or email --not electronic automation. It is more expensive to analyze --not to gather data. You end up with a pile of reports and video on your desk to try an intuit and sift what it means. They don't need complexity. Overkill creates delays.

Simple and fast is better.
There are "survey and questionnaire" subcontractors --but the turnaround is slow because it doesn't indicate what to do next. You still have to have a brain. The problem is the project is stalled or may be turned in the wrong direction while waiting. Paralysis by analysis. Nor do traditional methods necessarily produce a baseline for comparisons on subsequent iterations (two week sprints). The user experience is bad with questionnaires (no seamless ecosystem). I take "online tests" to evaluate competitor weaknesses. Our "voting ecosystem" is fast and painless by comparison for the tester and instant results to view by the design team.

How much are you really saving companies after you charge your fee?
They literally can double their output or half the cost, etc. It's efficiency we sell. How much is that worth? Our potential fee is $50 per iteration (every 2 weeks) per project ($100 per month). That is peanuts compared to the potential gain. If it's a big million dollar project (not uncommon), they will save a half million dollars. If it takes a year, that means we only charged them $1,200. It is disposable reporting. We are not talking speculation about profit or sales. We are talking budgetary improvement. "X" is alloted. They save 1/2 of that.

Disposable feedback doubles project efficiency. << Is this a new positioning statement?

Imagine building a product where you NEVER asked the customer what they thought about features until you spent 2 years and $250,000 dollars. Is that smart? No! But that is how websites are usually built. Then it's all demolition, maintenance, and repair work after that. Very ineffective. If the customer/user is involved in tweaking and reviewing the design, they save 50% of the development cost. The shelf-life of a website is 3 years. It's almost time to start again!

The best analog comparison is lean manufacturing which also requires lots of in-process feedback for good quality throughout the process --not just at the end. You build in the quality, not rebuild in the quality.

In your ROI calculations, are you also including the cash flow from sales generated from the time you have saved them.
Nope. Too fuzzy. Just budget and project improvement. No direct or potential sales income is calculated.

If they are 50% faster to market, they have the 50% time saved to sell their product.
That is true. But usually they already started pre-selling the product. That is the marketing guys have. Not the programmers.

Or am I off base?
Your questions are very valid. I'm not sure I've answered them well. I'm thinking about what you have asked. Some is immeasurable. Like asking "What is the benefit from wearing lipstick?" How much is self-esteem worth or a really good kiss?

Sometimes there is a psychological benefit from just knowing you are doing it right or installing more lights in production areas for good morale.

15 November 2011

109: MBTI UX INFP

http://uxmovement.com/thinking/myers-briggs-personality-types-of-designers/

I am INFP (dominant) or INFJ (subordinate). I can role play ENFP (teacher) with high taxation on my energy levels. I'm well suited for the UX work.

I've been immersing in UX and in particular "Rapid User Satisfaction Feedback" which is essential for "agile" web development (team projects).

Agile project management improves web project ROI by 50% to 200%. This is measurable time and money. How it is measured I'll share some time. But "good agile" is contingent on "inline" and "concurrent" user feedback which presently is very clunky and time consuming (such as interviews, surveys, and questionnaires).

I've developed new cloud-utility feedback methods to match UX and Agile collaboration using tablet and mobile devices (painlessness). Essentially a low-entry best practice standard. My past attention (obsession) with web speed is paying off for mobile and tablet pages which must be between 20 and 25K pageweights. Old is new again!

14 November 2011

108: UX world-domination

I have yet to see a satisfaction survey site that made me want to get out my wallet or give it a try. They are usually charging by the month or by the test or by the project. And the offer is just extremely boring. None of them make me go "cool! gimmee!" Most have barriers to entry "like writing a survey" or setting up credit card accounts, trial periods, etc. Those are all intimidating, frustrating, and burdensome. Bad UX.

Skype has an interesting strategy. Their service is free. You can upgrade to professional quality services. You don't have to have a credit card to get in. Only 6% of their customers are "paid subscribers" the other 94% are all leaches. Yet, those 6% provide 100% of their profits. Essentially, $100 per year per paid user.

Microsoft bought Skype for $8.6 Billion. The annual revenue is not quite $1 billion. How much is profit I don't know. It took only 8 years to get to that point. Phenomenal.

Skype eliminated their competition with a preemptive first strike at market dominance. They weren't the first online telephony company but they were the first to go FREE.

It is called the “free plus paid services” business model. It all depends on how compelling of a value proposition Skype makes for users to upgrade.

About 35% of Skype’s users are businesses (probably small businesses). And not all of those are paid. This is also important because business users are more likely to pay for advanced features, rather than sucking up the free version only.

The question is what compelling value proposition will entice free users to convert to paying users. Answer: Remove all barriers to use then upgrade.

We aren't selling to consumers --we are selling to programmers, project managers, and marketing managers (development teams). Business people with profit motives. But first they need to toy with it.

The point is Skype used "free" to go viral. The cost of acquiring customers was small compared to the usual sign-up conventional phone services. What they bought with "free" was cheap marketing. Without it, they never would have gotten out of the gates.

My gut says we have to give something away to make it big. Something compelling like unlimited tests and access to the dashboard --but lock up the "details section". The real pros will want the whole enchilada. Those who came just to play could careless but as long as our overhead is minimal it's okay. We have to encourage playing. We have unlimited bandwidth. We have limited data storage but can make it time-limited (expiration of access). The dashboard is relevant (juicy) but not as much as the "details". It is a good and pretty indicator (qualitative assessment). It has value but not everything.

Let them sample all they want of the nutrition-less but still charge $50 per project to taste the main course. We sell the add-on from the dashboard. We give them repeat but expiring access to the results.

I think this is required for fast "world-domination".

107: Agile-wannabees

Agile is good but too tightly focused.
"Team development" is really the positioning. Agile is a team project management method but most teams fail at Agile or just pay it lip service. It is an ideal. It is hot but in the real world only a small portion are disciplined and motivated enough to make it really work.

We have services for agile and agile-wannabees.
Agile is still a keyword for SEO but it's too esoteric for marketing managers to comprehend. Marketing guys are on the team. In fact, they sign the checks. We need to appeal to agile programmers but marketing managers are the ones who put the guns to their heads and want evidence and proof.

We are doing industrial committee selling.
I've been doing that forever and ever. It's my forte. Agile programmers sit on the committee. They have the luxury of being the influencer but not necessarily the buyer. The programmer is the guide who takes the marketing guy to our website and says, "See. We need ScreenZest."

Go viral via programmers.
We need programmers endorsements but they aren't the authorizer or purchaser. Buying our service is not a one-person decision with a credit card. The committee has to be all onboard and unanimous to using our process.

Positioning
The fundamental difference here is we don't sell "user satisfaction feedback". That's what "it is" (the tangible) but not what they want "to buy" necessarily (the intangible). We sell development teams faster communications about agile satisfaction. Well. That's closer anyway.

03 November 2011

106: Links to UX color tools and articles

http://colorschemedesigner.com/

http://vandelaydesign.com/blog/design/find-the-perfect-colors-for-your-website/

http://www.princetonol.com/groups/iad/lessons/middle/color2.htm

http://spyrestudios.com/the-user-experience-and-psychology-of-colour/

http://www.uxbooth.com/blog/creating-consistently-colorful-user-experiences-part-3-the-craft/

http://easyrgb.com/index.php?X=SEEK


105: Links about Responsive Web Design

http://quirktools.com/screenfly/

http://css-tricks.com/2398-ie-fix-bicubic-scaling-for-images/

http://unstoppablerobotninja.com/demos/resize/bicubic.html

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

http://www.alistapart.com/articles/responsive-web-design/

http://www.abookapart.com/products/responsive-web-design

http://boagworld.com/season/2/episode/s2e7/

http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/


104: UX Satisfaction feedback resources

https://docs.google.com/spreadsheet/ccc?key=0AlkBSfnlj7YZdFpvajJiSjJaa2lLTUgzdHlzdk1mZUE&hl=en#gid=2

http://www.premo-online.com/

http://www.uxmatters.com/mt/archives/2011/03/ux-analytics-part-i-a-call-to-action.php

http://www.usefulusability.com/24-usability-testing-tools/

http://www.siteprebuilder.com/content/user-interface-ui-user-experience-ux-analysis

http://www.uxbooth.com/blog/information-gathering-a-roundup-of-ux-applications/

http://www.alistapart.com/articles/quick-and-dirty-remote-user-testing/

http://www.intuitionhq.com/

http://www.techrepublic.com/blog/webmaster/quick-tip-measuring-user-satisfaction/578?tag=nl.e075

http://www.binaryturf.com/usability-testing-tools-15-tools-testing-usability-website/

http://www.bestwebhostingfans.com/web-hosting/great-usability-tools-for-your-website-part-ii/

http://www.uxmatters.com/mt/archives/2010/02/rapid-desirability-testing-a-case-study.php

http://sixrevisions.com/tools/10-excellent-feedback-tools-for-web-designers/

http://www.hongkiat.com/blog/7-steps-to-better-website-feedback/

http://webdesignledger.com/resources/a-beginners-guide-to-website-feedback

http://lite.launchlist.net/

http://www.4qsurvey.com/

http://blinkux.com/insights/blog/the-value-and-limitations-of-customer-initiated-feedback

http://en.wikipedia.org/wiki/Test_%28assessment%29#Types_of_tests


103: Links on building for Mobile

http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

http://www.alistapart.com/articles/pocket/

http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/

http://abduzeedo.com/mobile-web-design

http://validator.w3.org/mobile/

http://www.boxesandarrows.com/view/are-your-users-s-t-u


01 November 2011

102: Jacob Nielsen Anti-UX?

I've read Jacob Nielsen's stuff and watched video interviews with him, etc. I agree with much of his philosophy and he is intelligent but he is so militantly anti-design (prejudiced?) that I --like other User Experience (UX) pros-- find him an obnoxious snob. He's been preaching usability for decades now.

I've seen UX slide shows where they poke fun at Nielsen as an undiscerning nerd. I'm sorry to say it's pretty funny. He makes lots of money since he appeals to left-brain web programmers and developers --and not right-brain designers.

Here are the flaws in his opinions:

1) Nielsen is a usability expert. He focuses on Spartan decoration to the extreme and sees that method as a panacea. UX views usability as a component in a bigger picture. I say that even as I presently focus on a piece of usability which is "user satisfaction". Which came first?

2. Nielsen sees only one flaw: bad usability. I see there are three hurdles to good user satisfaction and they are not equally weighted. He doesn't recognize their value nor does he "weight" them. Here they are:

a) OBSTRUCTION -BIG
First: Obstruction like speed, accessibility, and brokenness. If a viewer won't wait for the page load (scarcity of attention) or can't "see", they will bail on the site. So it doesn't matter how beautiful a site is or how good the content. Speed is the first deal killer. Two seconds maximum wait is tolerated. So Nielson says, "Eliminate decoration." Wait. Not so fast. Read on.

b) DECORATION -MEDIUM
Second: If the viewer can get past obstruction, the next hurdle is the site aesthetic. Lab research shows people pass judgment (first-impression) on a site in less than 50 milliseconds. The biggest influence is the use of color combinations and type (aka theme). It bypasses all cognitive mental process. It's visceral. This causes a halo bias. Everything is judged after that to reinforce the first impression. Other research shows that even though people SAY they are most influenced by usability and content that isn't true. They are most influenced by a "pretty screen" for credibility (credibility = trustworthiness + expertise + leadership). Nielsen's solution is to eliminate all decoration and even provide full-measure screen text. Uh. Proven bad for credibility. Self-defeating "logical" behavior.

c) FRICTION -LOW
Lastly, the final hurdle is "friction" which includes all of the things that make us feel we are in the right or wrong place (cuing). These include content relevance, readability, navigation, expectations, etc. These are the details that can frustrate us if they aren't obvious or transparent. But they happen AFTER obstruction and decoration judgments. They are frequently subconscious irritation or pleasure.

My goal is SATISFACTION (like hotel hospitality for the web). It is impossible to eliminate all these hurdles completely but they can be optimized to improve website success. First impressions can be voted on and then ranked. (It isn't necessary to overkill to zero when 0.40 will do the trick.) The goal is improved efficiency. In other words, how quickly can the barriers be reduced with the least amount of time and money.

I don't really WANT "plain-Jane" sites. I feel there are decorative elements that can be leveraged and balanced with speed and still give "branding". That requires compromise.

Extreme light page weights (20K to 25K) have suddenly become important again with tablet and smartphone web browsers. The "old" I've been fanatic about is "new" again. I don't look so dumb to programmers now. This makes me feel happy. :) But decoration should not be discarded completely.

So if you say Nielsen reminds you about "me" and my thinking it is happily a compliment --and sadly an insult. I thought I'd set the record straight on the idea differences be they only subtle nuance.

28 October 2011

101: Fast UX

1) Agile development is feedback driven.

2) Development teams need to keep testing quick, simple, and frequent.

3) Agile UX must be flexible. It must respond to end user feedback and market changes in one iteration (one week).

That is what ScreenZest provides for them. It is better than other methods of user validation like Interviews, In-house usability tests, Focus groups, Surveys, Beta tests, and Demos. They are just too slow.

It appears what we are selling is "Fast User Validation" --not "Reduced Bounce Rate".

100: Keep testing quick, simple, and frequent.

Agile development is feedback driven.

Here are some ways salesforce.com facilitates testing:
  • The company uses simple screen-sharing software (GoToMeeting) to share prototypes electronically. Testers pass control of mouse and keyboard to their users to watch them work.
  • A simple conference call lets a facilitator talk to users and lets the user explain likes, dislikes, and areas of confusion.
  • The company sometimes uses TechSmith’s Morae to record the screens and audio as users interact with the software.
  • A projector displays the user’s interactions with the product in a large format so that all the product team members can easily observe them.
A typical weekly testing cycle has salesforce.com designers testing Monday, fixing Tuesday, testing Wednesday, fixing Thursday, and then testing again Friday. By the
end of the week, things are getting pretty good. User-experience people, product man­agers, developers, and others sit in on the call and watch the screen.

99: UX Validation with Interviews, Usability tests, Focus groups, Surveys, Beta tests, Demos

Interviews
Interviews are structured one-on-one question and answer sessions. They are investigative in nature so the intent is to gain understanding in areas that are unclear. The majority of interview questions are "open" and conversational, instead of "closed" and quantitative. For example, an interviewer might ask, "What does our competitor do better than we do?" to initiate a discussion, but not "Please rank on a scale of 1 to 5 which of these competitor's features are better than ours."

Interviews are good for learning the customer's pet peeves, the problems they are running into, their likes and dislikes about the software, and what they want to see in future versions. Interviews cannot determine if software is easy to learn, or easy to use. Interviews will not help identify new market opportunities.

Usability tests
Usability tests are used to evaluate a product design by watching the intended users of the product try it (or a prototype of it) for its proposed use, and seeing what problems are found. Usability tests are good for discovering issues with learning, discoverability, error rates, and speed of use. They also uncover issues with incorrect or omitted feedback. Usability tests can uncover missing features that are needed to complete a workflow. Usability tests cannot discover whether a product will fit into the users' work environment since they are normally not conducted at the users' work place, on their hardware and using their files. They cannot verify that a product is solving the right problems for specific users, or if people will actually buy it.

Focus groups
A focus group is a moderated, exploratory discussion with a prepared focus. The participants are users or potential users. Focus groups are good for getting user's opinions, goals, priorities, and seeing how these compare to others in the group. Focus groups cannot determine if users would actually use proposed new software, or what features should be put into a release. They also cannot be used to determine whether software is learnable or usable.

Surveys
Surveys are strict sets of questions that are delivered to a large number of people in order to gather quantitative data. Surveys are good for getting simple factual data, priorities, and confirmation of information that was gathered in an exploratory session. Surveys cannot give an understanding of the “why” behind the facts that are gathered since there is no ability to have a discussion with the participants. Surveys also cannot tell if people will buy a product.

Beta tests
Beta tests are when almost-complete software is sent to customers, and they are asked to report problems. Beta tests are good at finding bugs. They are also good at determining if the software actually solves the customer's problems and if it works in their specific environment. Beta tests cannot convey if the software is easy to learn or easy to use since beta customers will not typically give this feedback. If the software is hard to learn or use, Beta customers will blame themselves and will not report the problem because they do not want to appear stupid.

Demos
A demo is a canned demonstration of new software (or new features) shown to your customers to get their opinions. Demos are good for learning what users think about a proposed feature, if a feature would make them more likely to buy, and if they think you are going in the right direction to solve their problems (although they cannot tell you if you are actually going in the right direction). Demos cannot determine if a feature will work in a real production environment, if it is easy to use and learn, or how much people will like the feature after they start using it for real.

98: UX validation groups = development partners

Cultivate a group for continuous user validation
UX people build up a pool of users they collaborate with to validate design before and after it's built. This pool of users needs to be large enough that the designer doesn't call on the same user repeatedly every week - but rather talks with them every month or two.

97: Informal UX feedback for Agile Development

Narrowing the gap between gathering usability data and acting on it.

From the software developers’ viewpoint, they can no longer manage the slow pace of formal usability testing. Instead the require faster and more iterative informal testing, by asking for customer feedback on features and also having IT developers in other parts of the company test the product to see if they could break it. It's a more agile testing approach.

The toolkit has changed to include faster methods. It now takes a shorter time to get a study going, finished, and analyzed.

All this research, modeling, and high level design often occurs in weeks, not months.

Organizations need a continuous flow of users scheduled to validate design work. Schedule users for remote usability testing or site visits well in advance. The one thing you can depend on in an Agile context is that there will always be something.

UX work is mostly about discovery, agile work mostly about delivery. Two worlds - both concerns are necessary. Discovery never stops. And, discovery without delivery isn't very valuable.

27 October 2011

96: Self-initiated UX feedback

UX Metrix is selling an online self-initiated feedback service. Testing produces customer loyalty and reduces support cost.

Common problems with testing:

Memory
It’s not uncommon to observe people struggling through a website and afterwards they say it was “easy enough.” Surveys are particularly bad at uncovering "memory" issues, because time passed between the user’s actual experience and the survey.
ScreenZest reminds them of what may have been "right" and "wrong".

Attribution
I probably did something wrong.
Many users blame themselves when website problems occur. Issues that make people feel stupid remain under-reported.
ScreenZest helps uncover issues that people would not report by themselves.

Comfort Level
I don’t feel comfortable making suggestions.
People often assume the website they are using is the best that’s possible. Even if a prominent “Contact” option is provided, this may not encourage people to make suggestions.
ScreenZest voting has a lower threshold than originating ideas like with surveys, etc. Voting feedback gives quantitative insights and adding comments gives qualitative insights.

Effort vs. Reward
Should I bother?
Someone who has just spent a lot of time trying to use a site will not be excited to spend even more time trying to provide feedback. People may also wonder whether their feedback will reach the right person and be considered.
Always dignify the customer’s effort with a response (automated or personal), even if you can’t use the suggestion. Follow up for clarification if needed; few people will object to showing interest.

Discouragement 
Don’t make me jump through hoops.
Companies frequently create obstacles to reduce contact volume, by burying the contact options many clicks deep, or requiring registration (people hate it), or forcing extensive categorization of the type of feedback, or asking for details that don’t make sense or are privacy sensitive.

26 October 2011

95: Text justification is UX

http://en.wikipedia.org/wiki/Justification_%28typesetting%29

"Definition" bubbles should be "Flush left, ragged right with a hanging bullet" --and not centered. Centered text is most appropriate on invitations and wedding announcements. Centered justification is hard to read and I should explain why.

The link above is pretty good. But left off one detail:

In English-speaking countries and countries using Latin characters, the eye looks for an invisible edge (at the left) to find the next line down upon returning from the end of a line. This is a readability issue: the pleasure or ease of reading.

Centered text destroys that edge finding capability. There is no straight edge.

Technologists seem to think "Justified (flush left and right)" --where both edges are forced to make invisible edge lines-- therefore must be even better. It was impossible before the computer age so it must be more advanced. Right? It makes for pretty type.

But humans prefer a "ragged-right" edge. It's helpful to maintaining a sense of location on the page for the eye. Thus, again, easier finding of the next line down. Justifying both edges (sameness) ruins our eye's sense of position. It takes more work to read --an unnecessary strain.

Just because you can do something doesn't mean you should. It's all UX in the end.

06 October 2011

94: How users really judge websites

Two studies were published showing an unexpected gap between how people say they judge Web sites and the criteria they actually use:

From Stanford University and Consumer Web Watch: "How Do People Evaluate A Web Site's Credibility? Results from a Large Study."

From Sliced Bread Design, LLC and Consumer Web Watch: PDF download "Experts vs. Online Consumers: A Comparative Credibility Study of Health and Finance Web Sites."

The studies asked Internet users to evaluate the credibility and quality of information they get from various websites. Even though visitors told researchers they looked at many different aspects of a Web site when deciding whether to trust its information, researchers were surprised to discover that visitors were more swayed by a site's design than anything else. Few people (if any) told researchers that they would trust a site more if it "looked good." However, that's exactly what researchers discovered after asking participants to evaluate a number of different websites.

Beau Brendler, director of Consumer Web Watch noted:
"While consumers say they judge on substance, these studies demonstrate that consumers judge on aesthetics, and get distracted by bells and whistles."

Visual design is the second test of a site's credibility. Speed is first.

"I would like to think that when people go on the Web they're very tough integrators of information, they compare sources, they think really hard," says Fogg, "but the truth of the matter--and I didn't want to find this in the research but it's very clear--is that people do judge a Web site by how it looks. That's the first test of the Web site. And if it doesn't look credible or it doesn't look like what they expect it to be, they go elsewhere. It doesn't get a second test. And it's not so different from other things in life. It's the way we judge automobiles and politicians. http://en.wikipedia.org/wiki/Stanford_Web_Credibility_Project

http://en.wikipedia.org/wiki/Persuasive_technology

05 October 2011

93: Improving User Satisfaction and Reducing Site Bounce Rate

I made a big advance in clarifying the barriers or hurdles preventing user satisfaction. The previous blog entry #92 describes some of that brain work. It's a work in progress. When these hurdles are removed or addressed, users have decreased bailout or bad bounce rate metrics.

The first hurdle is
OBSTRUCTION

This is load speed and image optimization. There are tools online for measuring and tweaking this. The benefit is not conscious to the visitor (transparency). No one notices a fast page --only slow ones.

Second hurdle is
DECORATION
Presently, UXers use interviews to evaluate this parameter. This is a body language judgment. It is not logical but emotional reaction and happens in the first 50 milliseconds. Visitors don't even need to use the site before making this judgment. It's purely visual --at-a-glance. If the reaction is negative, people will be tempted to bail out.

Third, web
FRICTION
Attention can be checked with compliance to readability standards (100%E2R) and hierarchy of design elements. But eye tracking tests already exist to assist. Scarcity of attention comes from user impatience and intolerance. There are online "eye tracking tests" that don't even require user feedback. A screengrab is submitted. Contrast and placement are then evaluated by machine based on how a human would react.

I propose each hurdle can be ranked, weighted, and summary score derived for overall site toxicity / quality rating. I've used a similar method for judging the quality of product names. The three hurdles are interactive and synergistic.

92: Prevent Toxic UX Poisonings

Reduce user disappointment, effort, and frustration with UX satisfaction.
UX Hurdles Reduce Web Toxicity

Build a user safe website with improved quality, efficiency, and economic longevity by monitoring three states for successful user experience.

State 1
Obstruction

If a website loads slower than 2 seconds, the speed biases users from that moment towards goodness-or-badness judgments. This is a proven fact called the halo effect. People hate slow websites. Slow site performace is considered rude.


Solutions
Remove usability barriers like browser incompatibility, horizontal scrolling, or slow page load (bloat). Optimize images and code.


State 2
Decoration

In 50 milliseconds, people evaluate if your site is attractive. This is before they click or read anything.

This is attractive use of color, white space and readability. It is the visceral feeling of being invited and seduced. The customer journey is obvious and requires no effort. Visual cues or signage produce a comfortable feeling the user is in the right place.

Solutions
Deliver the desired features and content. Demonstrate attention to details by reducing visual clutter. Promote consistent theme with color, balance, branding, type, and symbols that are harmonious and well designed. Examples include clear links with information scent, no requests for mysterious information, and recognizable calls to action. The positioning strategy is plain. Your users motives for seeking the site are quickly addressed.


State 3
Friction

Search efficiency is skimming or fixating on relevant headlines and subheads. Content is scanned first for value before investing serious reading time. Hotspot and eye tracking tests frequently address this area.


Solutions
Make reading comprehension effortless and convenient. Examples include good headlines and subheads, combining multi-step processes like forms, reduce system slowness, and eliminate or reduce annoyingly strict security requirements. Fast pacing created by removal of visual distractions or annoyances like animation.
Good value analysis reduces waste and streamlines the experience. No difficult language or jargon. No long-forms, broken links, or requests for odd information.



Testing with Cross-device helps you improve user satisfaction, brand affinity, and overall delight. This is described as seamlessness, flow, feeling, and transparency.

Like a canary-in-a-coal-mine, Cross-device is your website test for UX toxicity. 

04 October 2011

91: Responsive letter-spacing

http://pxtoem.com/

According to this link above 0.063em = 1 px.

letter-spacing: -0.063em;


This is good kerning for larger headline text.

"Style sheets become easier to maintain because all text set in EMs scale to the body font-size."

03 October 2011

90: Grayscale testing

Touching colors must have a minimum 30% grayscale differential (contrast) or the human eye struggles to find the edges. This retinal error can cause an optical effect known as popping. This color “secret” is not generally taught in design schools.

There is a so-so online grayscale test site:

http://graybit.com/

Try it. It doesn't always work on every site. I do my tests in Photoshop with screengrabs. No particular reason. Habit?

02 October 2011

89: Mobile Web vs Apps

http://seekingalpha.com/article/227332-mobile-apps-the-wave-of-the-past

QUOTATION / SUMMARY:
"Just like the PC, I expect the rise of a good mobile Web to topple the walled gardens while creating a platform agnostic environment that levels the playing field. In this scenario, the one with the biggest garden has the most to lose – Apple. The diminished importance of apps will reduce switching costs for consumers since they will simply need to log-in to Web sites rather than worrying about losing favorite applications in the transition to a new device. This would put price pressure on Apple and create an opportunity for others to take share."

01 October 2011

88: Placement of mobile UI components

http://en.wikipedia.org/wiki/Rule_of_thirds

http://www.colorzilla.com/gradient-editor/

http://en.wikipedia.org/wiki/Golden_ratio#Aesthetics

http://en.wikipedia.org/wiki/Headroom_%28photographic_framing%29

http://en.wikipedia.org/wiki/Lead_room

http://en.wikipedia.org/wiki/Golden_spiral

http://en.wikipedia.org/wiki/Golden_angle


87: Web typography and PDFs

There are a couple of special characters: the "en dash" and
"apostrophe". Small obsessive typography details I can't let go of. :) I
mention them only because most people never notice those consciously.

http://en.wikipedia.org/wiki/Letter_case

While you have serif links underlined and blue (default), this is unnecessary Spartan design --even primitive. People know what looks like a text link and what doesn't. That doesn't mean the default circumstance doesn't have value or merit. It does. The default is blatant and obvious linking when used. But there are things that are "wrong" with underlining and using colors that don't match the theme. Underlining cuts through character descenders. That reduces legibility. And poor theming is bad for credibility. So I recommend styling with CSS rollovers. Be creative. That's why they made CSS options available.

Watch the reverse type. It is not really "white". It's #dbdbdb on
#1c1c1c. This improves readability drastically onscreen. Try it and
compare to white-on-black for small type. Another subtly. Don't use it
on your navigation. You need pure white contrast there because the
gradient background isn't "solid color".

Serif is a screen default --it was defaulted-in for browsers for the wrong reasons way back decades ago. There was a reason but it proved to be a bad choice with time. It's not nearly as screen-readable as sans serif faces like the ubiquitous Verdana and Arial. Those fonts have interesting stories and histories but I won't go into it now. I'm not anti-serif. It just needs to be used properly and in the right places. Some other day I'll deliberate on all this "web typography". I've used Verdana here, a Humanist font. The fallback stack would be Verdana, Arial, Helvetica, then sans serif. (That is not the ideal stack.) Verdana is on 99% of browsers. Linux not so good but still high 67%. And iOS 100%. Bonus.

http://en.wikipedia.org/wiki/Verdana

There rarely is a benefit from images with baked-in built-type. I've learned that the hard way after spending too much of my work life in Photoshop building headlines.

PDF links need "editorialization". This is good web etiquette. Dropping users into a download without warning or cuing is bad UX. It can lock up their browser. Very irritating. Especially if they are on dialup --like many in our rural area.

PDFs can easily be reduced with a freeware PDF optimizer to a tenth that file size. This is bandwidth politeness most developers don't do for users. Apathy! Screen quality pages print just fine. Google on "freeware PDF optimizer". There's even one available for Ubuntu but I haven't used it. The Mac one is drag-and-drop. Brainless. Nice.

Optimizing PDFs is a subtle way to say, "we care." Host them on your server.

30 September 2011

86: Dropdown CSS menus

I preach 7 to 9 links is the best-case requirement on a home page. So I choke on "link clutter". That is frequently beyond a designers control since it's probably edict from a committee.

I have low-expectations of dropdown and flyout navigation. I am prejudiced about dropdowns for various reasons. It is mostly a matter of preference and lack of tolerance on my part. Consider it a www personality disorder of hypersensitivity.

The responsivity of a CSS3 dropdown menu is "snappy". This has pros and cons. Flashiness is one con. It can be somewhat distracting or surprising --like a winged bug jumping in your face. But I'd rather have a snappy responsive navigation than one that's a slug.

A complaint with all dropdowns is what happens during accidental rollover like when accessing the browser back button. This is inherent in all dropdowns not just this one. So it's irresolvably disturbing. I find it annoying on all sites. I am not a qualified person to judge the usability appropriateness. That is an endless debate on the web. I can say, "CSS3 cooks and looks good." When there are too many links, dropdowns are the best game in town to compromise. Being weightless is the biggest coolness factor for me.

85: Impact websafe font.


h1{color: #333333; font-size:280%; line-height:100%;font-family:Impact,
Haettenscheweller, "Arial Narrow Bold", Charcoal,
sans-serif;font-weight:normal;font-style:normal;letter-spacing:-1px;}

I suppose the spacing would be better specified as an "em" space instead of pixels --per responsive design specs for mobile. And, of course, the size needs to be adjusted to the whitespace. If the line height is NOT specified the fat words wrap on top of each other (fluid) --brokenness (when and if there are more words).

"Haettenscheweller" is a freeware font lookalike to Impact (a Microsoft Office bundled font). Apparently, it's popular enough to include --but don't ask me to ever spell it! Copy and paste only.

Impact is available on 99% of IE, 92% Mac, and 64% Linux operating systems --but not on iOS. You might test and see what happens there. I noticed it rendered fine on your tablet.

Impact should never be bolded or italicized. It makes it unreadable and is only useful as a "naked" headline font --never body text. Kerning (letter-spacing) must almost always be tweaked either tighter or wider.

Because Impact is an underutilized "websafe" display font, I use it in branding for print and web. I consider it a "core" design font for fast sites. Impact is a bold (strong), grotesque-style, condensed font created for metal plate in 1965. It has upper and lowercase characters.

As you can see, I'm a typography freak, too. :)

84: Balanced asymetry for mobile devices.

Is it possible to do nonlinear gradients in CSS? For example, say I'd like more black at the top in a gradated banner. Can I define a starting point for the gradient to begin? What I've seen so far has a start and finish point at the edges of the div. Can one tweak this behind floating text? A 50% "break" in the middle isn't aesthetic always.

This control would make a difference in perception. Human don't see things linearly. It's more appealing to have "balanced asymmetry" sometimes. This is golden ratio and optical stuff. I'll explain more how this affects the UI you are working on in a bit. I seem to be wandering in my head today on various topics. This is NOT unusual. :)

http://www.1stwebdesigner.com/design/symmetrical-asymmetrical-web-design/

http://en.wikipedia.org/wiki/Symmetry#Symmetry_in_aesthetics

http://desktoppub.about.com/od/designprinciples/g/asymmetrical.htm

http://desktoppub.about.com/od/designprinciples/l/aa_balance2.htm

Asymmetry --and balanced asymmetry-- can create a more dramatic design. Yet it is so subtle, viewers are usually unaware of the manipulation (subconscious).

The use of asymmetrical balance is especially useful for mobile websites. First, it is weightless (doesn't hog bandwidth). Second, most mobile screens are centered and boring. Third, it can be done with simple CSS and HTML elements. No graphics files are necessarily needed.

29 September 2011

83: Site Comfort is UX

"Web credibility is based directly on the overall visual design of a site, specifically noting layout, typography, font size, and color schemes."

--Stanford University Persuasive Technology Lab

Think of a web page as a person.
If a person is not congruent, contradicts himself, and does not seem to be consistent, that person is typically not someone who earns your trust. Every webpage element, the headline, text, image, and the testimonial, must be congruent. The highest performing landing page matches exactly what motivated a customer to come to you in the first place. Congruence includes design, copy, images, colors, logo, and price.


A sense of belonging and being understood is a powerful motivator for people.
After we get past our anxiety and confusion and find the information we need, we still have to deal with affinity or alienation by the website. We want to be recognized for who we are, understood, and valued. These are subtle issues of identity, tribalism, self-esteem, and belonging.


In those first few impressionable secondswhen your guest "steps" into your site—your reputation and identity are evaluated for credibility. Credibility has three components: trustworthiness, expertise, and leadership. You use a soothing voice, tone, and body language to calm a visitor. This comfort level is achieved with graphic design.


As markets become more competitive, design is more of a distinction. People are overwhelmed by unwanted information. Focus your message so it gets through your potential customer's filter.

There is no such thing as a business being exactly the same as its competitor—you are one-of-a-kind.

 

26 September 2011

82: Cross-device development

Cross-device development

The novel development of mobile applications with technologies that let you write code once and run it on several devices of different phone vendors.

Baked-in "UI continuity" has the widest audience reach -- and thus the most value to the user.

Overall continuous UI tapestry = ecosystem

Media queries are part of the CSS3 specification. A media query allows targeting not only certain device classes, but to actually inspect the physical characteristics of the device rendering the site. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk. To do so, incorporate a query into a linked style sheet’s media attribute:
The query contains two components:
  1. a media type (screen), and
  2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).
We’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.

http://www.w3.org/TR/css3-mediaqueries/#media1

More companies create mobile optimized versions of their websites using media queries. 2011 is the year of responsive design.

The number of active users will be more important than the number of downloads.

Mobile-exclusive brands and content will have success
• Traditional publishers will launch new, mobile-only brands
• Vertical-focused content will be used to create greater user stickiness
• Mobile applications leverage new distribution channels and, as a result, new discovery options


Mobile applications and the mobile Web will get hitched and play nice together
• Operating systems creators are making it easier to launch applications leveraging Web technologies and skills
• Applications will heavily leverage mobile Web in applications as a means to scale utility and custom features cross-device
• The average user will not be able to tell the difference between a mobile Web site and mobile application eventually





81: CSS Gradients

http://24ways.org/2010/everything-you-wanted-to-know-about-gradients

This link above was written by the same book author of "Responsive Websites". It's good stuff.

I have a philosophy that "basic" elements of speed. Gradients is one of the elements that can give "light and depth" cues. As the author, Ethan Marcotte, says though --gradients can be abused and overused. Nonetheless, he has some good stuff here. More than I would ever have patience to code. But intriguing bag of tricks.

I've alway built gradient's as tiling backgrounds. CSS would be more elegant and speedy.

My basic elements are 1) color, 2) foliage, 3) lighting, and 4) legibility. They are an adaption from cheap but attractive "tradeshow" booth design. Gradients fall in the "lighting" effects category.

I demonstrate applying this graphic "formula" a bit on my blog http://ultraspeed2.blogspot.com/2010/06/34-julia-mumford-com-continued.html

80: Cross-device website simulator

http://quirktools.com/screenfly/

Very handy site for screen testing.

25 September 2011

79: UX CLEANTECH: Non-toxic websites

Cleantech is a term used to describe products or services that improve operational performance, productivity, or efficiency while reducing costs, inputs, energy consumption, waste, or environmental pollution.

I'm pro cleantech for websites using UX tools. The goal of UX is to reduce website frustration and struggle (aka toxic graphic pollution and bandwidth waste).

Authors have written about the need for more mobile bandwidth (mobile meltdown) to avoid an approaching crisis. Speed is my pet topic. My webpages are in the 25K to 50K pageweight range. The average webpage today is 720K. It was only 340K last year. Ouch! Bloat. This is because media is "unmediated". There are no penalties except being rude and building slow-loading bandwidth-hogging websites for anxious and unsuspecting business owners. Hit-and-run.

Google is working towards a faster web. But their motive is NOT bandwidth conservation as much as getting people in "the flow" of seamless experience to capture more advertising dollars. Flow is a trance-like state where there are no bumps to jar you.

While government increasing the "spectrum" size of "the pipe" is one solution, decreasing the amount of bits being squeezed through (regulation) is a low-cost, no-tech alternative that needs to be examined. That is my creative angle. There is no motive or award for web developers or web designers who demonstrate creative self-restraint. They are running open-loop. Time for some incentives and stimulus in the right area. Fix the source of the problem.

24 September 2011

78: WEB HOSPITALITY

http://goodexperience.com/2011/08/a-master-course-in-ho.php

http://goodexperience.com/2009/04/on-hospitality-in-a-t.php

I've been on this mindset for about 2 months. Hospitality is UX.

77: UX EDITING: Why relevancy isn't safe enough.

Hurdle technology is a method of ensuring pathogens in food products are eliminated or controlled. This means the food product is safe for consumption, and the shelf life will be extended.

A website also needs some kind of user poison prevention so it is safe for "consumption" and that it's longevity (shelf life or usability or click-thru) will be increased. "Non-toxic" is a measurement of aesthetic quality and user satisfaction.

Toxic pathogens must overcome "hurdles" to remain active in food. The right combination of hurdles ensures all pathogens are eliminated or rendered harmless in the final product.

There are hurdles a website must go through also for "safety". More on those in a minute. But the goal is to control or eliminate user frustration or struggle with the website. Frustration is toxic web poison because users are intolerant and impatient. Satisfaction is the end goal. To focus on one hurdle alone may not be enough for acceptable levels of UX.

Food hurdle technology affects food quality and sensory properties, that is its look, taste, smell and texture. Also, not unlike website user experience-- it can stink or leave a bad taste in our mouth!

Examples of hurdles in a food system are high temperature during processing, low temperature during storage, increasing the acidity, lowering the water activity or redox potential, or adding preservatives. According to the type of pathogens and how risky they are, the intensity of the hurdles can be adjusted individually to meet consumer preferences in an ECONOMICAL way, without compromising the safety of the product. (Economy or efficiency is a key phrase and emphasis for websites, too.)

There can be significant synergistic effects between hurdles.

So what hurdles might exist for sanitizing and purifying website experiences?

I was hoping you'd ask that question!

I've mentioned these steps in a previous blog entry but here's a summary:

LIST ONE

1. Speed. If it's too slow (over 2 seconds), visitors immediately and subconsciously don't like the UX. It biases everything from that moment towards "goodness or badness" --the "halo effect". This is proven fact. People hate slow websites even if they think the reward is worth waiting for. You will be considered rude.

2. Aesthetics.
In 50 milliseconds, people evaluate the body language of the site. Is it comfortable? Is it pleasing? Is it attractive? This is before they even click anything. Again this subconscious judgment biases the "goodness or badness". Color selection is THE most critical element here.

3. Simplified content density.
This is good use of white space and readability (not legibility). It is the feeling of being inviting. It's a seduction.

4. Content relevance.
You have to get past the above 3 barriers before you get to this level of detailed interest. Actual reading of headlines and subheads (words and labels). And even these have a hierarchy. Content is scanned first for value before investing reading time. Once judgment is passed, then text is read --possibly in entirety.

Connecting the Dots
I saw a UX poster this year focused on ranking web "badness". (UXer's love making posters.) It inspired me to convert those thoughts into positives and abbreviate it. It now reads similar to my hurdle technology metaphor. One has to get past each step/hurdle to get to the next level of safety. At some point, there is overkill or wasted effort. If the first and most weighty matters fail, UX safety sharply diminishes. But the synergy of combinations of other UX hurdles may help compensate. Not all components must exist or be pass-fail or go-no-go. There are gradations of safety and quality. Here's that list:

LIST TWO

1. Performance
Remove usability barriers like browser incompatibility, cross-device malfunctions, horizontal scrolling, or slow page load (bloat).

2. Attraction
Aesthetic 50ms judgment bias (site body language). Demonstrate attention to details by reducing visual clutter. Promote consistent theme with color, balance, branding, type, and symbols that are harmonious and well designed.

3. Comfort
Completion path is obvious and requires no effort or missteps. Examples include clear links with information scent, no requests for mysterious information, and recognizable calls to action. Visual cues or signage produce the "feeling" the user is in the "right place". The positioning strategy is plain. The users motives for seeking the site are quickly addressed. Reduced effort, frustration, and cognitive load. No disappointment from missing desired features or content.

4. Efficiency
Make reading comprehension effortless and convenient. Examples include good headlines and subheads, combining multi-step processes like forms, reduce system slowness, and eliminate or reduce annoyingly strict security requirements. Fast pacing created by removal of visual distractions or annoyances like animation. Good value analysis reduces waste and streamlines the experience. No difficult language or jargon. No long-forms, broken links, or requests for odd information.

Satisfaction << The Ideal UX Goal
This is brand affinity or overall delight. Seamlessness. Flow. Transparency. Attention to detail is perceived. Credibility is generated.

I believe these two UX Hurdle lists can easily be merged. That may be my next post. Standby for synthesis.

Can each of these UX hurdles be ranked or quantified? I think so. Even if it is relative scoring, the result would indicate improvement or superiority.

It would appear satisfaction which is a 1/3 component of the new International Standard, ISO 9241-210 has definition problems. The three measures of usability in the standard are 1) effectiveness, 2) efficiency, and 3) satisfaction. They are usually considered independently. In reality, they may all be part of a hurdle technology approach to UX measurement.

The benefit would be UX monitoring for editing. The elimination or reduction of "unmediated media". This would be in the form of a standardized policy published in a website style guide.

Editing is the process of selecting and preparing media used to convey information through the processes of correction, condensation, organization, and other modifications in various media, performed with an intention of producing a correct, consistent, accurate, and complete output.


UX Editing?

76: UTOPIAN DESIGN THOUGHT

http://imprint.printmag.com/design-school/an-open-letter-to-graphic-design-students-dont-follow-the-web-follow-your-heart/?utm_source=rss&utm_medium=rss&utm_campaign=an-open-letter-to-graphic-design-students-dont-follow-the-web-follow-your-heart&et_mid=519705&rid=60401352


This link is absolute Utopian Idealism. Joesph Campbellian, "Follow your bliss!" is a false notion of Boomer selfishness. It is the Myth of Myths.

"Follow the money" is the key to survival. If you can be happy while doing that, it's a bonus --not a prerequisite.


23 September 2011

75: SITE DECORATION VS UX

There's nothing wrong with complex, expressive and distinctive page layout like swirling vines as long as it achieves the goals of the user and site owner --not just selfish ol' designer self-aggrandizement. To design just to be fancy is wasting valuable mobile resources like bandwidth and screen space. So the big question is "Was the vine-decorated site usable on a mobile web browser?"

Lots of sites look nice on desktops and fail this simple test. Memorability is key in good branding. You remember the pleasant feeling most. It's imprinted in your memory that way. Nobody is very brand loyal any more. Branding is now mere web signage to help me discover and recognize what I want.

http://en.wikipedia.org/wiki/Anchoring

http://en.wikipedia.org/wiki/Positioning_%28marketing%29

UX is more holistic and visceral than just layout or navigation. It is subliminal. Pre-logic and anti-reason. It has to do with subconscious cuing happening in less than 50 milliseconds. It's a matter of instant "liking". NMR brain testing proves this "first-impression" judgment bypasses all chemical logic functions of the brain.

If you don't instantly like a site then there is a major problem. You will be repelled by the site and never even listen to the offer. The door slams shut. It's like a guy with a nose piercing and facial tattoo selling magazines on your doorstep. No trust or credibility. Suspicion.

There is a hierarchy of website body language features. I compare them to hurdles:

1. Speed. If it's too slow (over 2 seconds), visitors immediately and subconsciously don't like the UX. It bias everything from that moment towards "goodness or badness". This is proven fact. People hate slow websites even if they think the reward is worth waiting for. You will be considered rude.

2. Aesthetics. In 50 milliseconds, people evaluate the body language of the site. Is it comfortable? Is it pleasing? Is it attractive? This is before they even click anything. Again this subconscious judgment biases the "goodness or badness". Color selection is THE most critical element here.

3. Simplified content density. This is good use of white space and readability (not legibility). It is the feeling of being inviting. It's a seduction.


4. Content relevance. You have to get past the above 3 barriers before you get to this level of detailed interest. Actual reading of headlines and subheads (words and labels). And even these have a hierarchy. Content is scanned first for value before investing reading time.

The goal is to imply "tending a nutritious balanced garden" as a metaphor. It can't be just flowers. It has to have vegetables, too. Weeds must be removed.

Expressive design won't by itself attract the subconscious mind --rather make it worse. Making the site different may only introduce confusion --because users really don't want different. User testing is best by what they "do", not what they "say"; this shows users desire web "sameness and consistency." If a site isn't unified and focused yet the mind isn't at peace with a flow experience.

http://en.wikipedia.org/wiki/Flow_%28psychology%29

A side-by-side UX demo outweighs showing statistical results like page weight and load time and Google ranking. :) That's UX, too. Screenfly demonstrates the problem in real-time

20 September 2011

74: MORE FOREST GREEN THEMING

The Potlatch school colors are Forest Green and white.

The programmer didn't choose that theme. It was made by assignment and historical. White (or off-white to creme) is a given for almost all themes. Does the school print green text on white background? Or white-on-green? I bet they use both depending upon the application.

Potlatch uses what is called a "hanging curtain" style page layout. This is conservative. It is a fixed-width technique and universally adopted.

Any reason for not choosing more fluid elements with full-width percentage?
Fluid is a way to distribute color more evenly in cross-device modes when screen sizes vary. Liquid or fluid design maintains the "theme" color ratio / hierarchy. Most people aren't aware of this subtle benefit.

73: COLOR THEMING WITH GREEN



The Potlatch school district website is a dominant green (I sampled it). The green is the same one used in "powerful" color themes. This is very normal and good for school colors. We want others to think (perceive) "our team" as invincible.

But green as a dominant color does NOT connote powerful. Only when it is subordinate (secondary in the hierarchy). Hierarchy can be established by various design methods. I won't go into that now. But simple coverage of pixels is a good indicator. Color real estate.

When green is dominant, we normally think "natural or environmental" theme. But this logger green is too "hard or harsh or strong" for that softer natural palette. The deep "forest green" was chosen subconsciously by a designer. But there are psychological reasons why the selection happened and those can be explained (as I am doing now). When we're aware of these subtle things, we can "manipulate" perception even stronger for emphasis with "design". Design is a strategic tool.

That is the case for the Potlatch website. Dark green is a good color choice --but needs others in combination and in "good-enough" hierarchy to make it a really strong theme. Good can be better.

Themes are based on our memories and the emotions tied to them. One color alone rarely is a theme. It is color combinations and their "rank" that really produce emotive excellence. "Emotive excellence" meaning "feelings". UX is about creating feelings.

With better color combinations, we help people feel comfortable, improve credibility, and let them know they are in the right place. Color cues are also "free" (weightless) because of HTML speed. Bonus.

The immediate choice in powerful themes is dominant black and a subordinate color --like your green. But your site is not black dominant. It is green. So adjustment is needed. But that combination may be too powerful. In fact, black would have too high of contrast onscreen and might strain the eyes (guessing from experience). The black in the background marbling tile is an unconscious attempt to get more black into the theme.

I researched alternate colors that work with the green. We will experiment to see which gives the best result. I suspect it will be the dark gray and green combination.

After awhile working with theming tools, your eye can pick out stuff (autopilot). It's like training yourself to find the sweet-spot. Testing then confirms what your instincts pick up. After becoming aware, you can reinforce the theme.

09 September 2011

72: WEB BRANDING AND COLOR

Programmers usually think of theming as "skins" or "templates". Theming in the graphic design world is NOT the same meaning.

Theming is a combinations of elements like symbols, colors, type, etc that generate user emotion. Some things aren't appropriate for the subject matter and will confuse or frustrate the user.

These "manipulated" emotions are based on subconscious memories. We are reminded of something pleasant or bad from our past experience --within the 50 milliseconds. Our brains are hardwired to bypass reason when judging site "body language". Our new experience is biased by old experience.

Emotional design cues (theming) in marketing is called "branding". Same thing. Just different labels.

Color is the most fundamental and powerful component of theming and branding. From a bandwidth standpoint, color is also the web "visual asset" most easily leveraged for cross-device optimization. Color has free speed. We can specify hex code to colorize HTML and CSS. Weightlessness --unlike GIF and JPEG color images.

But color strategy and selection for web programmers is usually mysterious. Coders frequently just copy ideas from a favorite site (reverse engineering). That's okay but hardly original. Good branding requires originality.

One sole color is usually not considered a theme. But a monochromatic color scheme is okay. Shades of a color can work. For example, emphasizing  "planning" with a "blueprint" metaphor. This would use different shades of blue. But the best themes are built using color combinations.

There are mathematical methods of deriving pleasant combination of color with color wheels. These don't take into account human psychology. An example would be selecting "red" as a dominant color. The mathematical complement for best high contrast would be "green". But this math derived color theme with a balance of green and red combination just won't work. Memories will instantly be triggered saying, "Christmas!" Unless of course, you are building a Santa site. :)

I've created some rudimentary reverse-color-lookup tools to make color selection easier based on the "emotional / feeling goals. This is UX.

30 August 2011

71: Core Fonts




http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

Here's a demo I put together.

http://www.pagepipe.com/testx/

These are going to be the fastest loading. From my experiments with web fonts, they can really increase pageweight. Especially for extreme optimization for tablets. Some sites allow you to trim the web font set. like FontFonts. These are expensive fonts. Not worth the grief. Color and size is more important.

Ah! The shock of such a limited font palette.

18 August 2011

69: web aesthetics and credibility

http://mashable.com/2011/02/11/4g-faq/

The Effect of Aesthetics on Web Credibility -- a PDF download.

68: Optimizing the Front-end for Mobile and Tablet Sites

http://www.uxbooth.com/blog/how-to-minimize-load-time-for-fast-user-experiences/

http://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/

http://blog.yottaa.com/2011/03/monitor-website-speed-for-better-ux-and-seo-part-i

http://www.michaelgaigg.com/blog/tag/speed/

Great idea:
"More often than not, the mobile experience for a web application or site is designed and built after the [desktop] version is complete. Learn the three reasons web applications should be designed for mobile first instead: mobile is exploding; mobile forces you to focus; and mobile extends your capabilities."

***

How fast is 4G, really? Can I cancel my ISP subscription yet?

http://mashable.com/2011/02/11/4g-faq/

4G has the potential to be insanely fast. The various technologies should be able to deliver download speeds of 1Gbps when stationary (in the home), and 100 Mbps while mobile. Those kinds of speeds make cable and DSL networks look like dial-up.

In practice, neither LTE or WiMAX is going to offer that kind of speed. In the best of circumstances, users can expect around 10 Mbps from WiMAX or LTE. As coverage areas increase and networks grow more robust, that number could increase.

T-Mobile’s HSPA+ network already tops 21 Mbps in some areas. Realistically, users can expect about half of that. But T-Mobile and AT&T both plan to upgrade the HSPA+ offerings on their networks.

Most users will not be able to replace a home Internet connection with 4G, and that likely won’t change for several more years, at least. The exception is users in rural areas, where it’s often extremely difficult to get cable, fiber or DSL, and who have to rely on satellite Internet. For these users, even the first wave of LTE or WiMAX may be speedier than what they get from satellite — and at a lower price.

67: Documentation for Web Comments

Webnotes looks like a great way to annotate actual pages on the fly in your browser. Great way to document for clients.

https://www.webnotes.net/

66: Rapid Prototyping Definition

I don't do static wireframes. I'm an advocate of rapid prototyping in HTML and CSS. Then testing is done immediately online. This just makes sense and is more real-world than sketches of interfaces. It's a shortcut and goes hand-in-hand with fast site development. Read more about this idea:

http://www.uxforthemasses.com/rapid-prototyping/

65: Online Speed Measurement and Ranking

Yottaa is a great online tool for checking web performance. This link is a test of www.pagepipe.com. The home of PagePipe UX. 32.5K webpage!


http://www.yottaa.com/url/www-pagepipe-com-4e44800b4b6b2257b000002d

16 August 2011

64: Tablet Indigestion

The metaphor of indigestion compared to site bloat for tablets is just too perfect. They make you feel ill, uncomfortable, frustrated, distracted, and painful. These kind of sites really are hard to "stomach".

04 May 2011

63: Page Hijacking

In the late 1990's, Frames were sometimes used to hijack pages from other websites. This was considered unethical. It was essentially stealing content and rebranding it. I'm not an advocate of this HTML Frame con.

I am fan of embedding a web service into a Frame. These services include such things as: Blogger, Jalbum, form processors, and other "cloud or widget" resources. More seem to come into existence every day. They are modules or patterns. The feeling is you have never left the main site.