ux

Benjamin Jackson, in an excerpt from one of the first Distance essays:

The primary characteristic of unethical games is that they are manipulative, misleading, or both. From a user-experience standpoint, these games display dark patterns, which I define as common design decisions that trick users into doing something against their will. Dark patterns are usually employed to maximize some metric of success, such as email signups, checkouts, or upgrades; they generally test well when they’re released to users.

For example, FarmVille, Tap Fish, and Club Penguin play on deep-rooted psychological impulses to make money from their audiences. They take advantage of gamers’ completion urge by prominently displaying progress bars that encourage leveling up. They randomly time rewards, much like slot machines time payouts to keep players coming back, even when their net gain is negative. And they spread virally by compelling players to constantly post requests to their friends’ walls.

If you require a short url to link to this article, please use http://ignco.de/424

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.

Advertise here with BSA

We’ve partnered up again with our wonderful friends at Next Day Flyers to give away two sets of 1/4-page flyers with free shipping anywhere in the Continental U.S. Each set contains 100 flyers. Flyer printing can be used and customized for a variety of purposes including promoting a club event, marketing a small business and sending out announcements. Read on to see how you can win!

About Next Day Flyers

Next Day Flyers is an offset printing company offering an array of printed materials such as flyers, business cards, postcards, brochures, tickets and more.

They’re not newcomers to the industry. They’ve been in business for 13 years and have over 100,000 satisfied customers.

And with longevity comes experience. They know what their customers are seeking and how to meet the high expectations.

Quality is of utmost importance as Next Day Flyers utilizes a quality checkpoint system which includes 33 steps to ensure the files are printed correctly and ready on time.

And speaking of time, this is a strong point of Next Day Flyers. As the name suggests, they offer next day turnaround time, but as customers asked for a same-day print option, that was added too. So files in by 10:00 AM PST can be printed the same day, while files in by 6:00 PM PST can be printed and ready to pick up or ship the next day.

The Next Day Flyers online ordering system allows for easy file uploads of print ready files. They have file prep guides and templates available to make sure the bleeds, size, color are set to print correctly.

How to Win

To win, simply answer the following question:

• How can these flyers help you and/or your business?

Giveaway Details

This giveaway ends on Monday, January 30, 2012 after which the comments section on this post will be closed and you will no longer be able to leave a comment. Shipping outside of the continental U.S. will incur extra costs. Please leave a valid email address when filling out the comment form so that we can contact you if you have won. Please only comment once. The winners will be randomly selected using a similar method as previous Six Revisions giveaways. The winners will be announced on a separate post. You are advised to subscribe to our RSS feed so that you can be quickly notified when the winners announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to win (described above) may not be published, or may be removed later on.

Related Content

• Create a Slick Business Card Design with Stunning Typography
• 15 Excellent Logo Design Tutorials Using Illustrator
• 20 Useful Websites for Graphic Design Textures and Patterns
• Related categories: Graphic Design and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Aforementioned xScope is now available in a new version.

Also, Nick Disabato, who successfully funded his design book Cadence & Slang using Kickstarter, is at it again. This time, he’s funding Distance, a quarterly publication featuring long-form essays about design and technology. Help funding Distance by clicking here.

If you require a short url to link to this article, please use http://ignco.de/423

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.

When creating a web site for multiple screens and devices, many options need to be explored to determine how to create the best web experience while maintaining a consistent and optimal user experience. With the variety of devices used to view the web already, from phones and desktop computers, to netbooks and tablets, this list will only continue to grow.

With so many options, how do you decide?

The speed of technological developments introduces new devices into the market very frequently. While this can be exciting, new capabilities bring new ways to interact with the user, which can make it more difficult to target all the variations. No two projects are ever the same so it often boils down to which options are right for the current needs.

With a recent project here at Teehan+Lax, we decided to start the discussion using a simple visualization and listed different options to examine the pros and cons for each alternative. It was helpful to see how different selections could target the same devices to decide which option or combination of options would work better for the specific project.

Mobile vs. Desktop

When designing for multiple screens, determine a starting point is key. From there, the design can be scaled up or down, adapting the design and flow accordingly. For many years, the 960 grid was sufficient for targeting the most common resolution sizes. However, with the exponential increase in the use of the web on mobile devices, is it better to approach a mobile first strategy?

There are vast differences in the amount of space available for mobile browsing verses desktop browsing; starting with mobile first forces you to decide what’s most important and can therefore impact the design and content strategy greatly.

When thinking beyond the desktop, another consideration for mobile should include whether to add enhancements such as touch gestures. Although, if touch navigation is available, there should also be an alternate call to action such as a button or link in the event that the touch actions are not immediately discoverable by all users. For example, Twitter’s mobile site for the iPad uses a two-column layout that gives the option of swiping the second column to the left to close it; alternatively you can use the back button.

Responsive Web Design vs. Mobile Web Site

With the introduction of Ethan Marcotte’s responsive web design approach, there’s been a flurry of excitement around the idea that one website could target multiple screens. Fluid websites are nothing new but with the introduction of CSS3 media queries, one site can now adapt gracefully between different resolution sizes and respond accordingly to the context being viewed by the user. Fluid grid designs also allow for a consistent multi-screen experience while maintaining one codebase.

While responsive web design is a great alternative to creating a separate desktop and mobile site, it’s not simply about changing fonts and images to fit smaller or larger screens. This concept requires collaboration between designers and developers to determine how to redistribute the elements. Content strategy is also important to determine how content is shifted or even removed based on how each device is used. Even for a single website, upon the initial creation, three to five mockups will be needed to plan the layout for all the different target resolutions. Also, some additional work is required to ensure that older browsers that don’t support CSS3 will degrade gracefully.

A good resource to see responsive web design in action is http://mediaqueri.es.

The main drawback for creating a separate desktop and mobile site would be the need to maintain two sites’ content and codebase. However, this may still be the best option for content heavy sites that require more simplicity or a layout for mobile users that goes beyond shifting and scaling content. Flickr is a great example of how the desktop site includes the whole kitchen sink while the mobile site simplifies the homepage to a basic search and login, while adding additional content in a tabbed structure. Responsive web techniques wouldn’t be the right approach for developing a desktop and mobile design that’s so distinct such as this.

Web app vs. native apps

If you decide to go with a separate desktop and mobile site, there is yet another option to consider: Native apps or web apps?

Native apps are specific to the device and can access the phone’s resources such as the address book, geolocation, and camera. It also doesn’t need to be connected to the internet, although some features may require a connection. Also, it can gain visibility and be monetized through the phone’s marketplace. However, native apps are built in the specific programming language of the device (Objective-C for iPhones, Java for Android for example), which can make it expensive and time consuming to maintain and develop different apps for various devices in a variety of languages. Native apps also require third party approval by the phone’s store, and can be a long process and in some cases, the app does not get approved.

Web apps run in the phone’s browser under a subdomain, usually m.domain.com or mobile.domain.com. It’s built using standard HTML, CSS and JavaScript so developers can use their existing skills to build the site. Because of this, it’s accessible across devices and doesn’t require any downloads or updates which can result in a wider audience reach. However, the phone’s resources cannot be accessed through a web app and requires connection to the internet.

A third option is to use a combination of the two, a hybrid mobile app. A hybrid app is native, and must be downloaded from an app store or marketplace and runs from the device. However, the application code can be written with HTML, CSS and JavaScript and embedded. Frameworks like PhoneGap can be used to tap into the features accessible in a native app. This option can help bridge the gap between native and web apps.

So what’s the verdict?

Going through so many options may feel overwhelming and guess what? There are no right or wrong answers. There are those who would argue that some techniques are better than others but it really boils down to target audience, target device usage, resources, time and budget. Whatever the final strategy may be, one cannot assume that a multi-screen approach is a thing of the future. It is here, now.

Advertise here with BSA

In web design, the position of design elements and the layout of web pages is everything. So many cool, exciting techniques are available to help us lay out our designs (especially with CSS3 at our disposal) that we often forget that structure is as important as aesthetics.

How do you determine where content should appear, and how can a well-oiled interface increase website readability? This is what we’ll aim to uncover in this article.

We’re going to examine a basic technique that could help you improve your general content flow, and, for lack of a better term, I’m going to call that technique the proximity principle (a portmanteau word that combines "proximity" and "priority").

Communication through Design

Designers already understand that the relationships between objects on a page matter. That’s why when we create a design, we think about visual hierarchy, visual weight, Gestalt psychology, the distinctiveness of important elements and other principles that affect relationships between the various components of a web page. It’s one of the reasons why we tend to get neurotic when it comes to navigation menus, headers or footers.

With so much going on inside the average web page, getting the right content to users in the right place and at the right time is quite an achievement!

If your content isn’t structured suitably, there can be a number of downsides, such as:

• Critical information getting lost or skipped
• User interaction issues like error-proneness or confusion
• Reduced web accessibility for screen readers

The proxority principle, in a nutshell, puts forth the idea that if we can prioritize our content to ensure that the most relevant material is visible and appealing, users will immediately be drawn to it.

This principle asserts that all related, important content should be grouped or joined together whenever possible to allow flow and feedback.

The art of this technique isn’t in the theory, because we often lay out content logically as we write it (headings, subheadings, bullet points, etc.); instead, it’s in the planning stage.

Proxority Principle in Site Navigation

Consider something like a navigation menu. One of the first things we do when producing the information architecture of a site is to organize pages and links into one cohesive structure, after which we add categories or subsections if appropriate.

This technique leads to the development of drop-down menus and other unique browsing aids which help us to further bind content that lacks proxority.

When planning navigation menus, one must pay particularly close attention to the value of pages and their connections, in order to make them a perfect example of proxority in action.

This particular technique works for any style of website, so whether you’re scaling a huge service-heavy but content-light layout (like Amazon) or a content-heavy but feature-light design (like a blog), the technique should be of use.

Better yet, the principle can help you organize your website’s information architecture; the proxority between pages is as important as what exists upon individual pages.

If you find yourself struggling to determine where stuff should be placed, this strategic guide will help you.

Priority: Boost the Best, Weed out the Worst

Many of us know only too well the benefits of prioritizing. The priority we give our content plays a huge part in the perceived value it has upon a page.

A site’s logo/name, for example, is recognizable because of its critically high placement, usually in the top left-hand corner, and it maintains visibility in that position on every page of a website.

A logo should be dominant over all other objects on a page. That’s its proxority.

Rate Each Element’s Value

To identify which pieces of a web page are most critical and important, we need to begin by examining every object in a layout, no matter how small.

Rate them based on their perceived value (according to what your visitors need to know or are likely to want to know) and their functional value (according to what contributions they make to the website, such as functionality or advertisements).

You can do this either by taking a screen capture (or printout) of the entire page and annotating it, or by producing a list of everything that appears on a page. This exercise will help you reassess the value of your website’s content.

Rate images, media, content (at a paragraph level), and everything else according to this numbering system:

Rating	Description of Element
1	The website cannot function without this.
2	This adds benefits but is non-essential.
3	This supplements or reiterates content.
4	This is redundant or wastes space in some other way.

Eliminate Unneeded Elements

When you’ve gone through everything, review the results.

Before we go any further, it’s probably worth mentioning that if you find content, links or objects that are no longer useful or don’t contribute anything, remove them.

Eliminating clutter from an interface is tough, but reductionism improves the general user experience of a website.

For elements rated at a 3, removal might be a bit harsh, so consider rewording or attaching things together to add value.

This website arranges its critical information into clearly defined segments for readability.

After you’ve identified the stuff that can be deleted, merged or moved, look at everything you’ve given a rating of 2. These elements can be the toughest to deal with because you want visitors to benefit from them, but you don’t want to overburden them.

One solution to giving these these needed, but non-essential elements an appropriate proxority is to use progressive disclosure: make content appear on demand with drop-down menus or tooltips, or display it further down the page so that it’s still available but less prominent.

Many websites use progressive disclosure to avoid swamping their users with details.

Proximity: Flow, Feedback and Functionality

We’ve considered the importance of prioritizing every asset on your page, identifying which bits have more sway than others, eliminating the fluff that has accumulated, combining weak material into a strong structure and pushing the less critical data out of the field of vision.

We now need to take all the remaining content and follow through on the second part of the process: to connect everything logically and put it all back together, as if it were a jigsaw puzzle — or a storybook, wherein the plot develops at consecutive points.

You should be left with everything that needs to be on your website, in its most diluted form, with supplementary content either hidden down the page or waiting in tooltips and extensible data boxes.

Rate Important Elements in Relation to Each Other

Go back over everything to which you have assigned ranks of 1 and 2, and rank them again; number everything according to what order you believe readers need to know about it.

If everything ends up where it should end up, it will all make perfect sense when you read it aloud.

The developers and designers behind this website clearly understand the need for organization and feedback.

Redesign

Once you’ve got everything labeled, re-shuffle your source code to match the new reading order. Pay special attention to bits of content that connect to or depend on other pieces of content (such as image captions), and put them as close together as possible.

Then, make the necessary changes to your CSS and JavaScript.

Proxority: Examples and Patterns in Action

Many websites already exhibit what I’d define as high proxority in that they take great care to use techniques that account for both priority (bringing attention to certain elements) and proximity (making reactions happen directly next to or above the objects being interacted with).

Below is a showcase of a few examples of best practices in use. Some we’ve briefly mentioned before, and others are being introduced here. By following similar practices, you can avoid user confusion and increase reading efficiency.

Using progressive disclosure to track the progress of a form:

Informing visitors of errors as they enter data:

Drop-down menus expanding close to the cursor icon:

Input objects disabling once they’ve been submitted:

Progress bars showing loading progress:

Content or light boxes expanding upon user interaction:

Proxority: Origami for the Web

The proxority principle posits that everything you find on a web page can be assigned a value and a place in sequence, in relation to the objects that surround it. This idea has existed since the early days of the Web, but too few designers pay enough attention to it. Think through what is actually needed, where it is needed and when it should appear (as opposed to simply putting all of the content on the screen, in its entirety, in an order that "looks pretty"). The need for such techniques is increasing, especially given the proliferation of handheld devices and the idea of designing with a "mobile-first" philosophy.

If content isn’t worthy of a restrictive mobile layout, why is it needed in the desktop layout?

If you have ten spare minutes, give this simple activity a try. Go through your website and weed out anything that isn’t offering what it should. Make existing objects provide greater value to users (or use less space), and don’t be afraid to reorganize your code and its content to ensure that what’s needed is what appears. Oh, and if you do feel tempted to make actions elicit responses, ensure that users know that your website is responding; after all, you don’t want them clicking "submit" ten times in a row, only to fail.

Related Content

• Quick Overview of User Experience for Web Designers
• Is It Time to Rethink Website Navigation?
• 10 Important UI Design Considerations for Web Apps
• Related categories: Web Design and User Interface

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Advertise here with BSA

Mindomo, a mind mapping application for brainstorming,  has teamed up with us to give out 10 Premium Account subscriptions for one year (worth $65 each). Read on to see how you can win this awesome prize.

About Mindomo

Mindomo is a simple mind mapping application, which can be used individually or in group for creative idea generation, gathering project requirements, building quick site-maps and simple project management.

A designer’s mind map created by Mindomo.

Mindomo allows easy development of a design concept or idea. When you start a web design project, you need to analyze the requirements from your clients, then you need to come up with a proposal which contains proposed solution, terms of agreement, financial points a simple site map and required resources.

Mindomo allows to handle all these intuitively, and when you are done, you can quickly present the whole project settings with Mindomo’s unique Presentation mode.

Mindomo’s Presentation mode.

Some of the things you can do with Mindomo:

• Work on mind maps simultaneously with your clients
• Create full detail sitemaps
• Comment or vote on topics to evaluate
• Show your work to clients with no login required
• Drag and drop pictures

Try Mindomo for Free!

Mindomo has a free account with a limited number of maps so you can evaluate their tool.

Signup now and start using mind maps for your projects.

How to Win

For a chance to win, simply answer the following question in the comments:

• How would you use your subscription to Mindomo if you won?

This giveaway ends on Wednesday, January 25, 2012 after which the comments section on this post will be closed and you will no longer be able to leave a comment. Please leave a valid email address when filling out the comment form so that we can contact you if you have won. Please only comment once. The winners will be randomly selected using a similar method as previous Six Revisions giveaways. The winners will be announced on a separate post. You are advised to subscribe to our RSS feed so that you can be quickly notified when the winners announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to win (described above) may not be published, or may be removed later on.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Over the past few years, we’ve heard from a lot of business and hiring managers that they find it hard to find qualified UX professionals and UX-minded businesspeople to fill vacant jobs in their organizations. We’ve also heard from UX pros who say that, in a world where anyone can claim to be able to “do UX,” it’s hard to stand out from throngs of job seekers on high-volume sites such as Monster.com and Indeed.com.

We’re therefore pleased to announce that we’ve launched a new jobs board exclusively for the UX community. We believe that UX Magazine’s strong reputation in and focus on the UX community, coupled with the very high traffic volume our site receives, will mean our jobs board will be valuable to job seekers and employers alike.

You can find our new jobs board by going to uxmag.com/uxjobs, or by clicking “UX Jobs” in the nav bar from anywhere on UX...read more By UX Magazine Staff

Advertise here with BSA

We had a great giveaway from our friends at PSD2HTML.com, a leading provider of PSD to HTML conversion services. In this post, we’d like to announce the two winners who’ve won themselves $400 and $300 worth of PSD2HTML.com services, as well as three free pages of design to mobile template conversion.

The Winners

The first prize winner receives $400 worth of services and three free pages of design to mobile template conversion, while the second prize winner gets $300 worth of services and three free pages of design to mobile template conversion.

Below are the two winners of our most recent PSD2HTML.com giveaway.

• First prize: Doris
• Second prize: Elle

I’d like to congratulate our two winners! The winners should’ve already received an email from the folks at PSD2HTML.com regarding their prize.

SQL query result that selected two winners at random.

About PSD2HTML.com

PSD2HTML.com is a well-established company with over six years of experience and 50,000 clients (and counting). Their corporate culture and staff are innovative, professional and always on top in modern web development.

Design to Mobile Template is a new option from PSD2HTML.com that provides markup optimized for mobile devices. This service is compatible with iOS, Android, BlackBerry, Firefox Mobile, Opera Mobile and Windows Phone 7.

For more details about the quality service they provide, check out their Examples page and the testimonials of their clients.

Related Content

• 50 Beautiful Retro and Vintage Photoshop Tutorials
• Photoshop Text Effect Tutorials
• 9 Photoshop Editing Tips Web Developers Should Know
• Related categories: Web Design and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Weathermob is a niche social networking service for sharing information about local weather, much as Instagram is a service for sharing pictures. It lets you share what you’re feeling about local weather and see what your friends are saying about theirs. A lot of weather apps allow users to share the weather report with Facebook, Twitter, and so on, but what’s interesting with Weathermob is the manner in which it helps the user put together an engaging story.

This is a great example how to make a utility application engaging. It takes a basic function—viewing a weather report—and helps users create whole stories around local weather to express themselves.

Inviting, Conversational Language

...read more By Sachendra Yadav

During a break in a long research day, I was speaking to a client about a project I was working on to develop iOS standards for a global financial company. Their initial response was, “What, you’re creating something beyond the Apple iOS Standards? What else is there to it?” We ended up having a lengthy discussion about mobile standards—what they are, what they are not, and what they should be. Apple, for instance, does a great job of explaining their touch interaction model and the individual UI elements of iOS, giving examples of when and how they are used. But there’s more to it than that.

From this conversation and other experiences I’ve had with creating standards, I realized that most companies approach standards from a branding perspective. Some may even approach them from...read more By Megan Geyer

Advertise here with BSA

Our friends at Deals2Have — a site providing great discounts on digital products for Mac enthusiasts, creative professionals and startups — is giving away five free deals to five lucky Six Revisions winners. Read on to find out how you can win!

About Deals2Have

Deals2Have, which started in summer of 2011, is a site where you can find big discounts on useful digital products.

For example, Deals2Have is currently running a deal on the Photoshop Styles Mega Pack Collection; normally it costs $59, but they’ve worked with the creators, Design Panoply, to slash the price by 51%, down to only $29!

For the latest deals and news, follow Deals2Have on Twitter, join them on Facebook and subscribe to their RSS feed.

How to Win

To win, follow these two steps:

1. Go to the Deals2Have website and browse their collection of deals.
2. Once you’ve found the deal you’d like to potentially win, write its name and URL in the comments below.

Giveaway Details

This giveaway ends on Tuesday, January 17, 2012 after which the comments section on this post will be closed and you will no longer be able to leave a comment. Please leave a valid email address when filling out the comment form so that we can contact you if you have won. Please only comment once. The winners will be randomly selected using a similar method as previous Six Revisions giveaways. The winners will be announced on a separate post. You are advised to subscribe to our RSS feed so that you can be quickly notified when the winners announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to win (described above) may not be published, or may be removed later on.

Related Content

• Things You Should Do Immediately After Launching a Website
• How to Grow a Community: Insights from Experts
• Launching a Blog Successfully in 15 Days
• Related categories: Website Management and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

For anyone interested in trends in consumer electronics or in this year's Consumer Electronic's Show (CES), the folks at Upstream have put together an interesting trend guide. In their words:

 

---

In advance of this year’s show, we’ve created a trend report. We hope it will serve as a valuable guide for visitors, placing the products, services and experiences they see into the larger context of 5 macro-trends:

QUANTIFIED SELF & M-HEALTH

Personal biometrics and digital enabled behavior analysis will increasingly let consumers discreetly track and manage their lives more effectively.

GESTURAL INTERFACES & AUGMENTED REALITY 

New natural interfaces based on movement will allow more intuitive control of tech, increasing access to information and digital content.

SoLOMo...read more By UX Magazine Staff

When you read about UX research you find lots of emphasis on the planning and structure of the research sessions. Where will you do research at a person's home or in a research facility? Will you go through a recruiting agency or recruit from your own network? Are you looking for target users? Can remote methods play a part?

These questions are all important in developing a solid research plan, but they don't speak much to the actual experience of asking people questions and listening to what they tell you.

You might not hear many people admit that user research can sometimes be boring. Especially when you're doing something like classic usability research, where you have...read more By Juliette Melton

I typically use xScope for all of my on-screen pixel measuring needs, but recently, I’ve often found myseful using SnapRuler instead. It’s very simple, but has three really useful features.

First, hitting shift immediately snaps the measuring rectangle to the nearest visible edge (like the border of a button or window). Second, once you’ve measured something, you can copy the values as CSS or Objective-C code, and directly paste them into your text file. And third, you can easily resize your selection rectangle by single pixels using the arrow keys (something I have to do often when I’m working with a trackpad).

Both xScope and SnapRuler are really nifty, and get along nicely with each other.

If you require a short url to link to this article, please use http://ignco.de/422

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.

Business strategists have long preached the advice, “Adapt or die.” Adaptation is happening in the social pond with a user’s social graphs influencing online and offline decisions. A user’s community is more important than ever. Businesses are mining online communities for valuable consumer information that can influence every phase in their go-to-market cycle, from product innovation to fostering repeat purchases. The definitive tome on the social movement, Groundswell: Winning in a World Transformed by Social Technologies, foretells, “Within a few...read more By Kristin Zibell

As UX designers, we are customer advocates. We design systems, products, and tools that are as beautiful as they are usable. We bend technology into new forms to compensate for gaps in human abilities. We act as a creative buffer between technical complexity, unreliability, and inelegant processes or patterns. We turn bad mechanics into better forms. It’s downright noble.

Products and services are always vulnerable to customer attrition, and users bail for many reasons. Much of UX design and product optimization focuses on acquisition and retention through continual improvements. We focus on usability, elegance, simplicity, functionality, and brand value. Typically, UX designers spend less time improving...read more By Toby Boudreaux

As UX designers, we are customer advocates. We design systems, products, and tools that are as beautiful as they are usable. We bend technology into new forms to compensate for gaps in human abilities. We act as a creative buffer between technical complexity, unreliability, and inelegant processes or patterns. We turn bad mechanics into better forms. It’s downright noble.

Products and services are always vulnerable to customer attrition, and users bail for many reasons. Much of UX design and product optimization focuses on acquisition and retention through continual improvements. We focus on usability, elegance, simplicity, functionality, and brand value. Typically, UX designers spend less time improving...read more By Toby Boudreaux

No matter how motivated we are or how much effort we invest in our work, it doesn't change the fact that we devote a sizable chunk of our careers to working on brands no one truly cares about. In the 25 years that I’ve worked as a designer, brand consultant, and creative director, I've experienced the good, the bad and, most often, the mediocre. There are myriad reasons for mediocrity, but unfortunately, the one that’s the most detrimental is also the most prevalent.

Mediocrity thrives on misalignment—the misalignment of a brand's equity, offer, design, or consumer. If any one of these components is out of whack, the brand suffers mediocre performance. Whether we specialize in graphic design, branding, urban planning, architecture, or user experience, most companies we encounter have two or three elements of their brand that seem to have wandered off.

With so many smart people building and...read more By Nathan Hendricks

Advertise here with BSA

This will be the third year that I’ve sat down in front on my keyboard to write my predictions of things that will shape the Web industry in the coming year.

Before I share my predictions with you for 2012 (which I’ll do in another article), I thought I’d look at my 2011 predictions first and see how they panned out.

Previous Predictions for 2011

At the start of 2011, I wrote about what I thought would be the five things that will shape the Web this year. If you missed that article, you could check it out first to give you a bit of context for the things I’ll be talking about below.

In the article, I predicted these five things would be influential in our industry:

1. Flash
2. Print media
3. Hardware-accelerated browsers
4. Television
5. Location-based services

Let’s talk about those five things, and see if they did, in fact, make an impact this year.

1. Flash

At the start of this year, I said:

"Expect to see something out of Flash this year, whether it’s innovation, a repurposing of the technology, or a significant drop in usage."

I think we’ve mainly seen more of the latter — a drop in usage — than anything else. For instance, as of August this year, jQuery was used on more top websites than Flash.

Even Adobe, the company that owns and develops Flash, announced that they would no longer develop Flash for mobile, opting instead to focus on HTML5.

As 2011 marched on, HTML5 and JavaScript chipped away at Flash’s place on the Web as a facilitator of rich interaction. Designer/developer Aral Balkan, who covered the possible demise of Flash for .net magazine earlier this month, suggests that "if you’re starting a new web project, do not use Flash for it."

2. Print Media

Just how much of an impact have traditional print publication companies — magazines, newspapers, books and so forth — had on the Web?

It does seem that all the experiments and ventures rolled out by print media on the Web are still going strong. The Times, for example, still sits behind a pay wall and appears to be doing fine. The iPad-only Project Magazine I mentioned in my predictions is now rolling out issue 11. Pay walls and premium content are popping up on many sites around the Web, and appear to be a sensible way to monetize content.

The future of traditional print-based media companies moving onto the Web is still very much focused on the tablet market, and iOS5 brought a new angle to this model with the Newsstand feature aimed at digital versions of popular print newspapers and magazines.

More and more people are putting down their newspapers and magazines, opting instead to use their tablets and smartphones. Research by eMarketer showed that Americans spent more time on their mobile devices versus reading newspapers and magazines; over 1 hour per day on mobile devices compared to only 44 minutes on newspapers and magazines.

3. Hardware-Accelerated Browsers

Hardware acceleration has probably had an impact on the Web that most people don’t even realize. Most modern browsers now ship with some kind of acceleration running in the background, but as far as users are concerned, it isn’t really noticed except when used in cutting-edge experiments and demos such as OK Go’s video website for All is not Lost.

However, the run-of-the-mill hardware acceleration was trumped with a new technology called cloud acceleration, which we saw on Amazon Silk, a new web browser for Kindle Fire.

How does a cloud-accelerated web browser work? To reduce the processing power needed on the tablet, Amazon decided to leverage their Amazon Web Services (AWS). The Amazon Silk web browser, for those not familiar with it, offloads the processing required to render web pages and JavaScript to AWS, which compresses the output and shoots it down the interwebs to your Kindle Fire, therefore removing the need to process a lot of stuff on the tablet.

There was a bit of a problem though, as it turned out that it wasn’t quite as fast as everyone hoped; tests showed that web pages loaded more slowly when the cloud-accelerated feature was turned on. This may well change as AWS caches more and more web content. Amazon also promises a speed boost with their next release of the browser.

4. Television

The Internet TV wave isn’t quite upon us yet, and the bottleneck may be Apple. There is talk and rumor of an Apple TV hitting stores in 2012, and consumers and manufacturers may be holding their breath and waiting to see what the technology giant will release before moving into this space.

In the same way that Apple made the tablet market, speculators are saying that Apple TV could revolutionize the way we use our TVs.

We’re also seeing traditional television moving onto the Internet more and more, as shown by the continual growth of web-based services such as iPlayer, Hulu and Netflix (well, at least until Netflix shot themselves in the foot).

Live coverage is also popping up on the Web, where we used to expect them to be on our television sets. YouTube, for example, showed live coverage of the British Royal Wedding. Facebook now streams numerous live events, including UFC fights.

TV shows are increasingly leveraging social media for live discussions with fans; many shows even include hashtags for Twitter.

In my opinion, it seems that the Television and the Internet are on a steady crash course to blend into an integrated, on-demand medium.

5. Location-Based Services

A quick look on your smartphone, and you’ll know that pretty much all apps ask for access to your location data.

One of the most interesting implementations of geolocation I saw this year was from Apple with the Reminders feature on the iPhone. This is how the Reminders feature works: You set your iPhone to remind you to do something (e.g. "get milk from Supermarket X") and when you’re close to the location, it will remind you of a to-do you created for that area.

In fact, you can tell a technology is getting serious when big companies put money behind it: Facebook acquired location-based social network Gowalla for a cool $3 million so that they can improve their own location-based services.

Conclusion

There’s my look back at the five things I thought would shape the Web industry this year. I’ll be back in a later article to have a look at what I think will affect our industry in 2012.

What things will shape the Web in 2012? Share your own predictions in the comments!

Related Content

• The Mythical Paperless World: Why Print Will Stick Around
• Building the 3D Web
• Five Technologies That Will Keep Shaping the Web in 2010
• Related categories: Web Technologies and Web Development

About the Author

Dave Sparks is a web designer and developer working for Armitage Online in the Lake District. He can be found writing about various web topics on his blog at Kamikazemusic.com, twittering as twitter.com/dsparks83 and working on his website analytics project – Stat Share.

Brent Simmons:

«Gamification» is a word and concept invented by idiocrats who confuse humane with manipulative.

There are many problems with «gamification», but I don’t think this is one of them. Essentially, all UI design is about manipulating users, whether you’re coming up with the most easily understood button labels that will get people to click on the correct button, the most readable typeface that will get people to read your essay, or design ideas taken from videogames.

I suspect that «gamification» makes people uncomfortable because it’s associated with Skinner box type games like FarmVille and World of Warcraft, games that can be actively harmful to their players, and manipulate them into doing things that go against their own best interests. But the idea of taking design hints from games itself is value-neutral.

Like all UI design, it can be used for good or evil, to help people or to hurt them.

If you require a short url to link to this article, please use http://ignco.de/421

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.