Designing New Future-Proof Widgets

Just because people are born into the latest fad technology and take it for granted doesn’t make them smarter.

By Chongchen Saelee

I’m sure I blogged about this topic before. But I’m always on the look out for fresh, new innovative web design. If any of you remember what the Yellow Pages were, sometimes browsing the Internet can be a fun as flipping through pages of that. Every now and then there will be an eye-catching ad, but for the most part, a Yellow Pages book is a very practical solution to listing and finding businesses in your residential area (just like the Internet). But with the advent of web pages, you aren’t limited to certain number of words any more or black and white ink (color was special for some pages only), now your imagination can run wild with design.

And certainly graphic designers have tried to push the limits of design with webpages. But they always fell back onto modular design. Modular design was a post I did a while back, you can dig for it.

This post, I want to ramble about widgets. They’ve been known as “controls”, “forms”, “tools”, etc., every software development company has their own name for it. Widget seems to be popular right now.

So what’s my problem with modern widgets? First off, there aren’t that many unique and innovative widgets out there. For the most part, people are still using the ones developed by the pioneers of GUI design.

The digital “button” is ubiquitous and very practical. It’s just a rectangle on the digital screen designated to trigger an response when the user clicks on it. It also has the function of a label, which might give the user instructions. When the button is not labeled, it might be useful to be color-coded, or animated to blink or flash. Quite possibly, the digital button is the most useful widget ever created. Maybe even one day, the existence of physical push buttons will go extinct as modern machines are replaced with flat touch screens utilizing abstract flat buttons or maybe even digital buttons/rectangles for interaction.

Checkboxes are still useful. I can see how they’ve come into existence. Humans created charts and boxes, grids and checkmarks to keep organized. I suppose it’s easier to interact with a checkbox rather than looking at a list of variables stored into an array. The notation would look like a garbled paragraph with curly brackets and commas and semi-colons. Not real user-friendly.

Radio buttons left me clueless when I was taking Software Design in college. Turns out those “widgets” were based on radio buttons in cars from the 50s. Shows how much technology and culture has changed every generation. Heck, do today’s youth and software engineers even know what a radio is? Hasn’t the radio been replaced with MP3s (wow, still going strong) and YouTube? Popular music doesn’t even need to be transmitted over a radio signal anymore, it’s all digital and sent through wires or even ironically Wi-Fi radio, which is still “Internet”. Yikes. But radio buttons are good for comparing variables, and/or selection. So there’s the challenge? What’s a more efficient way of allowing the user to make comparative selections without being confused between checkboxes and radio buttons, and how to use them? You can’t have Venn diagrams. You can’t slap all the options into a pie chart. This, I leave to you young designers.

The Input Textbox is everywhere. I’d say it has come a long way since command line prompt. Still though, it’s amazing how floating text against a black screen (now white screen) can represent so much information and interaction. Words alone written on a printed page don’t seem to come to life. With a digital textbox, you can add characters, erase characters, copy and paste, and just the blinking cursor alone draws a user’s attention (as it was designed). The digital button and digital input box are quite possibly the two most important human/machine interface interaction tools ever created. I don’t think they will be replaced ever (unless everything was done using mind-control; Would humans allow themselves to be compromised to do so? I personally wouldn’t unless I was physically handicapped; There’s something very intrusive about it all.)

So those are the most common controls/widgets, because they are the most ubiquitous and practical.

Now I see these new widgets like sliders and circle dials popping up. To me, it doesn’t make much sense. It’s as though the new generation of software GUI designers are following the same technique as their predecessors and basing it on the technology they grew up with: cassette tape players. It’s almost 20 years since those machines were commonplace. The problem will be just the same as radio buttons as future generations of computer users will be born into a culture where the iconography or symbolism of the widgets don’t make sense.

Think about it this way: if you never used a computer before, it was just floating mystically in the middle of the desert, and you picked it up and was holding it upside down. Let’s make it a tablet, because let’s face it, tablet-like computers are going to become commonplace. So you pick up a glowing tablet and it has the words “Click here to start” blinking dead center on the screen. Unfortunately, you can’t read English. However, the blinking text is a visual cue, hopefully enough for you to touch it to trigger the next event.

So without any knowledge, you just had your first human/machine interaction. Imagine if you had to wipe your fingerprint across the screen or draw a smiley face. It would never dawn on you how to do that if you couldn’t read on-screen instructions or had prior knowledge. If that were the case, it would defeat all purpose for developing the human/machine interface to begin with.

So, I’m going to complain about the circle dial. Yes, there is the circle dial used on mobile apps like the one on old cassette players or your house light switch. It’s a beveled circle with an indented circle for your finger tip. But digital-wise, it’s a big circle with a smaller circle fixed proportionally to the inner rim and circumference of the bigger circle. Okay, so if I never interacted with a circle dial before, I’d have no friggin’ clue how to use it. I never used a rotary phone dial either. So how am I going to interact with these two circles?

Love it or hate it, the circle dial widget.

A simple way is to make the smaller circle blink. That’s enough to possibly get the new user to touch it or click on it (assuming there is a mouse/cursor interface and that they know how to work the mouse). But how do you clue the user to rotate it? It’s one thing for them to have first touch, but to use a dial, you must have constant touching while you rotate it. Do you show arrows? Do you animate it first? See, already, it’s too complicated.

As for limitations of value, a circle only has 359 possible values (0 to 360 degrees, but 0 and 360 are the same placement, therefore are only one slot). What happens when, not likely, you’ll need to present more than 359 options to the user? See, with the dial, you can make it as big as you want pixel-wise, it doesn’t change the principals of geometry.

And this isn’t to be compared to the circular color picker either (which is quite practical). The color picker is pixel-based, but then again, the colors are finite. Also, it’s usually used in conjunction with text boxes to custom mix colors.

Sliders were used heavily in window-based forms, but have made their way into webpages. It’s not built-in (yet), but designers can still work them in using Javascript and such. But are sliders useful? I’d say it depends. In contrast to circle dials, sliders can have an awesome value count. I’m not sure if sliders are pixel-based, but you can assign huge minimum and maximum values to even the smallest drawn sliders, so that makes it quite robust.

Slider widget

The thing, though, is that a slider doesn’t have the precision of an input text box. You can combine the user experience of a slider with a text box, but it’s not efficient if the user can type directly what value they want right into the textbox. A slider then becomes more like a toy that you can play around with. This is why a slider would be useful for a color picker, but not for direct number selection like on a checkout page.

I don’t know whether or not physical sliders even exist anymore on machinery. When was the last time you interacted with a real slider on a machine? What makes you think it’ll be familiar in 5 years from now? I think the slider is more useful the the circle dial, but it might as well go the way of the Dodo (see, even this phrase looses it’s meaning because today’s youth have no idea what a Dodo is so the irony doesn’t make sense to them) just like the scrollbar. Origin might have to do with cutting lines of dope (I could be wrong, it was developed by hippies).

The scrollbar will disappear because everything will be touch-based. The question is, how will you denote that something is scrollable without a scrollbar? This is why there is still a need for arrows or shadows or something to show that a rectangle’s contents extends beyond the visible bounds. I’ve tried to design it myself, but it’s still alienating. You try to make it look more “3-D” but it’s still flat, because it can’t be anything more than 2D. Maybe just have the words “more” or “less”? I dunno. Something like in RPG text boxes. The world is yours to design, young designers. Just make it incredibly simple to understand.

So those are just some of my complaints. As the new technology rolls out, we can’t neglect good GUI design. Doesn’t matter how impressive the hardware is if the software doesn’t make it accessible. So who will come up with the most efficient and practical tools of the future? That’s up to you, those who can see it (the simplicity of it all) and make it a reality. As complicated as technology is, it is mainly used by simple-minded people. If you’re a smart person and you can’t even make the technology easier to use for yourself, well, what does that make you?

I’m not laughing at you. I, too, will admit it when one day I have to do a bee dance to turn on my smartphone.

Tags: , , , , , , , , ,

Comments are closed.