Trend: The Touch Screen
The tipping point was when I had my trusty black Nokia 6300 sitting on the desk at a meeting and Jeff laughed hysterically when he saw that there wasn’t even a cover to the back but instead a piece of tape barely holding the battery in. I was way behind the curve in terms of phone technology to the point of embarrassment, so I finally sprung for a savvy sleek iPhone.
My ‘06 Nokia (yep it was vintage) had very little going for it. No internet (I guess it technically could have, but why would anyone subject themselves to it), no text threads (so you sometimes forgot what the person texting you was even responding about), I don’t think it even had a list of recent calls to easily access. However, what it did have was a tactile interface. At the time, I didn’t mind giving that up at all (it was just the extra data plan holding me back). But now, reflecting back on it all, I wonder if the screen alone is really all that user friendly? There is no doubt that my ability to text while driving has gotten outright dangerous, I keep hitting buttons unintentionally still after quite a many months of having the thing, and the smudges all over the screen are just kind of annoying.
On the one hand it could be that touch technology is young, that it will get more fine tuned. Or maybe its a size issue. The buttons on the screen may need to be just a little bigger. Or maybe I just need to cut my fingernails (they always seem to be getting in the way). On the other hand, maybe this whole touch screen interface is just a fad, and we will all eventually realize that tactile tools are an essential usability feature. In fact, the pogo, marketed for people who have large fingers or just don’t want smudges on their screen, essentially subverts the intent of the touch screen altogether. So my question to you is, do you think the touch screen is the greatest thing since sliced bread or has it failed to live up to your expectations?
“Bag-based? Sack-based? Balloon-based? Balloon-boy-based? There’s no shortage of ways to describe Microsoft Research’s new tactile interface concept, which lets people interact with prods, pokes, massages and squeezes instead of clicks or taps…”
http://gizmodo.com/5407454/microsoft-develops-bag+based-computer-interface-for-poking
Trend: Geometric Layout vs. Logical Layout
All too often I find myself in a room discussing a design layout for a web application or web site when someone suggests moving elements around to “save space”. Unfortunately, because they are focused on screen real estate alone, they forsake usability for geometric efficiency. They attempt to fit elements geometrically, like a game of Tetris, with total disregard for the logical order and relationships of the objects. All that seems to matter is that things are packed as tightly as possible, tossing whitespace, visual hierarchy, and logical arrangement out the window!
It is much better to have a logical, learnable, easy to use layout that takes up more vertical space than to have a tightly packed layout that forces the eye to forage for what it needs each time the product is used. If you’re lucky you can achieve both, but don’t forsake the former for the latter.
-
Vote on this trend:
0 (10 votes)
Loading ... -
Tags: above the fold, geometric fitting, layout, layout efficiency, logical layout, screen real estate, tetris, vertical space
- Categories: Tips, Trends
Hello and welcome to the first ever UItrends tip!
If you are a web designer and upon viewing the source code (Firefox shortcut: Ctrl + U or Internet Explorer longcut: Alt + V + C) of a recent project of yours, you happen to see anything that resembles any of the following tags:
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
- <table> (For layout)
- <td>
- <tr>
- <IFRAME>
- <frame>
- <frameset>
- <hr>
- <br>
- <font face=”Arial” size=”1″>
- <bold>
-
<strong>
OK, this has been removed. Thanks for the feedback!
- <center>
- <map name=”Map”>
- <area shape=”circle” coords=”101,396,82″ href=”#”>
- <b>
Please stop! I know these tags have been your trusty friends that you’ve gotten to know very well over the years and you’re having a hard time leaving them, but what you might not know is they are creating more work for you, slowing development, creating unorganized code, painful website updates, larger file size and slower times for your website visitors. I beg you, please join us here in the modern web design community where CSS and XHTML is your new best friend. I promise you will love them and in return they will honor and cherish you from here until eternity… or maybe just until CSS3 and HTML5 are widely accepted and we rightfully trash the current standards and start the cycle all over again.
Trend: Self Checkout Interfaces – the “Cancel” Menu
Here at UI Trends, we normally cover trends in Web UI’s and occasionally we’ll bring up desktop applications. But we wouldn’t be doing our jobs if we didn’t step outside of the box every once in a while.
With that in mind, I couldn’t help but write about something that has been bugging me for years. I know you’ve seen it too and been annoyed. You’re at the grocery store, and you’re trying to “self checkout”. You swipe your bank card, then low and behold, you’re asked for your PIN. You don’t want to enter a PIN!! You’re trying to earn points on your card. You’ve been saving and saving and saving up these elusive points for YEARS now; only 50,000 more to go and you can finally get that awesome “foot spa”. So why in the world would you want to use your card as a debit card and forgo these precious points?
But there is a way! You may not know it, but there’s an entire world of opportunities, hidden just one click away. It’s a a whole new menu, that leads to a magical land of free magazine subscriptions, $25 gift cards, and George Foreman grills. All you have to do is hit CANCEL… what, you didn’t know that??
It’s sad to say, but no one really expects much ease of use from these Self Checkout Systems. The real problem is that these UI’s are effectively hiding functionality that the merchant would rather not pay for (credit card transactions are usually more expensive to process than a debit card transaction). And even worse, they’re doing it very inconsistently. Some have started actually including a ”Credit” button, but it’s either small and indistinguishable from the number keys on the PIN screen, or you still have to press one more buttons to even see it. Why not just making it more interesting and have the button randomly jump around the screen?
-
Vote on this trend:
-7 (15 votes) Loading ... -
Tags: cancel menu, credit card, debit, interface, pay at the pump, points, rewards, self checkout, ui
- Categories: Trends
Recently I was fortunate enough to interview Eric Meyer on the future of web design in what seems to be turning into an interesting series on this topic (See the first interview with Chris Coyier here).
And for those of you that don’t know who Eric Meyer is, shame on you. Shame. Shame. Shame. I can’t write it any better than An Event Apart, “Eric Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML, CSS, and web standards. Author of Eric Meyer on CSS and More Eric Meyer on CSS (New Riders), Cascading Style Sheets: The Definitive Guide (O’Reilly & Associates), and CSS2.0 Programmer’s Reference (Osborne/McGraw-Hill) as well as numerous articles for the O’Reilly Network, Web Techniques, and Web Review, Eric also created the CSS Browser Compatibility Charts and coordinated the authoring and creation of the W3C’s official CSS Test Suite.” So yeah, he knows a thing or two about web development.
Jeff: There has been a lot of talk and excitement in the web design community about CSS 3 and HTML 5. I find this interesting, mainly because I’m a dork, but it doesn’t seem like most of the major web browsers can fully implement existing agreed upon standards correctly, much less the next generation. Do you have any thoughts on this? Also I know there are bits and pieces of CSS3 and HTML5 that work in some browsers but when should we expect these technologies to go “mainstream?”
Eric: Some of them already have: ‘canvas’, which is part of HTML5, is used quite a bit for a variety of very cool purposes. It’s also possible to use some HTML5 markup right now, either with a little CSS or a little JavaScript or both or even neither, depending on the browser. We might all groan and say, “God, the Browser Wars are back!” but really, that’s not at all the case. Things are soo much better than they used to be that in comparison, this is at most the Browser Mild Disagreements.
Incompatibilities are the only thing we can ever count on in web browsers. The last day of complete browser interoperability was the day before the release of the second web browser. Browser teams don’t coordinate with each other, don’t agree on what to do or not do– and if they did, we’d probably complain that they had formed a monopoly that was unresponsive to our needs.
Jeff: Will we have to resort to some sort of battle royale street fighter kumite with everyone involved to get this done (CSS3 & HTML5 becoming widely accepted)? And if so, do you think Jean Claude Van Damme is a good fit or possibly Steven Seagal might make an appearance?
Eric: Um, sure. Aren’t there any more recent tough guys to throw into the mix?
Jeff: What is the best way (I mean other than physically threatening or brandishing a weapon) to convince people that seem more interested in slapping code together quickly that web standards matter and it’s in their best interest to follow them?
Eric: Leading by example, sharing our experiences, making resources available, and helping when asked. Nobody can be forced to go down the standards path, and frankly I’m not really interested in trying. People will slap together code, and it will mostly work, until the point where they want to do more powerful stuff or they get users with accessibility problems or they just start to realize that what they’re doing is clumsy and bloated and there must be a better way to do it. When that happens, they’re ready to look at what’s been done by others and take advantage of resources and assistance.
It’s sort of a virtual apprentice setup. Those wanting to become craftsmen learn by studying what the craftsmen who preceded them have done and said. It isn’t perfect, but it’s working all right for now. I suspect there may emerge a system of actual, in-person apprenticeship, but it will happen very slowly.
Jeff: Designing a website to be optimized for mobile devices is a hot trend but it seems like Adobe and Apple are currently engaged in some sort of weird macho staring match about how to get Flash on the iPhone. In addition, JavaScript and CSS have (at best) limited functionality for the majority of users with standard traditional cell phones. There seem to be a lot of roadblocks to transferring typical web interactivity to mobile devices, what are your thoughts on the future?
Eric: That one’s a stumper for me, because I’m not sure what the best mobile experiences should be, let alone what we’ll get. There are some things one can do in a desktop browser that just seem really hard to do on a mobile device, like dropdown menus. Maybe those will just never make it to mobiles. Or maybe someone will come up with an interaction pattern that is recognizably a dropdown and yet is perfectly optimized for mobile environments and we’ll all wonder why nobody thought of it sooner.
Jeff: I’m going to skip explaining the part about what web 2.0 is, because quite frankly the word makes me want to smash my head through my computer monitor. What are your thoughts on what the next version of the web will be?
Eric: It’ll be a more powerful version of what we have now, one that we sort of collectively evolve, and we’ll worry about branding it later.
Jeff: Do we go ahead and call that web3.0 or will it be so advanced that we skip directly to web 4.0? If so, who can I sell this domain web4point0.com?
Eric: I’m sure there’s a social media guru out there somewhere who’d love to take that off your hands.
Jeff: The other day I was thinking about when I was first learning how to design websites, I made this really simple hangman game out of JavaScript. I thought it was cool and was quite proud of myself at the time but it always seemed that JavaScript was regarded by web developers (at least the ones I knew) as this wacky weird little language that wasn’t really that powerful. Now it seems like JavaScript is everywhere you look, disguised as ActionScript in Flash/Flex, or playing a vital role in the creation of mashups, etc. Has JavaScript changed or have the attitudes of those developing websites changed more?
Eric: Both. It’s gotten a lot more powerful, and people have started using it to do all kinds of stuff natively in the browser that would’ve been unthinkable even two years ago. AJAX drove a lot of that change in perception, but also things like Google Maps and the various JS-based APIs. People started to realize that no matter what you might think of JS as a language, it can be used to do a lot of cool stuff and it’s pretty much here to stay. My contention of late is that it will be the basis on which the web will advance at a much-accelerated rate, actually shifting the basis of standards development into the hands of the community. We’ll see.
Big thanks to Eric for the interview!
Trend: Page Curl Navigation
submission from guest author John Talton
The page curl has been a Photoshop trick for years now. As Kate wrote previously, the “page curl” or “earmark” is a UI style that can function as a metaphor, implying “turn the page for more”.
Its expensive rendering and lack of dynamic-ability when applying it via a generic template has limited its wide spread use over the years. But as the web increases its bandwidth capabilities and the need for more unique and flashy graphics continues to rise, this cheep-trick is start showing up more and more. In most cases, one of the downfalls of the page curl is that the user does not know where it will take them until they click it, since most implementations don’t contain a label.
And while many websites have used it in the past, its notable that Google is now using it in its Chrome browser, Slashdot.org has adopted it for a sponsor link on their poll, and it’s starting to show up in applications as well, such as Google Maps for the iPhone.
-
Vote on this trend:
+1 (23 votes) Loading ... -
Tags: earmark, google chrome, google maps, metahpor, page curl
- Categories: Trends
Trend: Seldom Used CSS Properties
For a wacky experiment I picked three “random” CSS properties I had never heard of and tried to guess what they were. Why? Mainly because I’m a dork, but perhaps “why not?” is a better question. I later found out that these properties aren’t random at all and could be extremely useful additions to a website if utilized correctly. My guesses are really bad (shocking, I know) but it just goes to show you, regardless of what you think you know about web design or life in general (I pretend to know a lot) there is always room for improvement.
Azimuth
My guess: This sounds like a cheap brand of Scotch to me or some kind of twisted evil Sorcerer in all those vampire movies/tv shows that are really popular right now. In fact, I’m sippin’ a tall glass of Azimuth as I type this, it’s quite refreshing and surprisingly light on the pocketbook. Ahhh!
Answer: Strike One. According to the W3C schools, azimuth is an aural reference that “sets where the sound should come from” with potential values such as “far-left, center, rightwards, etc”
Pitch
My guess: Perhaps someone on the W3C board was making an online baseball game (when people were crazy for steroid fueled homeruns – Go Sammy Sosa!) and tricked everyone else with a vote into thinking we really needed this? This baseball game would be the only documented case of anyone ever using the pitch property ever, it continues today as a testament to the trickery and tomfoolery that went on as the rest of the members swore to never let this happen again.
Answer: Strike Two. Pitch is another aural reference that the W3C schools defines as “specifying the speaking voice” with potential values such as “x-low, normal, and x-high, etc.”
Elevation
My guess: This makes me think of Matt Chips in QA here at NetQoS. He loves this place called “Elevation Burger”, I personally have never been, but industry recognized JavaScript master Jason Graves (aka The GodLikeMouse) thinks it totally sucks and it tastes like “cafeteria food” which makes me laugh. I laugh mainly out of nervousness on this one, you see the problem here is Matt resembles the hulk, he’s enormous and no one will tell him “Elevation Burger” isn’t good because he would probably tear their arms off and beat them to death after bench pressing several small cars. Somehow this CSS property is related to Matt Chips. I’m sure of it.
Answer: Strike Three. Yet again an aural reference, according to the W3C, elevation “sets where the sound should come from” with potential values such as “below, level, lower, etc.”
Conclusion…
You might think these are brand new CSS references for the much hyped up CSS3 or part of the HTML5 wizardry, but the sad fact is these are currently available for use in CSS2 but are rarely used. Specifically these could be used “by blind people, to help users learning to read, to help users who have reading problems, for home entertainment, in the car, and by print-impaired communities.” All of these sound like great ideas to me, is anyone using these properties? Let’s hear it.
To learn more about aural style sheets visit the W3C Schools CSS reference here.
Trend: Disabled States
Using disabled states for buttons, links and other ui components are an important way to provide feedback to the user. Think about a stop light for a minute; if it were always green then the driver would expect that they could drive through causing collisions with cars going the other way. To prevent this, the red light steps in to tell the driver they have to wait. Just like stoplights allow traffic to run more smoothly, the disabled state allow UI interactions to be more efficient—the user knows that they don’t need to waste their time trying to click anything disabled. In addition, it helps hierarchy because applicable actions stand out whereas unapplicable actions push back. Disabling an action communicates important information to the user which, coupled with their interaction with the product, help them to understand how that product works.
For example, when the link button is disabled (shown, below), I infer I have to do something to allow that button to become active: I have to highlight the text before I am allowed to add the link not click the link button and then tell it what text to insert for the link.
Other Examples:
I think disabling components is a must! Vote ‘em up!
-
Vote on this trend:
+29 (29 votes) Loading ... -
Tags: buttons, disable, disabled, disabled buttons, disabled links, disabled states, links, states, visual design
- Categories: Trends
1
comments