UX Magazine

UX Magazine was created to deliver a central place to discuss the critical disciplines that all enhance user experience.

Signal vs. Noise

Signal vs. Noise is the blog of 37signals. Having built popular web apps like Basecamp, they know a thing or two about user experience.

UX Booth

The UX Booth is a blog by and for the User Experience Community. It’s full of useful articles and resources on usability, user experience, and interaction design.

Adaptive Path Blog

Adaptive Path creates user driven products that deliver great experiences. Their blog allows them to share what they’ve learned with others.

UsabilityPost

The Usability Post is a blog about design – not about what it looks like, but about how it works. The aim of The Usability Post is to provide relevant resources, tips and insights into good design in order to help you make great products.

inspireUX

inspireUX is a blog that posts quotes relating to user experience (UX). Every quote on inspireUX focuses on the impact that user experience has on people, business, or the world. You can even download and print them out on 4

Today we’re giving you the PhotoSpin CS Flash component from, Digicrafts. FotoSpin provides a unique touch and spin control experience to the user. This component normally goes for $49.90, which proves it pays to be a WDL Premium member. If your not a member yet, be sure and sign up.

This component was developed by using the Papervision3D API. It shows a real time three dimension look and I can control the view angle of the album in 3D space.

Preset Manager

The new preset manager allows you to save the settings in to a preset file. You can reuse the preset file in different project. To see a demo, click the image below.

Other Features

• Fully customize spinning photo album
• Touch scroll control
• Prefect flipping effect
• Setup menu by xml
• Loading external images as item
• Item glow effect
• Customize mirror and shadow effect
• Customize item action
• Compatible with Flash CS 3 and Action Script 3.0
• Full API support

Download PhotoSpin CS

About Digicrafts

Digicrafts creates really cool Flash components and other plugins for Adobe products.

Read the original here:
WDL Premium: PhotoSpin CS Flash Component

Headers and footers are always a big concern in web design. These two powerful sections of a website hold great importance and are always something to worry about when designing a page. The header is the first thing the user will see when opening the page, so they must be perfect. The footer, in the other hand, was for a long time something not much appreciated, it was a section of the website almost forgotten. Lately this reality change a bit and we can find amazing footers… filled with cool information, social connections and other stuff. These days headers and footers actually show us some new and cool trends, typography and unique styles.

Here you will see a selection of great examples of headers and footers. Some are colorful, some are minimalist, others are informative and many of them are very creative, so check them out and get some inspiration.

Matt Mullenweg

kulturbanause

Carsonified Events

Komodo Media

Biola Undergrad

Kari Jobe

Mark Forrester

Story Pixel

SimpleBits

Finch

FreelanceSwitch

Squaredeye

Aenemya

Enviramedia

Lionite/portfolio

NewConcept

Roome

Ali Felski

Jayme Blackmon

mosaiko

Edgepoint Church

Branded07

yodiv

Cabana Digital

About the Author

Gisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

Originally posted here:
Headers and Footers that Grab You Coming and Going

By Matt Cronin

Being able to organize data and information is a skill not to be overlooked. The way you organize content and text, generally referred to as copy, has a direct effect on how that content is received by users. You must find a way to organize information so that it is scannable and can be quickly absorbed by the reader. One way to organize information in a clean way is to use data tables. Data tables provide a structured way of showing large amounts of information.

Data tables have been in use since the beginning of Web development. The structure of the table hasn’t changed — and will not change, because, well, it’s a table. But even though the structure has stayed the same, styling has come a long way; and recent tables are just as readable as the early ones.

Common Uses Of Data Tables

Tables make organizing information in a clean and readable way very easy. They can be used to store and show large amounts of information, small amounts of information, static data and even data that is constantly changing.

Because of the chart-like layout of tables, they are extremely useful for making comparisons. Many websites use them to compare products, services and, as mentioned, pricing plans.

The table below on Apple’s website compares all of the MacBooks. The chart contains a large amount of information, yet it is still organized and easy to read through. It is an extremely simple table but looks nice because of the good spacing and borders. Also, notice how images of the laptops are included and important information is bolded. This makes the table very scannable.

Data tables are often used to compare pricing plans. They provide space to show the names of plans, prices and the unique features of each plan. Most often, tables showing pricing plans contain a column for each plan and a row for each feature. Then, inside each cell is a marker indicating whether the plan comes with that specific feature.

Finally, tables often appear on TV network websites to shows schedules. These are a little different than typical tables; the cells are of various sizes due to staggered viewing periods. Other than that, schedule tables follow the exact same structure.

Components Of A Useful Data Table

Although almost every user knows how to make sense of a table, you can still do a few things to take yours to the next level of usability.

Titles + Labels + Data = Data Table
Obviously, a data table consists of columns titles, rows labels and the actual data in the cells. A table should be nothing more and nothing less.

When adding color, you should make the cells contrast with labels and titles. Make the background color for labels and titles different than the one you use for core data. This makes the table much easier to read and eliminates confusion.

The table below by Goplan uses a darker color for column titles and row labels. Notice how reading this table is much easier because of the contrast.

Stick to a Simple Grid
All tables are grids, and they work nicely that way, so why do anything different? Grids are efficient because you can fit a large amount of information in a small area and the viewer is still able to read the content easily.

Use Icons
Icons are an excellent way to cut down on boring text on a page. Icons can also help organize data tables.

The table below makes excellent use of icons and looks very clean. Check marks and crosses are used instead of “Yes” and “No.”

Don’t Leave Blank Spaces
Tables often have cells to which data does not apply. Avoid simply leaving these spaces blank; instead, fill them with an marker, such as a cross (X), icon or, as in the table below, dashes.

This clean table uses three dashes to indicate that data does not apply to a cell; this looks much nicer than leaving an empty space.

Highlight Important Columns and Rows
Many data tables highlight columns and rows that provide particularly important or useful information. In pricing charts, you will often see the best plan highlighted. Take a look at the table below. The most important row — the schedule for the day on which the table is being viewed — is highlighted with a thick border and different background color.

Working With Larger And More Complex Data Tables

So far, we have focused mainly on small and simple data tables, but what about large, complex and data-heavy tables? There are many usability considerations that are specific to large data tables.

Make Columns Movable
Data tables figure prominently in many software applications, both Web-based and installed. Generally, developers will create tables so that columns can be moved and organized in any way desired by the user. Also, applications usually allow users to add and remove columns.

Allow for Reordering of Columns
In tables with a lot of data or data that changes frequently, you should give users the ability to reorder content and cells. The most common variables by which you can order data include date, alphabet and importance.

Provide Search for Large Tables
If data is extensive and the table very large, then a search box should be provided. This will improve the overall usability of large tables and make finding data much faster.

Provide Different Views
If your table contains information with thumbnail images or other visual content, another usability feature you can include is the ability to view that information in different ways. Provide options to view all text, both text and thumbnails or only thumbnails.

Take a look at this Flash-based data table. It provides many of the features that work well with large tables, as mentioned, including search, reordering options and different views.

Styling Data Tables

Styling, or lack of styling for that matter, plays a big part in how a user views a table and absorbs the data. Keep in mind, though, that it’s still only a data table and should not be overloaded with styling. Keeping it simple and readable should be your overall goal. Shadows and artistic borders may work with other elements in a layout, but stay away from them with data tables. Here are a few styling elements that work better for data tables.

Alternate Colors
The most important characteristic of any data table is readability. One way to achieve this is by alternating colors for columns and rows. This makes it easier to read and more scannable.

The data table below is very well laid out. The rows of the table alternate colors, providing a clean, flowing, efficient layout. It has a lot of information but is still readable.

Borders
Separating cells with borders is extremely important. Borders make data much more readable and can eliminate confusion. With a lot of information, data in different cells can seem to blend together as one, but you want to keep them separate.

Ample Spacing
Like borders, spacing between data contributes to usability. In each cell, leave sufficient padding between the border and data. Use at least 20 pixels of space.

Simple Background Colors
Good data tables are all about readability, as we keep saying. Color and readability often go hand and hand. Data tables should always be simple, and one way to be simple is to use simple colors. Avoid using bright, obnoxious background colors that reflect poorly on the data being presented.

Showcase Of Data Tables

As promised, here are some websites that get data tables right.

Quantcast
A clean and basic table with nice fonts and a good color palette.

JukeFly
A large Flash-based data table with many usable features and user-friendly styling.

eWedding
A beautifully styled table that is still clean and readable.

Media Temple
A minimalist table with good use of icons, which provide an effective visual alternative to text.

iTunes
Data tables are everywhere, not just on the web. Applications such as iTunes use data tables.

Mosso
A very nice table, with pleasant colors and icons and alternating background colors for rows.

Zibler
A data table made with Flex that has search, movable columns and reordering options.

Cleartrip
Here is a complex table with a lot of information, but it can still be read with ease. Also note that the table has sorting and ordering options for columns.

Realmac Software
Shopping cart areas are also built on a grid system. Here is one example from Realmac Software.

MT Support
This table makes good use of color and contrast.

CBS
Here is the CBS Network’s schedule.

Long Term Clients
A smooth table with excellent styling, a clean layout and alternating colors.

Media Temple
Another nice table from Media Temple, this one combining visual elements and text in a flowing table with readable data.

Fox
A data grid is used for the schedule on Fox.com. Notice again how the schedule for the current day is highlighted.

Quommunication
Many forum home pages are structured as a table. Here is just one example.

Viget
A well-structured and well-organized table.

Joomla! Forum
Another example of a table on a forum landing page.

About the Author

Matt Cronin is a freelance Web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.

(al)

Visit link:
Data Tables In Modern Web Design