 |
 |
Apple's White Space on NYTimes.comFriday, January 18. 2008
Sometimes we get requests from clients to "utilize every pixel" on a page. When asked to expand we hear something to the effect of, "There's an empty space in the header. What can we put there? We need to use that space." What they may not realize is that every pixel is being utilized, but that doesn't mean that text or a graphic occupies the space. It's white space! That space provides a balance between the positive (filled) and negative (empty) space on the page, thus creating an aesthetically pleasing experience. And, most importantly, the white space provides a place where users can breathe or rest. Today we are so bombarded with advertisements, that the absence of them is what actually catches our attention.
Here's a great example of an effective use of white space:  Apple is doing a couple of good things here:
Now take a look at nytimes.com on a typical day:  Aaaaaah! A List Apart talks about how white space relates to brand positioning: Designers use whitespace to create a feeling of sophistication and elegance for upscale brands. Coupled with a sensitive use of typography and photography, generous whitespace is seen all over luxury markets. Cosmetics, for example, use extensive whitespace in their marketing material to tell the reader that they are sophisticated, high quality, and generally expensive. See a difference? 
Site o' the Month : Yellowstone ParkWednesday, January 16. 2008 Photography  Great sense of place and activity.  Photo illustrations (not clip art) are well done. Detailed and placed contextually on site. Typography  Display typefaces are used sparingly and appropriately. You wouldn't use this for navigation, but it's appropriate for a few features.  Type varies on the page, adding interest. The smaller typefaces are legible and interesting. All typefaces feel like they belong together; they're part of the same family. Color Palette  Earthy, strong, bold, aged. Personal feel  Users can identify with visitors like themselves. You can speak directly to audience and their interests with photos and quotes. Flash  Used sparingly and appropriately (for maps mostly). Things I would do differently:
Thanks MH Wireframes are Your FriendFriday, January 11. 2008As information architects, we sometimes take wireframes for granted. We work with them every day. We live and breathe boxes and lorem ipsum placeholder text. What we don't often realize is that many people that we work with don't really grasp the concept of wireframing as it relates to web design. Often times, clients would just like to see a page mocked up in Photoshop and sink their teeth into a full-fledged design. Wireframes are an integral part of the IA process because they reinforce the layout and structure of pages that will be designed. Wireframes are typically an end result of the requirements gathering phase of a site project that fall between analysis and design. Wireframes show persistent elements of page layouts (e.g. headers, footers, and navigation elements) as well as dynamic elements such as relevant content, tools and services that are specific to each page. Wireframes are typically created using Visio on the Windows platfrom and Omnigraffle on the Mac platform. They consist of a number of different shapes, lines, and links, and text that show you how a page will be organized. Most wireframes outline the following:
Here is an example of a wireframe from a project with which I'm involved:
You'll notice that there are no design elements applied to this page layout. Wireframes are a useful part of the web development process because they allow you to focus on content and content priorities before the design and development phase starts. Making revisions to wireframes is much less costly than making revisions after the design and development phases have started. It's generally not necessary to wireframe every page. Aside from the home page, we typically wireframe the most important and/or top-level pages involved in developing the site. Wireframes should not dictate visual design. They should focus simply on the layout of information. Aside from wireframing for the purposes of determining layout priorities, wireframes are also a vital part of the development process. We use wireframes to communicate functionality requirements to a developer. Adding notations to certain sections of wireframes help the developer understand what he or she might need to do during development in order to produce the desired look on the front end. Notations for functionality include things like:
Ajax and usabilityWednesday, January 2. 2008
Ajax is showing up more and more online. Not that it’s a new solution – it’s been around for years – but has become increasingly popular in online applications and websites.
What is AJAX? It stands for Asynchronous JavaScript and XHR (XMLHttpRequest). Translation? It updates web content in the page without a full page refresh. This is done by retrieving data from the server and displaying data only in a portion of the page instead of refreshing the entire page. Example 1: Auto Save The best example I can think of to share, given its popularity, is the autosave feature in Gmail. As you’re drafting an email, the email is autosaved into your draft folder, and the ‘save’ button appears deselected, letting you know that the system is saving for you. The page never reloads, yet the user sees a change in display on the page. That’s Ajax.  Example 2: Auto Suggest Ever had a list of search terms auto-populate in a dropdown list as you’re typing in your keyword? Yahoo’s search engine does this currently. Ajax again.  Usability considerations At the Usability Professional Associations’ DC conference in November, John Whalen from Human Factors International spoke about the usability of Ajax, and knowing when to use Ajax as a solution, and when not to. Like any solution, using Ajax gratuitously or incorrectly can decrease usability. I love kayak.com and find that they’re using Ajax really nicely. One exception is when the user changes the flight times filters and the page data refreshes (without reloading) with new data, but very little feedback is provided to the user that this has happened. The user has to look quickly because the visual cue indicating that the data is changing is very easy to miss, displaying for half a second. If the user’s looking elsewhere on the page, they may not realize that their flight options have changed.  Progressive Disclosure I’ve also seen Ajax being used to enable progressive disclosure. This is an interaction design term referring to presenting small amounts of content at a time, upon user prompt, so as to avoid overwhelming the user with too much information or options at a time. Banana Republic, and most of the Gap brands, use this approach on their sites. Users are able to discover additional information about an item - what colors it’s sold in, what sizes remain – and can even add the item to their cart without ever having to reload the page.   Another Ajax example using progressive disclosure is on tripadvisor.com Long lists or sections of content are displayed in a summary view, and the user has the option of discovering the complete and expanded list by clicking on the ‘Click to expand’ prompt. The page never reloads, but additional content is disclosed to the user.  In conclusion At Forum One, we tend to work on the information architecture of content dense sites; I can see a number of ways that Ajax will be a good fit for some of the challenges we approach. The remaining questions I have are around the accessibility of Ajax, and the impact it has on site statistics. If you've got insights on those topics, please share. |
QuicksearchAbout This BlogThe User Experience & Design Blog covers issues that affect the web user's experience, which include information architecture, usability, accessibility, web development and latest trends. It is authored by the User Experience & Design Team at Forum One Communications, a web strategy/technology firm in the Washington DC area. CategoriesArchivesSyndicate This BlogForum One Blogs |
Comments
Wed, 03.09.2008 09:53
FF messages
Sat, 02.08.2008 08:49
Thanks a lot for the help! This technique is really nice.
Wed, 16.07.2008 04:20
Nice article about placing and choosing right matter while desiging a web page.
Sat, 21.06.2008 14:10
very nice
Tue, 03.06.2008 05:13
Hi, Regarding Method #3: You can get rid of the long dashed focus border that shows in Firefox by adding 'overflow: [...]
Tue, 29.04.2008 17:45
Thank you for the assistance. It worked perfectly.
Mon, 31.03.2008 09:38
Ditto what Anna said. Each time a Project Mgr or a biz owner asks me, "when are we doing user testing"? They are [...]
Thu, 27.03.2008 16:35
Your points on the idea that you're testing a site, not the user, are well taken. But I think "user testing" can be [...]