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.

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 seconds—when 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.

 

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.

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.

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.

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

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

http://www.potlatchschools.org/

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.

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.