Samantha Warren, ON THE TOPIC OF Trends

There is social media popping up everywhere and sucking data out of our heads (and hearts) propelling it into the vast wonderment of The Internets.  We’re bombarded with locations, opinions, emotions, hometowns, and photographs, and even our deepest darkest secrets ... all of which is massively being compiled and sorted.

The web is an immense and wonderful resource that can be tapped for so many purposes; the trick to leveraging it will be establishing interesting and useful ways to navigate it. At one point, I was certain it would be the future of the web.  I have blogged about interactive information design and social media before. It is something that holds a place deep in my heart; however—contrary to my previous blog post—I am beginning to wonder where its place on the web will be.

Visualizations, which are a fantastic marriage of design thinking and badass technology on the web today, can enrich the user experience by creating an environment in which the user physically interacts with data. Invigorating my infatuation with this concept is http://twistori.com, a site that extracts adjectives in Twitter‘s tweets, displays them by color, and allows the user to view tweets grouped by similar feelings. Twistori led me to revisit and rethink Jonathan Harris’  "We Feel Fine," one of the most spectacular blends of social media and interactive information design on the web. 

Continue reading "Data Visualization: Is it the Future of the Internet?"

Leave a comment ( 5 )

Samantha Warren, ON THE TOPIC OF General and Opinions/Reviews and Tips and Tricks and Trends

When I asked Doug, the Viget Designer behind the typography on the Inspire Blog ,why he used Avenir he replied “because it is the greatest font ever”. Doug is not the only one to have such an opinion of the geometric sans-serif typeface, in 2004 Avenir was named one of Typographica’s favorite fonts. When Andy Budd asked Cameron Moll what fonts would he choose if he could only have 6 his first reaction was “ Avenir, Avenir, Avenir. I’ve abused this typeface in both web and print work, and it’s held up to the abuse with flying colors.”.

In French “avenir” means “future”.  This hidden definition makes it a perfect choice for the Viget Inspire Blog because web designers are innovators who are always looking to push the boundaries and limitations of their medium.

Adrien Frutiger designed Avenir in 1988 and is best known for his typefaces Univers and Frutiger. Frutiger explained his reasoning for designing the San-Serif in an interview with Linotype:

“Looking back on more than 40 years of concern with sans serif typefaces, I felt an obligation to design a linear style of sans serif, in the tradition of Erbar™, Futura®, and to a lesser extent Gill Sans®. These have purely constructed characters from which the element of a handwriting movement has been removed. Obviously this could not be an outstanding new creation, but I have tried to make use of the experience and stylistic developments of the 20th century in order to work out an independent alphabet meeting modern typographical needs.”

Avenir has become very popular in web, print, identity, and environmental graphic design. As part of their national identity the Netherlands uses Avenir on their site amsterdam.nl as well as in signage and brochures about their country. You can find Avenir playing a key part in the branding systems of the Reuters and Dulles Fort Worth Airport. On the web a customized version of the font is used in the logo for Shutterfly and the book and medium weights on purevolume.com.

Frutiger describes his typeface as “modern and at the same time humane” but I find Avenir to be an inspiration.

Leave a comment ( 6 )

Peyton Crump, ON THE TOPIC OF Opinions/Reviews and Trends

Cameron Moll’s Authentic Boredom and CSS Mastery are standard reads here at the Lab. If you’re not yet aware, Cameron has a new book coming out in one week entitled Mobile Web Design, which we’re sure will be worth picking up.

Cameron says about it ...

This is the book that ... contains more than 40 full-color screens from several mobile devices (including iPhone).

This is the book that includes what I feel is only the most important and relevant information — roughly one-third the length of most tech books — but, I believe every bit as thorough and helpful as lengthier volumes.

It’s available for immediate download in PDF format on the 28th, and there are some fun giveaways for getting it early.

Cameron’s post
The official site with sneak peek

Leave a comment

Peyton Crump, ON THE TOPIC OF Trends

There continues to be a common misconception among some clients and designers that we must get anything “important” that we want our users to see above the fold.

For those who may not know what “the fold” is, it is basically the part of a web page you can see before having to scroll. The fold varies from user to user based on a number of variables – primarily screen resolution and the combined height of the menus and toolbars at the top of your browser window. While on a friend’s computer not long ago, I opened up her browser and there were nearly four inches worth of menus/toolbars at the top of her window. It was amazing the loss of screen real estate and, in this case, great attention to the fold wouldn’t have mattered. To the point ...

Milissa Tarquini’s post at Boxes and Arrows goes to great length to debunk the myth of the fold and builds off her very real experience and some very factual user data. It doesn’t throw concern for the fold entirely out the window, but brings us down to earth and puts the importance of the fold in proper contemporary perspective.

Some of the points that I found quite interesting are:

The technical considerations of designing for the web can (and do) change quite regularly; but, the human variables change at a slower rate. Sometimes, the human variables change at such a slow rate that we have a hard time believing that it happens. This is happening right now in web design. There is an astonishing amount of disbelief that the users of web pages have learned to scroll and that they do so regularly. Holding on to this disbelief – this myth that users won’t scroll to see anything below the fold – is doing everyone a great disservice, most of all our users ...

Screen performance data and new research indicate that users will scroll to find information and items below the fold. There are established design best practices to ensure that users recognize when a fold exists and that content extends below it ...

Jakob Nielsen wrote about the growing acceptance and understanding of scrolling in 1997, yet 10 years later we are still hearing that users don’t scroll ...

Research debunking this myth is starting to pop up, and a great example of this is the report available on ClickTale.com ...

The most basic rule of thumb (in considering the fold today) is that for every site the user should be able to understand what your site is about by the information presented to them above the fold. If they have to scroll to even discover what the site is, its success is unlikely ...

Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough, your users will read it to the end ...

The biggest lesson to be learned here is that if you use visual cues (such as cut-off images and text) and compelling content, users will scroll to see all of it ...

Other relevant articles that Milissa cites:
Jared Spool’s Utilizing the Cut-off Look to Encourage Users To Scroll
Jakob Nielsen’s Changes in Web Usability Since 1994
ClickTale’s Unfolding the Fold

So, in general, as we continue to overcome the fear of the fold, it appears that our attentions can best be focused toward creating both engaging designs and compelling content that encourage users to explore the page and the site, and that opening our designs up a bit to create some “visual breathing room” might be the alternative medicine that our users need.

Know the trends, but also know when they bend or when they end – the web and users are constantly evolving, and so should our approaches.

Leave a comment ( 1 )

Kara Davis, ON THE TOPIC OF Trends

The Issue

If your organization has ever worked with the government, you have probably heard the term ’Section 508 Compliance.’ If you’ve never tried to be ‘508 compliant’ before, it may sound a bit scary. The reality of the situation is that if your web site uses proper and up-to-date code, you’re probably fairly close. Nevertheless, it will require some extra time and testing to achieve this goal.

What’s important to understand is why you’re making the effort. 508 compliance is a legislative step toward making the internet available and accessible to people with various disabilities, who may use assistive technologies. While most of your audience may be fully sighted, hearing, and able to use a mouse, there are those who aren’t or can’t. The key to accessibility is making sure that all relevant content is communicated to everyone that uses your site and that actions can be completed using only a keyboard.

Target.com: A Case Study

Take Target.com, who was sued last year by the National Federation of the Blind for having an inaccessible website. Two of the main issues with Target’s site were that they weren’t using appropriate alternate (alt) text for images, and that their checkout process required a mouse to make a purchase. Why were these two things such a big deal?

An ‘alt’ tag on a product image should describe any important information that can be gleaned from looking at the image, but isn’t conveyed in the text description. Sighted customers evaluate a product using a combination of what they see and the text they read. Visually impaired customers may use screenreaders to browse a site. Screenreaders would read the ‘alt’ text out loud, along with the corresponding text description, giving the customer a more complete understanding of the product.

As for the mouse, it’s a point-and-click tool that is perfectly useless to someone who can’t see what to click on. A visually impaired user would more likely use a keyboard to tab through options and then use the enter key to select a choice. Customers who didn’t use a mouse couldn’t complete a purchase on Target.com because the ‘Continue Checkout’ button could not be activated using a keyboard (this has since been fixed).

There is some debate over whether Target was technically breaking any law here, and it sounds like they’ve made strides to improve their site. But I think that the suit gives web developers working on non-government sites reason to take pause. In planning their site, Target.com had overlooked a significant audience group. After all, online shopping offers visually impaired customers the opportunity to browse and read (or listen to) full product descriptions that physical tags and labels may not provide. Not to mention the convenience of shopping from home. Taking the extra steps to make sure that their site was accessible from the start could have been a great marketing coup.

A Few Quick Tips

The following tips cover the most common things I run into when building a site. To learn more about implementation, follow the links to visit a tutorial at http://www.jimthatcher.com.

1. Color: Don’t convey important information with color only. Screenreaders or colorblind visitors may not be able to distinguish it from other text or backgrounds.


2. Alternate Text: Designate appropriately descriptive alternate text for important images, especially graphics that include text. Use empty alt tags (alt="") for unimportant images. This signals to most screenreaders that they should be skipped. If an alt tag is simply missing a screenreader may read the filename instead.


3. Links: Do not use ‘click here’ as link text. Instead, use a descriptive phrase. Screenreaders can be set to scan just the links on a web page, so they shouldn’t be entirely dependent on context.


4. Captioning: Offer captions or transcripts for video and audio content.


5. Tables: Use tables only for data, not for layout, and use proper markup to denote row and column headers.


6. Forms: Use proper markup to associate form labels with input fields and make sure that forms can be completed and submitted without the use of a mouse.


7. Markup: Use proper markup to convey standard information to a screenreader. Screenreaders will read the appropriate emphasis into bold and italic phrases if you use the ‘strong’ and ‘em’ tags. Using headings (h1, h2, h4, h4) rather than styles (class="header") will clarify the structure of a page. You can use css (cascading style sheets) to control the appearance of the h header tags.


8. Navigation: Use “skip navigation” links to keep screenreaders from having to read long lists of links every time they go to a new page on the same site.

Being fully accessible or compliant with Section 508 isn’t always feasible, whether you just don’t have the budget or you’re trying out some crazy new technology. But understanding the way assistive technologies work, and using best practices as you build your site ensures that you know exactly what problems you’ve taken care of and which ones you’ll need to address down the road.

Leave a comment ( 1 )