Posts Tagged ‘web_101’

Yes, it’s pretty but it’s not a great web presence

Sunday, October 4th, 2009

There are a few things you will never get if I work on your website. I promise that you will not have a flash-only website that forces the browser to be the same size as the screen (if I wanted it that big I would have made the browser that big, thanks) and play loud music you can’t turn off with canned sound effects when you move your mouse. No hidden navigation that users have to “discover”. No flash-only “I didn’t want search engines to be able to index my site anyway” crap.

Yes, some of those sites are pretty. Very well executed, very artistic. Props to the artists involved. But a web presence it is NOT. Users should be able to tell at a second’s notice what they’re supposed to do on the site, how to get where they want to go and most importantly, what you do. Search engines need text, TEXT, for their spiders to index or you can kiss any kind of placement in search results goodbye. And finally, stop ticking your users off! If I want sound, give me a button that says “turn sound on”, don’t start playing it immediately. Stop resizing my browser. Stop playing movies and flash immediately on page load. Give me a button that says “Play Movie”.

This is not rocket science. Don’t screw with your user; don’t lock out every search engine on the planet.

Teaching HTML as a Second Language (HSL)

Thursday, June 11th, 2009

…is hard.

A major project I’m doing right now at work involves teaching HTML/CSS and (and probably Javascript) to an audience of mixed knowledge-levels.

Now, I’ve got a lot of experience explaining things in context and answering questions for people of different levels of computer literacy. And I used to tutor students in Math, Science, English and other languages, and I taught Art privately for awhile. So no problem, right?

Trying to condense an entire introductory class into a couple hours and make it both appropriate AND useful to all different skill levels and then use it to contrast against the html/css/javascript being written by a tool provided by a vendor? Ouch.

I’m thinking that it might be best approached as exactly what it is: a foreign language. It has its own alphabet. Its words are elements, and it most definitely has its own rules of grammar. The doctype tells a browser what dialect you’re speaking in (html and xhtml are about as different as American and Britsh English, for instance).

Form Usability and Design

Tuesday, May 26th, 2009

Most of the work I do right now, I can’t post here because it’s proprietary and client-facing only. However, there’s one application, Mortgage Loan App, that’s fairly new and is what we call a “consumer facing” (meaning our clients’ customers) application that I would like to use as an example to discuss usability in forms and other aspects of form design. I’ll be referring back to it quite a bit in the next couple weeks. This copy is our production environment test copy; clients can customize the application with their own logo, colors and contact information.

A few forms topics (will link each when the post is finished, so feel free to bookmark this page to make it easy to find them in the blog):

  1. Label Placement
  2. Row Highlighting
  3. User Flow
    1. Tabbed Interfaces meet the Wizard
    2. Back/Next Navigation
    3. Button Placement
    4. buttons vs input=button vs input=submit
    5. Information breakdown, what’s on which page and why
  4. Why I use unordered lists in fieldsets for my forms
  5. Progressive Enhancement and Usability:
    1. dynamically hiding extra fields when they aren’t needed
    2. Making your form usable even when js and css are turned off by the user
  6. Making it Pretty
    1. CSS file design for multiple templates/themes
    2. Nifty 3d buttons without resorting to graphics
    3. Disabled Submit Buttons in IE and Firefox
    4. IE and empty divs

View Javascript-Generated Code in Internet Explorer

Tuesday, May 26th, 2009

If you’re using the Web Developer Add-on in Firefox, you are probably already familiar with the “View Generated Source” option (Web Developer > View Source > View Generated Source) for use in debugging code that is manipulated by javascript. But what do you do in Internet Explorer, where no such option exists?

Here’s my solution:

1) Go to the page whose generated source you want to view. Let it load in its entirety.

2) Put this in the address bar (broken to two lines to fit in my page’s width. Should be all on one line with no spaces for browser):
javascript:'<xmp>'+window.document.body.
parentNode.outerHTML+'</xmp>'

Your page will be replaced with the current state of the DOM, as Explorer sees it. xmp is a deprecated html tag that treats all the characters between the start and end tag as text instead of reading it as html. Since you can run javascript from the address bar, you can just take the whole page, put it between xmp tags, and spit it back out again. This is especially useful if you’re using browser-sniffing js to serve different js code to different browsers, because you otherwise would be unable to see the js in action in IE.

Note that this only works in Explorer, but that’s ok. If you want to see it in Firefox, it’s built right into the Web Developer’s Toolbar, or you can use innerHTML instead of outerHTML to get a similar output. The Developer Toolbar for Explorer is less reliable for viewing generated content; my experience is that it tends to get caught on a cached version of the DOM, so this trick is invaluable when you want to see the same page before and after events on the page have changed the DOM.

Must-read websites for UI Designers

Wednesday, May 20th, 2009

We may quibble over exact shades of blue users prefer or how important it is to break our code so we can still support IE6, but here are a few sites I think we can all agree are invaluable resources for both novice and advanced designers. I read these routinely and you should too.

1) Web Pages That Suck — learn good web design by looking at bad web design – Vincent Flanders and the people who submit sites to feature in “The Daily Sucker” deliver stellar advice to web designers through hilarious examples of what not to do.

2) useit.com: Jakob Nielsen on Usability and Web Design – This site is not about design. It’s about usability only and it excels at that. He’s the “Nielsen” part of “Nielsen Norman Group“, a leading usability company whose work you should be paying attention to if you do anything in web design or development.

3) UXmatters: Insights and Inspiration for the User Experience Community – This is a monthly ‘zine, rather than a frequent blog, with a number of contributors. Because of this, their articles often go into greater depth and have more solid references than your average design/UX blog. They also tend to cover more concise topics that may escape a generalist blog (for instance, this month one of their columns deals with using verbs as nouns in an interface).

4) Usability.gov – Yes, there is a government website focused on usability.

5) User Interface Engineering, a consulting firm – There’s a lot of really good information here.

6) No list of websites to read is complete without A List Apart. A List Apart: User Science is a direct link to their UX topics. Another ‘zine which goes in depth on topics you might not find on a more freqently updated blog.

A couple tips for your website, random companies

Monday, May 18th, 2009

1) Always always always say what you do on your front page. Not in depth — that’s for the About Us page — but SOMETHING. Your company name is meaningless to 90% of the people who hit your page. If there’s a few random meaningless pictures (that end up having nothing to do with your business) and your logo and that’s it, they’ll bounce. Lost sale.

2) If you have listings of any kind that will span multiple pages, always put your page # navigation at the bottom of the list. Top and bottom is better, but if you’re only going to do one, make it the bottom. It is very frustrating to a user to scroll to the bottom reading the listings and then have to scroll back to the top to see that there’s another page. Again, people will bounce from there, thinking you don’t have what they’re looking for. Bottom line: Lost sale.

3) Search forms. Your search results should NOT open a new window. It’s annoying to advanced users and confusing to less savvy users, who are unlikely to realize that they can go to the old window and will not understand why their back button won’t take them back.

4) Nothing should automatically start playing when someone lands on your site. Give them controls to start it playing if they want to. If it’s something that they have to sit through to get to the site, just don’t. Don’t do it.