A Better Way

Finding a better way to get things done, a technical journey

Posts Tagged user experience

HTML5 Site – Waterford Family Bowl (Part 1 of n)

Apr 3

Posted by Jack Lawson in Analytics, Architecture, Development, JQuery, Javascript, PHP, User Interface Design, Web Design, Web Standards, css | No Comments

Waterford Family Bowl website

Waterford Family Bowl website (www.waterfordfamilybowl.com)

A little while ago, my aunt approached me- she needed a website for her bowling alley. “Sure,” I said. “Let’s go over what you want and we’ll build something that works for you.”  In the back of my mind, I was thinking “awesome! Perfect timing to flex my HTML5 muscles and try jQuery 1.4 in a production environment; will it work?”

The site’s now completed, and in production. Go ahead and check it out at http://www.waterfordfamilybowl.com (still waiting on a little alternate content :) ). I’m going to, over a series of 4 or 5 posts, go over how the site works- how and why I used PHP, jQuery, HTML 5, jQuery, WordPress, Picasa, Google Analytics and Webmaster tools, and Google Apps; and, how I merged them all to create a dynamic, easy to use and easy to edit website. I used principles from books like “The Design of Everyday Things” and “Don’t Make Me Think”, and I’ll explain how and where these came into play.   The process I took made even IE 6 compatibility a breeze!

Brief overview on how I plan to break it down:

1. Intro to series
2. Design - architecturally and graphically
3. Implementation of WordPress, Picasa, etc.
4. “Contact Us”, finishing touches
5. Google Analytics and Google Webmaster Tools overviews
6. Wrap-up (maybe?)

Reblog this post [with Zemanta]

Tags: , , , , , , , , , , , ,

Don’t Make Me Think: Book Review Part 2

Jan 19

Posted by Jack Lawson in Book Review, User Interface Design | No Comments

Nice example from the Don Norman school of tho...

Image by padday via Flickr

The first section of the book, called “Guiding Principles”, lays the foundation to begin thinking about usability. It explains the thought process that the end user takes; it’s never what you plan, but with proper design, you can help guide and funnel them in the right direction.

I’ve explained it in another post before: developers often think exactly like their application: we think, “if the user clicks X, they’ll see a menu for Y, which they can click to get to Z. Wire it up!” but in reality, the user isn’t a developer and doesn’t know the application end-to end. They have to muddle their way through the website, and if they’re lucky, they’ll manage to follow your carefully laid track. The only way we can have a hope to get them from X->Y->Z is by making each link, button, or step as clear as possible by developing controls that are self-explanatory in use. Buttons should look clickable, links should stand out from the text, headers should be obvious, and navigation should be clear. The user shouldn’t have to look up help text, experiment, or even pause to think in their quest to get to Z.

In other words, if you think, “we’ll just add explanatory text right here,” You’re Doing It Wrong.
Stay tuned for Part 3!
Part 1

Tags: , ,

Don’t Make Me Think: Book Review Part 1

Jan 14

Posted by Jack Lawson in Book Review, User Interface Design, Web Design | No Comments

Cover of

Cover via Amazon

After a 4-month break in which I was too busy getting ready for, delivering, and caring for our second child (Penelope Rose- November 16, 2009), I return!

I’ve had some pretty strange and interesting things go on in the meantime. The first of which that I will relay on to you will be some thoughts on the fantastic book “Don’t Make Me Think” by the brilliant Steve Krug.

I used to think of usability like it was some horrible sea monster, constraining design and getting in the way of just plain moving forward. But then some space ray hit a neuron in my brain, and suddenly I was interested in usability. “Can you develop fast, beautifully, and usable? Is it all about plain blue underlined links, and Times New Roman, or is usability something else?”

My first stop was another excellent book, The Design of Everyday Things by Donald A. Norman. I started with this much heavier book when I saw it on Jeff Atwood‘s reading list; it’s a more general book that covers design everywhere, whether industrial design, architecture, interface design… it was about the obvious dos and don’ts. I think that even though it was a heavier book, if I did it again I’d still start with it. It explains very well that usability isn’t about killing desig- it’s about making design accessible.

Then, one day when I was browsing around Barnes and Nobles (my wife in the children’s section, me in the computer), I saw in big letters “Don’t Make Me Think.” Having recently finished helping redesign several key areas of our website, all because these specific areas were a little rocky to use, I was intrigued. So, I picked it up… and two hours later, the store started to close while I was leafing through mid-book, my Peppermint Mocha congealed and cold.

There are two key points to Don’t Make Me Think that make it a joy to read: it’s brevity and bluntness, and it’s humor. It’s less than 200 pages, and the entire book could be read in a 4-hour sitting; but the wealth of information contained within it will impact for a lifetime.  I’ll be posting more over the coming weeks pertaining to specific chapters and sections of the book. Yay Usability!

Reblog this post [with Zemanta]

Tags: , ,

Pop-Up Windows Are A Terrible Solution

Aug 19

Posted by Jack in Development, User Interface Design, Web Design | No Comments

Pop-up windows are one of the biggest UI blunders ever. They create seperation from your website, they detract from the main content, and they are far from a ‘seamless’ data entry mechanism.

Let’s start from the beginning. One day, some developer thought to himself, ‘Hey! I want my user to stay on our website, and stay on the page to he maintains state, but also to enter data. How can I do that?’ After a little Javascript tinkering, he created a button / link / something that pops up a window with a form, or with a help section, or something. Fantastic!

But then, some internet advertiser said ‘Hey! I want my consumer to see our ads, all ten of them, even if he moves to different sites.’ So, he added javascript of his own, and the community responded with pop-up blockers. So, internet advertiser went back to normal banners. However, this left the first developer in a bit of a hard place. His website was developed with those pop-ups in mind… so what now?

First, never, ever, ever have the browser pop up a new window in the first place. Ever. There is absolutely no reason for it, and there are easy ways around it that can avoid pop-up blockers totally screwing your user experience: for example, modal windows. They’re an extremely easy mechanism to put in place (you can even use frameworks, like Scriptaculous or components from the Ajax toolkit for .NET), and they get around pop-up blockers. And, not only that- but you don’t have the issue of not being able to send commands to your parent window! In this, it lends itself heavily to Ajax applications, in that you can also update content on the main page after submitting data from the modal. Seamless transitions are the best; make your web app behave like a desktop app. You also know that your user won’t be messing with anything on the parent, out of order with the pop-up. It fits everything in place and creates a nice flow to the website.

So, please, please remove your pop-up windows and stop keeping your users from having to disable pop-up blockers!

Tags: ,