117 Speed Psychology

Our reactions to page delays have specific time increments:

0.1 seconds gives us the illusion of instantaneous response.

1 second keeps our flow of though seamless.

10 seconds keeps out attention, just barely.

After 10 seconds, we start thinking about other things, making it harder to get back into our task when the website finally responds.

If you design a site that makes users feel out of control, they will not care about completing their goals on your site.

116 Dynamic Transparency on Pages

My display is the typical aspect ratio of most external screens today. Sort of the “Hollywood-movie” aspect ratio. Some screens for some reason are longer in the x-axis. It’s a good demonstration of how responsive design looks different on different size screens. There is nothing wrong with your screen, it’s just one of the exceptions. This is good because it forces us to consider more viewers needs.

The image cropping should be viewed or tested with worst-case scenarios. There are solutions.
I’m not too worried about vertical “scrolling.” It only appears when needed. There’s the scroll bar indicator next to the window if the frame is small. But some sites are mainly a picture story. The pictures will make them seek out the captioning. And people are very indoctrinated in scrolling. So it’s not a usability problem.

Some cropping of images will occur under extreme conditions but for the majority of screens we can minimize or eliminate that problem. But that causes other problems not related to the photo. Big images are important. We can guarantee no cropping if we make the images small. But then we lose that wonderful center-spread catalog effect. So the goal isn’t to “eliminate” cropping but to “minimize” cropping for the majority of viewers.

There are two camps in web design. I’m in the minority camp –the one that requires  imagination. One camp believes that websites should be like paper-under-glass and be pixel-perfect, fixed-width on every browser made. This is almost impossible at this point in technological development because there is no consistency in how browsers “act and react” to code and even images. The worst offender being Internet Explorer. These differences mean special customization is required for viewing on different browsers and devices. This multiplies the amount of coding needed.

Each browser has it’s proprietary quirkiness. So in an attempt to achieve “graphic design” perfection, dictated by the history of print media, designer work much harder or use cookie-cutters (like WordPress.) It’s a frustrating method because they’re attempting to make the web do something it was never designed for in the first place. The web was originally designed just for text and data –not images. Text is what it does best. You have to work within the severe limitations of the “natural” web.

Instead, many designers want to make the web do the “unnatural” –look like 300 dpi print medium.

User’s are not aware dynamic pages adapt to their screen. This is called “transparency.” For example, “page speed” is transparent when it’s fast. It’s not noticed. It’s invisible to the user. But a slow page will generate many complaints –no longer transparent.

The same with “fluid or liquid” pages. The user never notices. The page automatically “snaps” to their browser window size. They did not have to interact with the browser window to make things work.

In other words, ironically, the less attention for the “website”, the better it is. :) It doesn’t get in the way.

Designing for the web is like trying to design a newsletter with a typewriter for the 1960. It can be done but it requires planning and thought.

The more designers try to control the page, the bigger the pages get in weight (slowness or bloat.) If you let the pages move (liquid design, like we’re doing,) the lighter and faster the pages get. It’s simpler because you’re working in harmony with the “natural and unpretentious.”

So my job is balancing between beauty and speed. This is not easy and few designers know how to do it. Nor do they care, (apathy) they usually just want to get paid and move on to the next project. Many are plumbers and not artists.

Many designers will adapt as they become more aware of these “transparency” and “responsive” design principles.

115: The Body Language of Business

LIKE HUMAN BODY LANGUAGE, graphic design expresses similar implied non-verbal business attitudes or values. Graphic design is a method of differentiating business or products in the market. Graphic design is considered of equal value to other intangible assets like special customer offerings or an in-house mailing list or goodwill. Design builds a sense of community or habitat for customers and employees. Graphic design really is the body language of business.

THERE ARE TRADITIONAL positions for elements for different format like newsletters, a letterhead, a business card, a catalog, etc. It’s best not to deviate from tradition. People search the usual spot for information. If it is not there, it becomes a barrier to understanding. This is where creativity becomes a negative. Examples: Headlines should usually be below a photo not above it. On a brochure, ad, or slick, the logo and address should occupy the bottom right-hand corner. Place it anywhere else and people can’t seem to find it. (In web page creation, this is called usability.) Are things where people expect them to be? Placement of design elements is also influenced by printability, mailability, and postal codes.

THEMES FOR A BROCHURE or website grows out of client communication goals. It affects all design elements. It needs to be appropriate to the audience. It may use a metaphor, a stereotype, or a cliché. These can accelerate understanding. A theme builds upon historical emotional cues to alter the buyers perception of companies and products. Words, color, fonts, images, and symbols all orchestrate to create a unified theme.

Color combinations remind customers of feelings, emotions, and memories they’ve had in the past. They powerfully reinforce a theme (but they are not the entire theme, just a component.) Instead of preoccupation about colors, it’s best to focus on what your client wants their customer to feel when they see the literature or website. That feeling is easily translated into acceptable color palettes. Colors can also be sampled from photos or generated using Color Harmony Theory with software to select complementary and harmonic color schemes.

ALL WORDS AND SYMBOLS can be evaluated, ranked, or scored. There are 3 aspects to any word or symbol.
1. Evaluation is the degree of favorableness. How good-bad, fair-unfair, valuable-worthless, honest-dishonest does the word seem.
2. Activity is the degree of movement or activity in an object or event. How fast-slow, active-passive, varied-repetitive, vibrant-still, dynamic-static does the word seem.
3. Potency is the feeling of strength and weakness. How strong-weak, heavy-light, hard-soft, serious-humorous does the word seem. Sometimes an intensity (or potency) of certain words increases the connotation like the following: 1. confused > insane; 2. trusting > gullible; 3. thin > skinny; 4. unattractive > revolting; 5. sensitive > unpredictable. Can you feel the difference in these words?

Meaning may be derived from an elements position in relationship to other page elements. Two different symbols or images side-by-side can imply a third unspoken meaning. Or something on the page may imply something is happening off the page. The human imagination fills in the blanks. This is called implication. Our imagination is the great special effect method.

THE GRID CONCEPT is from the German Bauhaus design school (1919-1933) The Bauhaus believed industrial potentials were to be applied to satisfactory graphic design standards, regarding both functional and aesthetic aspects. The Grid concept affected all design fields from architecture to product packaging. This invisible grid is consistent from page to page and consists of rows and columns. It is the skeleton for the design. Breaking the grid causes tension in the viewer. Project limitations (time, budget, energy) define what page format will influence the invisible typographic grid. The grid is a structural layout tool. Some grid patterns work best for certain formats, like 12-columns on a newspaper. A grid produces beautiful books, brochures, magazines, and websites. Grids make it possible to bring all the elements of design typography, photography, and drawings into harmony with each other. When telling a story sequentially, over a series of pages, contrast is needed on the overall sequence as well as on the page. Two opposites: the need for order and the need for variety are needed. Without order, the reader is likely to become tired, frustrated, or bewildered by an overabundance of details. Yet without variety, the reader may become bored, overwhelmed, or numbed by too much repetition.

MARKETING ADAGE: e2 = 0 means Emphasizing Everything equals emphasize Nothing. There is a hierarchy of page elements. This affects placement, size, visual weight, color density, and more. No emphasis creates confusion and visual noise. Obviously, two things cannot be dominant or emphasized at the same time. The page needs a hierarchy of dominant, subordinate, and accent ranking of colors, typography, and images. Without a hierarchy, there is no emphasis. Without emphasis, there is confusion or chaos. The idea is to communicate. Without emphasis, the viewer doesn’t know what to focus on and gets overwhelmed and frustrated. Bad pages have weak focus and weak hierarchy. The central theme or idea would be muddled. Order is determined in the human mind, but there are visual cues that help direct our mind from most important to least. This is not always easy. Sometimes we have to discard something we really like to achieve the right emphasis.

PHOTOGRAPHY IS A PRINCIPLE communication device for design. Good photography generates interest and curiosity. It has energy. The most powerful or novel words in the body text, when converted to images, enable the viewer to quickly fill in the blanks. Photos frequently influence the theme color palette. If photography is beyond the budget, illustration sometimes works in its place but not necessarily for products. Products need the realism of photography even if it’s only a dummy or mock up. The potential customer will generally not believe an illustration or drawing is a real product.

Text placed over photos usually ruins the type and the photo simultaneously. About 30% of space in a publication is allocated to photos, as a rule of thumb. Besides photography as rectangular boxes on the page, it adds interest when we include a cutout photo object or two. A cutout is a photograph from which the background is removed to produce an organic edge. This image breaks the grid. Word wrap can be used around the edge. It’s a visual break from monotony and gives more life and freshens a page.

Photography helps the customer visualize what a product will be like in their possession after delivery. This should give a feeling of empowerment to the customer (not for the product or company.) The customer gets to be the hero, not us.

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.

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.


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.



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!

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”.