Ben Terrett of Noisy Decent Graphics has written a list of things that describe what “his Internet” is like. From an encounter with a technologically-challenged executive comes an inspiring exercise to get everyone on the same page first.
…I thought it might be a nice idea to get everyone to describe ‘their internet’ at the first meeting of any new client. Like they do at school when the new kids arrive mid term. Get everyone up to the same level. That way, everyone would know the ‘level’ of everyone else and there would be no clangers later on.
The list is not only informative, it’s also prescriptive (in a sort of passive-agressive way!). It addresses the little things clients don’t really take into consideration when they describe what they want for their websites. But the thing is, you’re the expert, so grab the opportunity to teach what thoughtful and usable design is. Some of my personal favorites from the list:
- Not using Flash for anything other than videos
- Giving simplicty and clarity top priority
- Not reinventing the wheel
You may not agree with everything on Ben’s list, but the idea is not just to yell at your client for “not getting it”, but to explain why you’re doing “it” that way. It strengthens the relationship you have with your client, and ensures clear communication pathways in between.
One thing that struck me in Information Architects’ review of the iPad is how they noticed the UI guideline to make applications look like real-world objects:
Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.
It’s a small detail, but it certainly reinforces the type of computing environment the iPad has: more abstracted than the usual PC/Mac/Unix operating systems and its desktop metaphor.
iA is none too pleased with this guideline, however, as the eyecandy enter kitsch territory and fails to solve interaction problems.
Using a book shelf for choosing a book is a consistent metaphor, but does it help you understanding the interface? Does it help in any way? Do you still like the hard to scan bookshelf with after looking at it for the 200th time? What if you have 200 books?
Note: I’m not saying that using quirky metaphors and plastering your app with special effects will kill the perspective to sell your app. Unfortunately the audience for kitsch is a bigger audience than the elitist UID guild. But usually phony design doesn’t have a long life span.
Metaphors should not distract or confuse, they must clarify. Apple and those that design for it love their beautiful interfaces and the metaphors that inspired it, and while attention to detail is highly admired, design abuse via mainstream device iPad, will become rampant. It’s tempting to pull out all the stops, but as with many things in life, exercise restraint.
Here are three little tweaks that go a long way in improving one’s browsing experience and should become default features on every website.
Kottke’s unread posts notification in the title bar
It’s not just web applications like Gmail or Twitter that can enforce the “push” instead of “pull” format that is associated with the real-time web. If you spend a significant amount of time browsing Jason Kottke’s site you’ll probably notice the title bar changing when a new post gets published.
I added a new feature to kottke.org over the weekend: live updating on the home page. If you leave kottke.org open in your browser (with JavaScript on) and I post a new link, the page will display a message urging you to refresh to view some new posts. The page title changes too, so if you have it up in a tab, you can tell at a glance if something’s new. Right now the page checks for new posts every ten minutes, but that could change depending on server load, etc. Thanks to Twitter Search and Tumblr for the inspiration.
Developer hack: Kottke didn’t give details on how he did it, but this script is doing the work.
Infinite scrolling
Paginated websites make digesting content more manageable, but sometimes you just want to consume as much as possible too. Imagine devouring as many Google search results and Flickr images as you can.
Infinite scrolling—at least the hacks mentioned below—load the next page when you’re done browsing the current one. The next and previous page links are still there, so you have both options to choose from.
User hack: install Greasemonkey and the AutoPagerize user script.
Developer hack: use the jQuery plugin or the WordPress plugin.
FFFFOUND!’s keyboard navigation
Don’t underestimate the efficiency of the keyboard. At image-bookmarking site FFFFOUND!, using the keyboard is the best way to get around.
Developer hack: install paging_keys_js.
This comes as a surprise. Aux of Cogent Metal is vehemently against webpages that have narrow layout widths. And I thought web designers are now more worried about the opposite: the wide layouts that whip out the horizontal scrollbars in resolutions narrower than 1024×768.
This is another proof that you can’t guess every possible reaction to a design pattern. In this case Aux would rather have wide layouts because it would mean a larger area to present content. But what can you do about someone just like Aux, but who believes the complete opposite?
more
As much as I wish we’d move on and get Apple off our radar, its decisions have a rippling effect in the industry and the future of various technologies. The next issue on the list? The Web versus App debate. This can be framed more specifically as a Mobile Web vs. Objective-C Web debate in the context of Apple’s mobile landscape, but as early discussions arise, it’s transforming into an interoperability vs. superior user experience debate. Cameron Moll, author of Mobile Web Design, writes:
At one point in time, J2ME (now Java ME) and WAP were the starting points for a discussion on mobile strategy and the web. Then, for a brief period of time, you talked about HTML/CSS. Now, for a growing majority of mobile strategies that don’t require a global presence on widely varying devices, the discussion begins with iPhone. Smart client is now iPhone app, and in many cases, the app is primary to the experience, not secondary to the browser. And iPad app may soon replace iPhone app as the starting point.
Frankly, as the adoption rate of iPhone increases and if iPad follows suit, it will become increasingly difficult to argue in favor of a starting point other than iPhone OS. The NPR iPad app, for one, provides a much more pleasant user experience than NPR.org.
Peter-Paul Koch steps in and plants himself firmly on the interoperability front, maintaining allegiance to the Web:
This is a total no-brainer when we’re talking about games and other entertainment apps. When it comes to complex, graphic games, vendors will opt for superior UX, and once you’ve done that, starting on iPhone OS makes excellent sense.
But if you build an integrated social media client, is superior UX still so important that you can afford to ignore non-iPhones? I don’t think so. I think creators of such apps would do better to create one in web standards so that it runs on all (well, many) devices. There’s stiff competition out there, and the wider your reach, the better chance you have of prevailing.
Meanwhile, Faruk Ates goes the complete opposite: rooting for UX, lamenting the existence of multiple browsers, and emphasizing the need to make a buck. The debate expands further and we see clashing ideologies of democracy vs. walled gardens, free vs. paid business models, and so on. All these further reinforce how Apple’s philosophies go against those of the Web.
With all its new moves, Apple has been targeting all sorts of corporate entities for its own gain: Adobe, Google, the whole porn industry…but now is it also hurting developers? consumers? the Web? itself?
Hostility towards competitors is, I suppose, all part of the game. But this action is also hugely hostile towards developers themselves. The banned development environments offer things that Apple’s Xcode doesn’t. Sometimes it’s just a different choice of language, one that a particular deveoper might feel more comfortable in. But often the advantage is simplification—the use of higher-level programming languages (like Lua, or JavaScript, or C#) and frameworks that take out a lot of the grunt-work of software development (like writing a 3D engine). In turn, developers get quicker development cycles, easier development, fewer bugs, and overall, superior applications. Banning these tools doesn’t just hurt competitors. It hurts developers on Apple’s platform, and in turn hurts the platform itself.
Apple’s done a lot of things to stir the pot, and while such stringent practices have been known to yield revolutionary results, its actions continue to seem awfully ruthless. Choosing a more favorable approach to mobile development could very well be tainted by the company’s values.
I find it very intriguing that Microsoft chose to redesign its new Windows Phone 7 Series interface this way:
The design and layout of 7 Series’ UI (internally called Metro) is really quite original, utilizing what one of the designers (Albert Shum, formerly of Nike) calls an “authentically digital” and “chromeless” experience. What does that mean? Well we can tell you what it doesn’t mean — no shaded icons, no faux 3D or drop shadows, no busy backgrounds (no backgrounds at all), and very little visual flair besides clean typography and transition animations. The whole look is strangely reminiscent of a terminal display (maybe Microsoft is recalling its DOS roots here) — almost Tron-like in its primary color simplicity. To us, it’s rather exciting. This OS looks nothing like anything else on the market, and we think that’s to its advantage. Admittedly, we could stand for a little more information available within single views, and we have yet to see how the phone will handle things like notifications, but the design of the interface is definitely in a class of its own.
Curveball thrown. While the look has been in Zunes for sometime now, the real challenge lies in whether this will take off for mobile phones. I have to commend their bravery for taking this step, going the complete opposite of Apple’s love for rounded corners, gradients, and shadows. It also looks open and airy compared to all the boxes (no matter how rounded) on the iPhone.
It definitely changes the game a bit, and like several others I’m starting to feel like the Apple interface looks dated next to this one. Pretty big deal if you ask me.
This move could backfire. People tend to shy away from minimalism, not to mention it could actually be underdesigned, lacking in visual cues and icons. It falls short of the unified look Apple has built over the years, and I doubt it could start a UI revolution the way OS X did. Would Microsoft even use this for its desktop OS?
We’ll also have to find how it really measures up in real-world testing because the interface alone won’t determine success, but also performance and features (IE and Bing instead of Safari/Mozilla and Google? What apps will it have?). Still, bold is better than half-baked, and in the mobile space this look definitely sets them apart.
A year or so after Google Chrome was first released, it’s now my default browser. While I still use other browsers on a regular basis, Chrome’s speed and minimalism has taken over. Take the omnibox, which merges the address bar and search bar into one. It searches your bookmarks, your recently visited pages, and even detects if the URL you’re typing has its own site search.
Most of these features are available in Firefox, whether by default or as an add-on, but the reason I’m focused on Chrome is that it’s a Google product, and this company can push both its browser and search forward by turbocharging the omnibox the way they’re continually adding new features to Google search.
The Chrome extension Google Quick Scroll, which highlights and jumps to portions of a page where one’s Google search query can be found, is a perfect example of Google search and the Chrome browser working side by side to improve the search—and more importantly, find—experience.
Google’s autocomplete search box is getting more powerful each day, so why not integrate it into Chrome? It probably won’t matter to those who can’t tell the difference between a web browser and a search engine, and use Google as a jump-off point to browsing other sites, but Google can significantly alter the whole searching-browsing experience if it so desires.
One downside would be eliminating the need to visit Google.com itself and contribute to the ad impressions, but that should only happen for quicker, smarter searches such as weather forecasts, currency exchange rates, stock quotes, etc. The fewer clicks, the better.
Take an ordinary blog post, highlight a passage you want to comment on, and have it appear on the comment form without having to scroll all the way down. Or mouseover a comment, then show replies to it as well as all other comments made by that person. That’s all in the spirit of Encouraged Commentary, which is a jQuery-powered script by Jim Jeffers.
Now this, I would say, is what JavaScript was meant to do. Not that fading, zooming, and sliding around are pointless applications of JavaScript. Impressing people is a lot less important compared to making them feel welcome, and that they’re a part of something. In this case, taking part is by quoting text or keeping track of conversations more easily.
Of course, what Jim did may seem more subtle an achievement than what designers and developers try to come up with, or what the ordinary blog visitor would appreciate.
But it’s one more contribution to that great experience. I’ve talked about Issuu last time, so this counts as number two. To that “wow, I had a pleasant time commenting on your blog today, Jim, you’ve made it so easy!” kind of feeling.
I hope that I encounter more examples of this—not just in commentary, but for every other aspect of a website.
I don’t know about you, but I avoid clicking on PDF files like the plague simply because it takes ages for it to load, whether with a browser plugin or a desktop app. Microsoft Office files are almost the same. Why can’t these documents be opened as easily as webpages, anyway?
Enter Issuu, a cool platform that makes viewing digital books, magazines, and other materials much easier—try using it right now—and Smart Look, which is a piece of code you to be placed in your website that embeds various document formats (PDFs, Word documents, Powerpoint presentations) into a Lightbox-meets-Acrobat interface. Only it’s lighter and more portable because the viewer (which you can also find on Issuu itself) is powered by Flash.
What actually happens is that to copy the code, Issuu scans your site for documents to import, under your account (which you’ll have to sign up for). The files on your site stay intact, but copies are stored on their servers under your username. Try Smart Look in action here.
Better browsing experience
Let’s pause for a moment to reflect on the irony in using one Adobe product (Flash) to view another one (PDF). Isn’t that a sign that something is terribly wrong with the way Adobe has been handling PDF files? Will Adobe correct this anytime soon, perhaps through Buzzword, and eventually kill Issuu?
Issuu and Smart Look make sense. To quote TechCrunch, Issuu really wants to kill the document download
. I think that doing so makes for a better browsing experience.
I’m not saying you axe the download option altogether. Just don’t make it the default action because it’s extremely disorienting. Not everybody has the foresight to look at a URL they’re about to load and choose to save it instead of view it. “Do I choose ‘Open’ or ‘Save’? Why is my computer hanging? Why, gawd, why?”
Competition means progress
Scribd and Docstoc. Too clunky.
And as far as inteface design goes, Issuu is a bit more polished than competitors Scribd and Docstoc, which remind me of the PDF viewers I’m avoiding in the first place. Although both have text selection while Issuu does not. Smart Look, however, erases the need for embedding the files in your pages since clicking on a link will do that for you.
Now I don’t want to do any more comparisons among the three because whichever webapp you’re using, I like that there is actual development going on in this space. It’s certainly worlds better than having to open documents in a bloated old program like Acrobat!
Contrary to popular belief, Microsoft is committed to building a better web with with a redesigned MIX Online and its horde of interesting resources, from articles to web development tools to delightful goodies.
We’ve all been guilty of bashing Microsoft for several different reasons, but now is a great time to give it a second (or a hundredth) chance. After all, it’s Christmas!
Articles and Opinions
Let’s start with readable sources on MIX Online, the Articles and Opinions sections. Skim through them and you’ll get a good sense that MIX Online shaping up to be a reputable web design source that’s passionate about web standards, user experience, and best practices. Read Nishant Kothary’s walkthrough of the site redesign, transforming moleskine sketches to a cool community running on their new CMS platform (more on that later).
more
*/
