blog

With the launch of the iPhone tomorrow, being heralded by Apple aficionados as the greatest thing since, well, the last thing Apple came out with, devotees are lining up to buy the device designed to replace your phone, music player, toaster over, PDA, PSP, portable video player, Tamagotchi, and perhaps car (teleportation rumored to be available on the $600 version only). At this point, you, the non-profit web professional, might be thinking, “What will my site look like on an iPhone?” Sure, the NY Times looks great in those ads they’re running (personally, I liked the “I’m a Mac, I’m a PC” ones better, but that’s just me), but you’ve got to assume that they picked nytimes.com for a reason. What about your site?

For Mac users, there’s a tool that gives you at least some perspective. It’s called iPhoney, and it’s only available for Mac OS X, but it’s designed to actually just be a miniature version of the Safari viewer. The app is designed by Marketcircle, and it’s free - if you’re on a Mac, go pick it up. It won’t be an exact interpretation, due to the different rules for CSS, Java, Flash and Javascript that iPhones follow, but at the very least, it should help you realize what the lower resolution does to your site.

(more…)

In an interesting post, Web Designer Mike Cherim wonders what damage we can do to the accessibility of Web sites by overdoing it with accessibility features. I’ve been thinking about this myself and find that I agree with Mike when he says that some accessibility features are either so misunderstood, poorly implemented, or unknown that they are probably best steered clear of (Access keys) or used in moderation.

In related news, Web Content Accessibility Guidelines version 2.0 is open for comment. You have until June 29 to submit your comments on the working draft and make your voice heard. There is also a summary of changes since the last draft avialable for you to review.

I’ve been seeing demos of this technology posted around the ‘net for a while now, but Microsoft’s announcement of their new “Surface” technology brings it a lot closer to a consumer market. I initially wanted to post this simply because I thought this technology was really cool, but in thinking about it more I couldn’t help thinking about how this may affect web site designs in the future.

The technology, in a nutshell (see the videos below for a larger bowl of nuts), is a way to allow people to interact directly with “objects” on a table-top computer screen. The new advancement that makes this exciting is “multi-touch” (the ability to touch an object in several places at once, or to touch and interact with multiple objects at once.

As I watch the demos of purchasing and paying for meals at restaurants, sorting and arranging photos, and using maps, I start thinking about how on-line shopping carts, community networking sites, and even the concept of a web site itself could be affected by this kind of technology.

We have already had to adjust how we think about planning and building websites to use newer, dynamic, web technologies. How much further will this re-tooling have to go when users are demanding the ability to remix an entire website to their liking. OK, so that’s pretty extreme and arguably not something that will necessarily result in a friendly user experience, but what about this:

Take a search result of action alerts, draw a circle with your finger around several of the results to group them together by keyword or tag, and then drag them all to where your Wi-Fi phone is sitting on the table-top. The results are automatically cused to create a “related” RSS feed to your phone based on those results. Go to another site and do the same thing. Then call up your contact list on the table-top (pulled from your phone, still just sitting there on the table, not even plugged in to anything) and send your new RSS feed (or selected items from it) to selected people from your contact list.

We’re probably talking about at least 5 years before this stuff is priced for even first-adopter users; currently pricing of around $10,000, and functionality is geared toward businesses like Hotels, Restaurants, and Casinos. I’ve no doubt, though, that some form of this will be in general use in homes as soon as it’s affordable.

Take a look at the videos — Especially the third video on the Microsoft Surface site about paying for meals at a restaurant — and you’ll see what I mean. In this paradigm, devices like phones, PDAs, laptops, credit cards, and even web pages, become simple buckets to move things to and from. The ability to do this simply by placing the objects on the table is what makes it all so amazing.

I guess a big question is, will people want to browse the web on a table-top, or is the vertical screen we all use already going to stay with us? And don’t let’s even start with accessibility issues with these devices! A lot of cool potential, but a lot of potential pitfalls as well. Isn’t that how it usually is?

Jefferson Han:
http://youtube.com/watch?v=RPwaUp4gepU
http://youtube.com/watch?v=UcKqyn-gUbY

Microsoft Official Site:
http://www.microsoft.com/surface/

Popular Mechanics behind the scenes look:
http://www.popularmechanics.com/technology/industry/4217348.html

It’s a question that comes at some point in nearly every design project we do: “Should we stick with 800 pixels as our maximum width when designing the site, or push it up to 1024 pixels?” Unfortunately, there really isn’t a cut-and-dried answer that fits all situations. As a result, the question will generate debate and discussion as if it were the first time it was asked.

It would be great if it were really so simple as to just pick a width and go with it. That’s often what is done, but there are issues that make the question worth taking a deeper look at. Issues that can vary from client to client.

Simply having more space to work with is often a designer’s purpose for suggesting a wider layout, while clients are often motivated by a desire to fit more on each page. Not surprisingly, these two goals can often end up colliding into each other after the design goes into a production environment.

Unfortunately, regardless of your reasons for wanting more space to work with, it’s not simply a design question. There are accessibility and usability questions as well.

Although the percentage of users browsing the web with a screen resolution of 800×600 is decreasing (between 10% and 30% depending on whose stats you’re looking at), those that do so may be using the lower resolution (and even increasing the font size further from there) because they have trouble reading the smaller text-sizes at today’s higher screen resolutions. To not take this group into consideration violates accessibility standards. That’s not to say that we have to stay with 800×600 layouts, it just means that we have to make sure we consider the impact of any layout.

Why choose? Why not use a liquid, or expandable, layout? Liquid layouts have been around forever but continue to make up the minority of sites that we build. Why? There are a few reasons, but with the increased importance of accessibility as well as the growing number of alternative devices (Cell phones, PDAs, smaller laptops, tablet PCs and other devices) used in the U.S. and, even more so, in the developing world, our need for more flexible layouts is increasing.

Liquid layouts are a bit trickier to code, but the issue that usually trips us up is one of control. By this, I mean the perception of control that we often feel we have, or need to have, over the layout of a page.

In the design phase of a project we work with static images depicting how the page should look. Sometimes we pass these static images (or ‘comps’) back and forth for weeks, tweaking and adjusting spacing, color, layout and imagery. Since we are unable to make “fluid” design mock-ups we start to develop a sort of tunnel vision with regard to the design at hand. We start to internalize the structure of the designed page as well as the design elements, and when confronted with the prospect of how the page may stretch and resize when coded with a fluid HTML template, we back quickly away from the lack of control over the design that, to date, we’ve had pixel-perfect control over.

Perhaps the problem stems from the static representations we work with during the design phase. Are there any options?  Do we need to start presenting design comps that show the same layout as it will appear at several different resoltions (including handhelds)?

We need to let go a little bit of our need for absolute control over our page layouts. It’s been said before and should be said often: The web is not print. While this is overstated quite often, it is certainly true.  If people could easily modify layout, font sizes, column counts, etc. in print, then they probably would. Browsing applications and devices give average users exactly that level of control over what they view; And they use it.

Whatever the solution, we will continue to be confronted with the question every time we design a site. And to reduce the question to one of design alone may be causing more problems in the long run than we foresee.

Jakob Nielsen’s Alertbox has stated what I’ve been saying for a long time. Usability methods don’t have to be expensive to be effective.

For everyday design projects, discount usability methods are the best.

While it’s true that an anual usability check-up will be a little more expensive, the usability methods used when designing a site can be fast and inexpensive. This allows you to implement changes while you’re in design mode.

Fast usability methods should be used once you start wireframing. If you’re using Axure you can easily generate a prototype. Have a few people, Nielsen says 5, test it. Make modifications and repeat.

As many of you know, Beaconfire participated in World Usability Day on Nov 14. Our event — Usability Make-over for Nonprofits — saw nineteen nonprofit organizations and some professional information architects. The discussion entailed issues that many nonprofits need to think through when re-designing their Web sites, including the use of brand space, call to action strategy, navigation, and labeling.

We’ve drafted a post-event document available for download here — World Usability Day Post-event Notes (PDF - 718 KB).

Tim Arnold and I, the presenters, are happy to answer any questions you may have:

• Olga Howard — olga.howard [at] beaconfire.com
• Tim Arnold — tim.arnold [at] beaconfire.com

Stay tuned for an upcoming podcast!