Archive for the 'User Interface & Design' CategoryPage 2 of 2

Three Hypotheses on User Interface Design

If you don’t know who the author if this article is, it’s okay. Just know that this man is behind everything to see here. Yeah, it’s the guy that has a CSS hack named after him… You know someone’s important when you’ve got that happening for you. Now, let me continue to the point of the post.

Three Hypotheses of Human Interface Design

Hypothesis 1: Human interface cognitive load is proportional to the number of clicks/keystrokes/gestures

For me, this hypothesis comes to life through the wonders of Quicksilver and keyboard shortcut. With Quicksilver, my fingers have less reason to leave the keyboard. Maybe one day… we’ll have bitmapped keyboards (iPhone, anybody?)

Hypothesis 2: Human interface cognitive load is inversely proportional to interface latency

In other words: Make the user feel smarter than the computer at all times. Sure, the computer is able to calculate much much better and faster than the average human being… but what it comes down to is making the user feel like he’s in control. Regardless of how fast he can type or not type, the user shouldn’t be the one that’s waiting: The computer should be the servant to the master user, never EVER the other way around.

I hate you, beachballs and hourglasses.

Hypothesis 3: The usability of an interface is inversely geometrically proportional to its cognitive load

The better the interface, the easier it’ll be to use, and people will want to use it. It’s as if the system is calling out to the user, “Use me, and feel better about yourself.”

This is the case with me and Apple products: I want to not only use them, I want to lick them.

Conclusions

What does this all mean?

When designing human computer interfaces (including web UIs):

  • Minimize the number of text fields in your interfaces down to the absolute minimum necessary.
  • Minimize the number of click/keystrokes/gestures necessary to accomplish actions in your interface.
  • Make your interface as responsive as possible - minimize the latency of each and every action a user might take in your interface.

And be prepared for both lots of users, and frequent users.

I’m going to take these points to heart in designing my next web application’s interface. I want things to be customizable, but at the same time, I don’t want to impede the user at all in his or her quest to achieve UI heaven.

Simplify. Simplify. Simplify.

Apple Has Suprised Me Yet Again…

EDIT: Basically,

Wi-Fi: YES Bluetooth: YES Camera: 2 MP Size: 4/8 GB Battery Life: 5 Hours talk/video/browsing, 16 hours for just audio Price: $499 - 4 GB, $599 - 8 GB, with 2 year contract… Availability: Shipping JUNE

Time to start saving.


This device… is almost exactly what I’ve been dreaming about since the first day I had a phone. I was never happy with the phones I’ve had. They’ve always the user interface I was looking for. Even my newest phone, the d807… I was happy with the slider functionality, but the headset volume is quite low. The camera is 1.3 MP, but I keep getting blurry pictures… And man… don’t get me started with music. I always wondered when the heck we would get something that brought together listening to music, watching clips, making calls, sending emails, using the Internet, chatting online, taking pictures… blah blah blah. A do-it-all gadget.

I’ve bought all sorts of gadgets to try and have this happen. I tried to make my iPod into a PDA… I’ve tried making a PDA (my first compaq, then the iPaq, then the Toshiba…) into a music player… I’ve tried making my first MP3 player (what was it called… it used Iomega’s Clik 40 MB disks…) into something more than something that plays music.

And I’ve failed at every step of the way. This is because I’ve only know how to deal with the software that I could mess around with. I could try and hack it… but man, if only there was the hardware to do what I wanted to do.

Then Apple shows up in my life… and now… the iPhone.

Wi-Fi. Bluetooth 2.0. Freaking mini-OS X running on the thing. Not to mention… an extremely improved user interface to deal with phone calls and voice mails. Oh, and a 2 MP camera… and I’m sure it’s built solid. And all the prettiness… three extra sensors to make everyone happy.

Design Philosophy

I haven’t had to design a website template from scratch in quite a while. I guess the last time I did it was in the summer, for the water quality data collection… but that was strictly an exercise in Academia, where I not only focused on the user interface, but also leaving behind documentation and rationale.

Why I bring this up is because I’m working on my newest client, and I’m stuck in the design process. I’m having a hard time really feeling for the company, and designing from it. I also feel like I have a set of rusted tools to work from. But I guess it’s about time to sharpen and shine them up…

From this company, I was basically given a navigational layout and a logo. I know what the company does, but I feel like these things are not enough. Graphics will be provided later, was what I was told.

I really tried to create something “useable” from what I was given. And I ended up creating two templates that basically gets across the logo and the navigational layout the client wanted. However, I still wasn’t feeling it.

Was it because of the skills I’m lacking in creating a design?

Hence, now I’m taking inventory of what I can do, just so I can look back to this entry, and see how much I’ve grown.

In the early days, what I could do was purely <TABLE> (yes… even in caps…) hacks. Attributes colspan and rowspan were my friends, and tables within tables within tables enabled me with the pixel perfect layout. Ah, those were the ignorant days of my youth.

Currently, as I’m rocking out to the tune of CSS, I feel like I’ve definitely grown to appreciate the separation between content and layout, the browser-OS intricacies, and the effort being put forth in managing all these ideal concepts.

Rounded corners are simple. You can use JavaScript through the Nifty Corner Cube (MUCH better than the old nifty corners… update NOW) or you can still get away without using JavaScript. I’ve basically changed my stance on compatibility: as long as the users can get to the info, I’ll be able to sleep at night.

Rounded corners basically leads itself to navigational design. Tabs for the main sections, check. Drop-down menus or scroll overs, check. These are all doable for me.

Two columns. Three columns. Columns within columns. ALL doable with CSS. It’s just that now, while it’s doable, it’s extremely annoying to create something from scratch. I’m still not as well versed in CSS as I should be.

These are all good for a CSS coder. But where are the gradients, the shapes, the abstract “stuff” that only comes from a true Photoshop/GIMP masta? So all I can do is mess around with colors and these design concepts I’ve honed over the past couple of months?