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.

114: GENIUS UNDERUTILIZED

http://www.techrepublic.com/blog/tech-manager/what-to-do-with-the-underutilized-genius-on-your-staff/7239?tag=nl.e101

113: Designer vs Programmer

Designer vs Programmer

1) Abstract / Concrete

2) Concept / Detail

3) Future / Present

4) Originality / Conventionality

5) Imagination / Factual

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.

www.useit.com/papers/responsetime.html

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