User Experience, Usability and Usability Testing

Understanding usability is the core to creating innovative design. If you find a way to present information with more clarity, your ability to design improves. I have been trying to focus more on "content" when designing than actual aesthetics. I've been trying to communicate the site's purpose and making everything clear, organized, and easy to find what you are looking for. When I saw UX Mag's site, I was amazed by the layout. I realized that it's a user experience publication and thought to myself "of course!" Then I realized that my design focus wasn't on "content" as much as it was on usability.

Usability Focused Site Design(s)

1. UX Mag: User Experience Publication

I hope I find more examples!

The mistake of ignoring usability
"Violating Design Conventions: Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave. " - no. 8 of the Top Ten Mistakes in Web Design

Best Practices
No link on the homepage that links to the homepage itself
site search is important

Case Studies
Wired Article "How Would You Redo the Google Interface?"
Design View: Google Redux
Design View: eBay Redux

Resources
UX Mag is a publication dedicated to providing information on user experience
Wide Open column: Digital Web Magazine
Jakob Nielsen: Useit.com
Human Factors International
Association for Computing Machinery
Adaptive Path
Fast and Simple Usability Testing
Criteria for optimal web design (designing for usability)
Who are the best communicators? features advertising best practices from David Ogilvy
User Experience Design Illustrated
30 Usability Issues To Be Aware Of

Read More
Twenty Usability Tips for Your Blog — Condensed from Dozens of Bloggers’ Experiences
Things to avoid when creating a website
Weblog Usability: The Top Ten Design Mistakes
10 Ways to Increase Blog Usability

Don’t do this on your website, it bugs me

Copyright or Copywrong?

Copyright Chris Pearson 2005






Copywrong

In an attempt to create design of a better quality, I somehow ended up on a quest to create trendsetting design. I thought that was what would eventually happen if I did what I wanted and ignored the rest of the world but a little reasearch helped me realize I was "outdated". The next thing I thought was "Can I come up with something new that people will actually like?" People liking your design is strongly dependent on following trends. Coming up with something new has nothing to do with following trends. The only compromise is to set a new trend.
I looked at probably 5000 sites before I surrendered. They all started to look the same to me, my taste had changed, and I read enough self-proclaimed style pioneer comments to never want to design again. The further my studies brought me back in history the more ignorant everyone appeared and the more impossible my quest seemed.
I needed a baby step if I wanted to break my designer's block. I needed to create trendy designs and at least update my work. Since I was looking at websites to make websites (usually I looked at old print magazines and album covers), I had to be extra careful that what I created didn't look too much like any of those 5000 sites I've seen. As a whole if your site looks more than half like another site you will probablly be accused of ripping some one off even if they ripped someone off. I don't know why it's ok for a website to look like a Glaser rip off and get to be some kind of pioneer of the Glaser rip off style but there's hell to pay if you add the slightest Glaser influenced element into your design. So there's an unspoken blackout list of where you can draw influence from too. This baby step I'm taking is made for giants.
The next step for me was to understand what copyright really is and to be ready to defend my right to be influenced by the same things as other people.
I ran into a situation today that was an example of someone's work being ripped off and wasn't sure what to do. The design concept was so basic it was hard to entitle someone to the rights of it but it was an 80% dead on copy.
I thought to myself that it wasn't wrong to use the same minimalist style, colors, and have some similar placement of content. Maybe the new guy is trying to interpret it as their own but they are not sure how to get it down to a 40% influence. If I tell them how then it will keep him from doing it again. If I just call him out then he might just personally attack me and go on selling other people's designs to people who don't know better. I went to ask the original designer what they would say if they wanted to help the guy but I could not locate any contact information on the "Best Damn Blog on the Planet" and didn't want to call out the new guy in a public place like a comment string. So I say nothing. Maybe I'll send a link to an article explaining how to make something your own when I find one. Instead I'm just gonna read a couple of articles on the "Best Damn Blog on the Planet" and remember who copied them first.
An excellent example appears in the first article I read on The Best damn blog on the Planet, where he defends himself against an accusation of design plagarism and is point on in explaining design influence in the appropriate context.

A Very Formal Read on the subject
The Ecstacy of Influence talks about plagerism, intellectual property, unailienable rights, copyrights, and gifts

Read more on this subject:

Trade dress

Web Design - Imitation is the sincerest form of flattery [sitepoint forum discussion]

Good Designers Copy, Great Designers Steal

Theft of Wordpress Database [sitepoint forum discussion]

Copyright Tools:

CopyScape: Search for copies of your page on the Web

Client Choices: Choosing a style

Web Design-isms: 7 Surefire Styles that Work is the best example I've seen at categorizing the various styles used in web design. This is a very resourceful guide to use with clients in narrowing down a design direction. Maybe they will suggest something that looks nothing like the 7 listed styles and wa-la a magical new style for you to work with.
This resource is a list in which the styles are different enough from each other that a client can differentiate which ones they like and dislike. It is a starting place and gives some common language to the discussion of the design direction. You say web 2.0, they say color bar thingies, you make no headway. You both say web 2.0, they say no, you make progress. There is a need for quick simple categorization. Not all conversations about design are going to be meritful or scholarlly. Art history knowledge would have a noble advantage in categorizing what artistic styles have not been or rarely been explored on the web.
The style(s) chosen are a focus point and your unique additions will help make it your own. Larissa Meek later explains in the comments that "I think it’s important not to 'copy' or 'emulate' but to focus on a style or movement. "
As a web designer the revolutionary ideas start with making content easier to understand, navigate, and use. Style only really influences the small details of the bigger picture.

The 7 styles:
COLLAGISM
ORANAMENTALISM
GLOSSISM
WORDISM
FUTURISM
MINIMALISM
RETROISM


Her examples:
http://www.jrvelasco.com/ - typography and collage [wordism]

Comments examples:
http://www.atelier.ie/ - [minimalism]
http://coudal.com/ - [minimalism]

Offline Reference:
Fresh Styles for Web Designers [listed as an outdated reference to the subject but still probably a good observation]

Web Designer Profile: Andy Budd

website: http://www.andybudd.com/
company: Clear: Left
org: SkillSwap
Based out of: UK
conference: d'Construct
book: CSS Mastery
talks about: CSS & Web Standards and Accessibility
devoted fan of: Movable Type and Mac OS X


Has a list of Free Designer Resources and his Favorite Sites

Visitor's Search Phrases

If you end up on a post, leave a comment with your question and I'll try to help you out.

Search phrases:
translucent divs
"new blogger" list-style bulleted
lotus notes signature jpg pixles
tmv fwa wallpaper

Referring Sites:
blogger.com
digg.com
iheartluxe.com
Shaun Inman's mint

Web Design Wire Frame

Site Point: Wire Frame Your Site
A Designer's Wireframe
Web Site Wireframe

Photoshop Mock Up

New File at designated width you designed for (accounting for the most popular screen resolution + browser + browser settings)
1024 x 768 ie6 is 1003 × 568
800 x 600 ie6 is 779 × 400
If I don't have a lot of content, I might as well design to stay safe at 779 x 400.

I could standardize this part of the process by always creating a file 1024 x 1000 px
Left justified: place vertical markers at 779px & 1003px and horizontal markers at 400px & 568px
Centered: place vertical markers at 10px, 112px, 902px, & 1014 and horizontal markers at 400px & 568px

Then I would place the most important content in the main 779 x 400 area and have extra room to build into and crop when I'm done

Cute Drop Quote

I like this drop quote on Designing for the Web [Jan 2006]:

What's Up DOCTYPE?

Quick Link: W3C Doctypes

Standards Compliant Doctype from the horse's mouth
W3C's List of Recommended Doc Type Definitions (DTDs)
W3C article "Don't forget to add a doctype" explains the importance of DTDs

When something's wrong, check your doctype
Fix Your Site With the Right DOCTYPE!

"if your pages use outdated elements such as the bgcolor attribute in table cells or the target attribute in links, then HTML 4.01 Transitional is likely the best document type for your pages." - Jeffery Zeldman

Doctype Advanced

Beyond DOCTYPE
From Switches to Targets

Related Topics: deprecated HTML

VALIDATE your mark up

validate your HTML and CSS
search: free validation HTML CSS
World Wide Web Consortium (http://validator.w3.org)
Web Design Group (www.htmlhelp.com/tools/validator/)
CSS: http://jigsaw.w3.org/css-validator/
Tidy: www.w3.org/People/Raggett/tidy/
validate yourself too: Invalidation may be the single most damaging form of psychological abuse
HTML Toolbox shows errors

Accessibility

"Although many people automatically think about people with some sort of physical impairment when accessibility is mentioned, the term actually refers to a Web site that is open to all. Even visitors with old equipment, tiny monitors, slow modems, and screen readers can use accessible Web sites.What happens when a designer considers how the page will look to all visitors? The usability level of the site increases, as does visitor satisfaction - and hopefully repeat visitors. You don't have to design an ugly site geared towards the lowest common denominator. Just put some thought into how the site looks in configurations other than your own.If you assume that "everyone" has a huge monitor running at the highest possible resolution or other cutting edge equipment, then you could be locking out well over half of your visitors. Why not invite them in instead?"

Providing text equivalents for non-text elements in the form of an alt or longdesc tag

Resources:
30 days to a more accessible web site
Accessify

CSS vs Tables

"...tables or absolute positioning. That’s so 1999." - A List Apart
Educating your client why css layout instead of a table layout:
"Large and/or nested tables in particular can dramatically slow page display." - Designing for the Web
"Web standards such as HTML 4, XHTML, and Cascading Style Sheets (CSS) gives you the best of all possible worlds" - Jeffery Zeldman

"The most amazing thing about this tutorial, is that somehow, even though it was completely unrelated, and supposed to be humorous, people STILL managed to get into a tables vs. css debate. YAWNNNNNNNNNN. So tired. So over it. Will someone just buy the domain tablesvscss.com and document all the arguments so we can keep it all in one place and never have to look at it again? I am pro web standards, but at the end of the day, it is such a meaningless thing to be zealous about. People are hungry. " - a comment by anathema on an educational CSS "how to" post

Test Your Site

Test your site in multiple browsers, browser versions, screen resolutions, operating systems, and monitor sizes combinations.
Become familiar with the major assistive technologies used by visitors with disabilities.
Running IE 6 and 7 at the same time

Color Me Good

"Web-safe color, basically, is the set of colors that will render consistently in browsers on the two major computer operating systems (Windows and OS X). A true cross-platform Web-safe color palette is 216 colors." - Designing for the Web
The 216 Color Web Safe Pallete are the only colors that will render correctly on both PC and MAC
Visibone's Swatches

Be Accessible:
Use Contrast to make text readable. Do not use color to convey information. Example, Use an * to note a form field that is required not just changing the color to red.
You can check how you page will appear to different visual users at Vischeck.
You can also check a color before you use it on the Accessibility Color Wheel .

Tools:
Tons of Other Color Resources for Web Design
Genopal Online Tool
Geno Color gives a simple Color Lesson
HTML Color Names
Adobe Kuler
Color Lovers
http://wellstyled.com/tools/colorscheme2/index-en.html

Notes on Usability

This information has been moved to User Experience, Usability and Usability Testing

Web Design - a step by step quide

This is still in the process of being written. I am using my current project as a model to write this and am re-researching anything I haven't read new material about in the past 6 months.

1} If project is a redesign, have someone test usability of old site to determine what works and what needs improvement.
2} Research the dominant companies in the industry. Print out thier sites and become familiar with what users expect as well as where there is room for improvement/innovation.
3} Sketch out the wireframe to define a the page's content and functionality without touching on design, colors, graphics, or fonts yet.
4} Determine your canvas size. Look at visitor stats for what Screen Resolution And Browser Type to optimize for. Determine the height and width of your main content area.
5} Find Your inspiration. Take screenshots of site components so you can have them for reference.
6} Sketch out designs. Document your design sources, ideas, and process. These will be your points of reference for pitching, understanding, explaining, and being professional.
7} Make A Paper Mock Up. (You can cut up the pieces of the other web sites.)
8} Make a Photoshop Mock Up with everything on seperate layers so you can move and Shift everything Around.
9} Create A Simple HTML file mock up to test color. Save your photoshop mock up as an image and insert in the document. Set the background color of the body to match against the different background colors you plan on using. Test on a PC and a MAC. You might need to use some of the 216 Web Safe Colors
10} Let a peer look at your design. Educate them first. Show them a copy marked with what is permanet and why (industry related usability, CEO mandated, ect...). Present a sample sheet of the major influences of the design. This will save a lot of your peer's time so they can focus on the design and brainstorm improvements or even trigger an innovation. Use multiple peers who are strong in different areas - usability, seo, design, psychology, industry guru, ect...
11} Present your comp(s) to the company for final changes. Explaining to them what's industry related usability, SEO realted, accessability related, as well as samples of the major design influences.
12} Create css mock up.
13} Test css mock up in different browsers and resolutions for font readability
14} Create and optimize images and add to css and html
15} Add content to HTML
16} Test your site (again) on different browsers, screen resolutions, and operating systems
17} Make sure all images have alt and long description
18} Make sure all links have title tags and don't open in new windows
19} Validate your CSS and HTML

Other Effective Guides:
CSS From the Ground Up

Reading List

these have been moved to the super long list here:
Reading List for Web Designers and Pop Culture Enthusiasts

Web Design Resources

Lorem Ipsum Generator
216 Color Web Safe Pallete
HTML Toolbox shows errors
Browser Photo screenshots in 16 different browsers

Screen Resolution And Web Page Design

Read Optimal width for 1024px resolution?

I wish I did before I wrote all the following out...
The comments have both good information and a fixed vs fluid debate. Comment debates give me headaches.

Here's the archaic research I did:

Researching an old question for the newest answer.

1. Check Visitor Stats
2. If you have no stats history, Check Current Research - Preferably Industry and Geographically Specific

2001 [1]
Check your visitor stats
Reference online user surveys at WebSideStory and BrowserNews
They indicate that 800x600 is the most popular resolution, with 1024x768 close behind in 2001.
A page optimized for 800x600 should have a maximum width of about 760 pixels.

2005 [4]
The rightmost part of a page is cut off when printing a frozen page. This is especially true for Europeans, who use narrower paper (A4) than Americans
mistake #1 is to freeze the fonts - then they are too small for browsers

2006 [3]
Percentage Of Users:
1024 × 768 - 56% (2005) & 50% (2004)
800 × 600 - 28% (2005) & 35% (2004)

Screen Size In Browser:

For Screen size 800 × 600
IE 6 779 × 400
Firefox 781 × 434
Opera 777 × 427
Mozilla 779 × 420
Netscape 781 × 389

For Screen size 1024 × 768
IE 6 1003 × 568
Firefox 1005 × 602
Opera 1001 × 595
Mozilla 1003 × 588
Netscape 1005 × 557

"I use both fixed-width and percentage-based designs, and determine which to use based on user research, intended audience and client expectations. If I use a fixed-width design I tend towards an 800 × 600 screen size, usually around a 762 × 400 design size. If I use a percentage-based design I will design in stretch points so that the information looks good at both of the dominant screen sizes." - Joshua David McClurg-Genevese


Resources:
1. Screen Resolution And Page Design [Dec 2001]
2. Screen, which screen size should a web designer design for? [May 2000]
3. Designing for the Web [Jan 2006]
4. Top Ten Web Design Mistakes of 2005 [Oct 2005]

Read More:
Resolution Dependent Layout
Accessibilty Guide to Screen Resolution and Page Layout