A Better Way

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

Archive for category User Interface Design

Wacom Bamboo Tablet Experience

Feb 18

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


My awesome first tablet design

My awesome first tablet design

(This post was started using my new tablet!)

Well, I suppose that now that I have a tablet, I oughta start practicing. You see, I’ve never been one to have exceptional handwriting skills, so it’s a good thing that I now have a computer that can understand my handwriting better than my 8th-grade Spanish teacher could. I used to get a LOT of zeros on my homework.

(At this point, I’m back to my keyboard because my hand began cramping up. I tried, at least… Typing at 90WPM  on my keyboard is superior to writing using a plastic pen on a mat.)

I’ve long dreamed of owning a graphics tablet, for quick mockups (I included my first here. Creative Commons license, feel free to derive from its awesomeness.) I picked up the Wacom Pen & Touch. Three days in, it has been fun to play with; while it hasn’t been 100% everything that I ever imagined it would be, I think that it may be more of a learning curve issue rather than an issue with the technology itself. I’m used to using a mouse that I have to throw all over a mousepad, not a pen and a tablet that maps 1:1 with my monitor (originally, it mapped to both monitors before I turned off the second monitor in the tablet settings.)

One of the troubles I was having was that it seemed somewhat laggy when I was using my pen on Windows 7 with Photoshop CS3. I noticed mostly that when I was writing, I couldn’t add small details well (look at how crazy all of the lines in my As are); it would sort of stick and think it was supposed to pull up some kind of command menu. I’d like to blame it on myself, as a user error… but it isn’t at all obvious how I fix that issue, if it is one.

Regardless, I’m going to soldier on and try a few more mockups before passing more severe judgement. There are probably some hidden settings somewhere to fix; and once I have those figured out, I’ll post a follow-up on how I did it. Hopefully I do it. Don’t crush my dreams, Wacom.

Tags: , ,

Neflaria V2: HTML 5, jQuery 1.4.1

Jan 26

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

Yay! I love jQuery! I love HTML html 5! I love CSS 3!

And, I’ve decided that Neflaria, Version 2, will be my playground.

Neflaria, for the unacquainted, is the online game that my friend and I inherited a couple years ago. You make a character, you log in, and you fight monsters and chat with other players; while there’s not a whole lot to the game, it has been around for about 10 years, and as such, has a lot of character. And a lot of characters. I mean that endearingly. (Hi, Chris)

However, to a lot of the players, and definitely to me, its 2001-era look is a little stale. Its 12px Times New Roman on 100×100 pixel repeating background. Another word might be “dated.” The server-side database and file structure is a little crazy and unorganized, and it is time for an upgrade. So, here’s where Neflaria version 2 comes in.

One of the decisions we made was to move forward and to use jQuery 1.4.1, which niftily came out just as we were restarting development, to use html 5 (by including the wonderful html 5 shiv [blog post, javascript] for backwards compatibility), and do as much as we can to bring Neflaria into 2010 while at the same time making sure that the people playing the game- who are probably still on IE6- aren’t left out in the dark. Now, I’ve always railed against IE6, and I hate IE6 support more than anything… but by building on a solid base of well-structured html, css, and javascript, we can bend the styles later on to suit IE6’s needs, while maintaining future compatibility. “Graceful Degredation” is the term of the day.

We’re developing Neflaria V2 looking for the future. We’re building our javascript more like a framework and less like a loose collection of methods called “x2″ and “j5″. We’re restructuring the database (aka normalizing the heck out of it) and using JSON served piping hot via short but precise PHP pagelets. It’ll be very client-heavy, assuring server-side performance, and it’ll be extensible for future features. We’re even working on multilingual support, using jQuery to query a language-based XML file by key.

I’m pretty excited. Get a preview here (only the home, terms of service, privacy policy, and “create” and “login” buttons do anything, and it isn’t wired up to the database): http://labs.crimsondeviations.com/NeflariaV2Preview/

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: , ,

On Boating

Sep 23

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

An aircraft carrier is incredibly secure; it’s safe, it’s backed by the government, it’s got infrastructure and it’s built to last.

But everyone still wants to ride the luxury yacht.

Tags: