Tag: kranthi

BuddyPress: One Plugin, Five Communities // WordPress


  

BuddyPress is social networking in a box, the loveable plugin that has people around the world getting social. But using BuddyPress isn’t all about waking up one morning and being struck by the amazing idea of creating the next Facebook. BuddyPress is a tool for creating communities. In fact, if you look at successful implementations of BuddyPress, you’ll see they aren’t Facebook clones, but rather niche groups that have put BuddyPress to work in growing their community. The 1.7 release should make BuddyPress compatible with any WordPress theme, making it even more accessible to potential community builders.

BuddyPress

But people are already doing it successfully. In this article, we’ll look at some of them — five communities that are using BuddyPress, some big, some small, some established, some emerging, some successful and some unsuccessful.

The University: CUNY Academic Commons

a screenshot of the Rockhaq homepage.

Current membership: 3,100

The CUNY Academic Commons is an academic network of graduate students, staff, faculty and administrators across the 24 campuses of the City University of New York. It has two main aims: first, to foster connections between members of CUNY. As a community with 24 campuses across New York City, CUNY is highly distributed. Members might share interests with people who are only a few miles from each other yet never have occasion to meet. Secondly, CUNY aims to “provide a space where members can do work, as individuals or collaboratively, in a way that is flexible, powerful, and visible to a larger public.�

Who Is Behind It?

The Commons was conceived and created by CUNY faculty members. The project director is Matthew K. Gold, a professor of English at NYC College of Technology and CUNY Graduate Center. A committee comprising faculty and staff from across CUNY is responsible for overseeing the website’s strategy and policies.

The development and community teams are responsible for the day-to-day technical maintenance and community building around the website. They are made up of around 10 people, most of whom are CUNY faculty or students. The development team takes care of maintaining the website and fixing bugs. They are all active members of the WordPress community. Boone Gorges is on the core BuddyPress team, and the CUNY Academic Commons has sponsored the development of many public-facing plugins.

Besides the development team, the community facilitators handle the non-technical aspects of community management. They’re responsible for website support and documentation. The community facilitators are the people who foster connections across the website, monitor the network’s activity and write round-up posts. The key to success for the Commons has been the active community team. As developer Boone Gorges says, “No matter how good the tools are, communities don’t form themselves; our facilitators keep up the energy and activity levels on the site, moving the community forward.�

Why BuddyPress?

The Commons was inspired by work done by Jim Groom and his team at the University of Mary Washington (UMW) on the UMW Blogs platform, which is built on WordPress. CUNY is a public university, and thus the team felt that using and supporting free software was important. As it was building the Commons, BuddyPress was nearing its 1.0 release. It was also the only real social-networking plugin for WordPress.

The Commons is a community of academics focused on collaborative work and, as such, has needed a large number of customizations to enable collaborative writing and discussion. It worked to the team’s advantage that BuddyPress was conceptualized from the start as a platform for further development, taking advantage of WordPress’ rich plugin architecture. Had the team used a proprietary platform or even an open-source alternative, it never would have been able to make the improvements it did, such as optimizations to the group forums, the creation of collaborative editing spaces, better filtering of member directories, and support for full email notifications of new activity. BuddyPress’ freedom and flexibility enabled the team to create a platform geared to the needs of its community.

How the Commons Works

The Commons is intended to be a flexible and open space for collaboration. Users can create groups, blogs or wiki pages (or even all three). Membership is restricted to individuals with a cuny.edu email address, which means they haven’t had any issues requiring moderation.

Boone outlines some typical use cases:

  • Interest groups
    Individuals who share a common interest — Spanish language, poetry, games and education, bicycle culture in New York City — may use the group’s infrastructure for conversation and collaboration.
  • Conferences and events
    When a CUNY school is to host an academic conference, a Commons blog may be used to publicize the event, and a group might be established to foster communication about the event.
  • Graduate courses
    Classes held on the Commons use blogs for public-facing writing and use groups for their private discussion forums and other collaborative features.
  • Committee work
    When an administrative committee needs a place to share documents and engage in ongoing discussion about its work, it often turns to Commons groups.
  • Academic journal publications
    Several academic journals have recently found a home on the Commons. For a given journal, a WordPress blog is used for publication, while a private group is used for planning and review.
  • Academic departments
    Several academic departments use Commons groups as a replacement for listservs. They share news and documents with each other and have discussions in the forums.

CUNY Member Profile
Every CUNY member has their own profile.

The Commons’ current theme is a child theme of BuddyPress’ default theme. Recently, the Commons was awarded a grant from the Alfred P. Sloan Foundation to develop the Commons in a Box software package, which will include some of CUNY’s more popular customizations. An important aspect of this will be the default theme, which will be built with the Infinity Theming Engine (by Infinity’s developers, Marshall Sorenson and Bowe Frankema). Later this year, the Commons will have its own theme converted to use the Commons in a Box theme.

There are some challenges to face. For example, CUNY uses MediaWiki for the wiki section of the website. The team managed to create a single sign-on for WordPress and MediaWiki, but managing the link between them — in terms of theming consistently, supporting different interfaces for user input, sharing log-ins and consolidating activity — has been an ongoing challenge.

The biggest challenge, however, has been resources. Boone has this to say:

Our team has a lot of great ideas about how to improve our site and BuddyPress itself, but it’s hard to put all these ideas into motion. Our development team has perhaps more BuddyPress-specific development talent than any other dev team out there — but we still don’t have enough developers with BuddyPress knowledge. (Hint hint: WordPress professionals who are looking for clients would do well to learn BuddyPress. There’s lots of work to be done.)

Customizations and Plugins

CUNY members’ Directory
The CUNY members’ directory

The CUNY Commons team and members of the Commons have developed and co-developed dozens of plugins, many of which are publicly available in WordPress’ plugins repository.

Notable examples include:

CUNY's Plugins
CUNY regularly releases custom plugins.

Some Commons customizations have been integrated into BuddyPress and WordPress. For example, the profile visibility features in BuddyPress 1.6 were built for the Commons, while the AJAX autosuggest for adding users to blogs in WordPress 3.4 is based on one of its patches.

Smaller pieces of functionality have been published by the team on its development blog.

In terms of plugins, the most important ones for CUNY Commons are these:

  • BuddyPress Docs
    This lets users collaborate on writing important documents without resorting to third-party solutions like Google Docs. It provides full version history using WordPress’ post revisions, and it integrates fully with BuddyPress’ activity streams.
  • BuddyPress Group Email Subscription
    This lets group members subscribe to email notifications with fine-grained control. Users can have different subscription settings for each group, ranging from immediate notification of each piece of group activity, all the way down to weekly digests summarizing important activity in all your groups.

Advice

Boone has this piece of advice for people starting out with their own BuddyPress community:

Think outside the BuddyPress box. Out of the box, BuddyPress is a great system, but it doesn’t (and can’t) meet all the needs of every community. So, before you start, you should have a sense of how you want your community members to engage with each other, and then think about the ways in which the software can help them do so. In contrast, don’t let BuddyPress’ default settings dictate the way you set up your community site — BuddyPress’ inherent flexibility and customizability mean that you don’t have to settle for what you get when you first download the software.

Free Pass

I asked each of my interviewees what they would integrate into BuddyPress’ core if they had one free pass. The Commons is in the lucky position of having a lead developer who is one of the core committers to BuddyPress. With respect to CUNY Academic Commons, BuddyPress doesn’t need many more user-facing features, but it does need under-the-hood improvements to make it easier to extend and customize. This has been happening throughout the 1.5 and 1.6 development cycles, which have seen improvements to performance and scaling, as well as additional developer APIs for easy hooking into BuddyPress’ core frameworks. As BuddyPress’ core becomes more stable and lean, the team at CUNY will be able to build even more custom plugins and functionality, which can be used in the Commons and disseminated to the wider community.

The Pilot: Rockhaq

Current membership: 50

Rockhaq

Rockhaq is a music journalism community for schools and colleges. It has just finished a limited pilot and is on the verge of rolling out to other schools in the UK. Its aim is to motivate students to write music reviews, with a view to increasing student engagement and improving literacy skills. The top students in the community have been rewarded with live music missions, and Rockhaq has given away tickets for acts such as Blink 182 and Nicki Minaj and provided interview opportunities with bands that students have wanted to speak with. According to Michelle Dhillon, Rockhaq “merges the virtual and real-life worlds together to create a dynamic uber-social journalism network.�

Chuffed to see @takeabow30 started writing his Blink 182 review straight after last night’s show in Notts. Watch out for it on site soon :)

@rockhaq

@michelledhillon @rockhaq THANKYOU, THANKYOU ONCE AGAIN. You have fulfilled a lifetime dream that will resonate with me for years to come.

@takeabow30

Who Is Behind It?

The brain behind Rockhaq is Michelle Dhillon, a professional journalist and editor. She singlehandedly oversees all community and editorial aspects, including providing lectures and tips on improving writing skills, choosing the top five weekly reviews and the review of the week, and liaising with community members both on an off site.

In addition to Michelle, a team of three Web developers have helped to build and design the community platform and provide support. Michelle is looking to extend Rockhaq into teaching live music photography, so she has enlisted the help of music photographer and teacher Phil Swift.

Why BuddyPress?

Rockhaq User's Profile Showing Achievements
Rockhaq members can unlock achievements that appear in their profile.

I asked Michelle why she chose BuddyPress over other platforms:

I was always going to use the WordPress platform; that was a given. I love this solution because it’s so flexible and puts a lot of power into the hands of the end user to be able to change and adapt the features they want really easily. BuddyPress wasn’t always in my plans, but I always intended to use a gaming plugin, and I was really impressed with Paul Gibbs’ Achievements plugin. This was my main reason for choosing BuddyPress, and I’m so glad I did because it’s a really nifty community package.

Michelle’s primary reason for using BuddyPress was the Achievements plugin, but she also likes that BuddyPress allows you to turn certain social-networking elements off very quickly. This has been a significant help, especially for running a pilot in which the environment needs to be as controlled as possible.

Rockhaq was built by Tammie Lister on a customized version of the BuddyPress default theme. It makes use of music photographer Phil Swift’s photos from live gigs of acts such as The Ting Tings, The Hives, Justice and Kasabian. This gives the platform its own unique online identity. As Michelle says, “The work here has been done so cleverly and intelligently — it looks and feels fantastic, and most importantly, it is us.â€�

Because it is still being piloted, Michelle hasn’t had to do any major customizations. It is important that the features be simple and uncomplicated because the developers want to test the basics of the platform thoroughly. The only alteration they have made is to remove status updates from BuddyPress’ core.

Challenges

Rockhaq Activity Stream
The activity stream is moderated but still fun and interactive.

A very real issue that Michelle has had to tackle is cyber-bullying. This is a big concern in educational environments that use social networking, so Michelle has had to assure teachers and schools that the community is safe and regulated for students. Thus, it needs to be moderated, or at least be closely observed. At the same time, it needs to be fun and allow for interaction, so comments and public messages are permitted.

So far, Rockhaq hasn’t faced any major problems, besides a few members posting immature comments, which were moderated and quickly removed. Part of the ethos behind Rockhaq is “educating young people about how to use social networks in a positive and fruitful way, rather than foster and perpetuate negative behavior that has been generated by unregulated or poorly regulated social networks like Facebook.�

Plugins

  • Achievements
    This has been and continues to be the most important plugin for Rockhaq. It is invaluable in keeping the students motivated.
  • Gravity Forms
    This works for Rockhaq because it is usable and flexible. Michelle uses it for contact forms and mailing list queries and to help users spread the word.
  • Twitter Widget Pro
    Some Twitter plugins don’t work well or refresh properly, but this one does. Twitter is hugely important to Rockhaq because it enables students to stay in touch with what’s going on. The Twitter feed is even more important than Facebook.

Advice

I asked Michelle what advice she would give to someone starting their own BuddyPress community:

Be prepared — for anything! That includes positive as well as negative incidents. We’ve been very excited as ours have been overwhelmingly positive, but you still have to be prepared for users logging on at all hours, adding much more work than you’d anticipated and being obsessed with your community. Also, be prepared to publicize it — we’ve been featured in major local media already, and I didn’t expect that either. You will be working all hours!

Free Pass

Michelle seemed excited by the thought of adding a feature to BuddyPress’ core. “I’m like a kid in a sweet shop when it comes to plugins, and one is never enough,� she says. “However, if you had to ask me, then I would be very biased and say a group blogging feature. This seems to make sense for a social networking plugin that uses WordPress, the mother of all open-source blog networks!�

The Newspaper: My Telegraph

My Telegraph

Current membership: 130,000 active users; 3000 who blog regularly; 5000 – 10,000 daily commenters on The Telegraph

My Telegraph was started in 2006 to provide an online home for readers of British daily newspaper The Telegraph. The team at The Telegraph recognized that people were reading news on all sorts of websites, but that their most loyal readers identified themselves with The Telegraph and valued discussion with like-minded people. The first version of the website was designed so that people could blog in three clicks, but over the years they added more sophisticated functionality, such as profiles and groups, so they moved to BuddyPress.

Who Is Behind It?

My Telegraph has a dedicated developer, core BuddyPress developer Paul Gibbs, and a community manager, Kate Day, both of whom spoke to me for this article. In addition, specialist editorial teams run specific groups. For example, the Books desk looks after the Short Story Club. And a team of moderators monitor all user-generated content on My Telegraph, as well as on the main Telegraph website.

Why BuddyPress?

While various out-of-the-box solutions exist, BuddyPress is the most advanced in functionality. Another important factor in the team’s decision was that BuddyPress has a community of developers that actively enhance the platform and come up with ideas that the folks at The Telegraph might not come up with. A fringe benefit is that, while blogging takes more than three clicks, many people are familiar with WordPress’ user experience.

By implementing BuddyPress, My Telegraph has been able to scale beyond a blogging platform to a platform for general engagement.

How It Works

Telegraphs Short Story Group
Moderators, journalists and even a novelist take care of the different groups.

With a community on that scale, I wanted to know what approach the team takes to moderation. Here’s what Kate has to say:

We try to take a light touch to moderation. My Telegraph is very much our readers’ space — journalists set the agenda elsewhere on our website! Nothing is screened before it goes live, and moderators simply work through a queue of flags that are generated when readers click on the “Reportâ€� buttons. Some of the groups are slightly more structured, with journalists, freelancers and, in one case, a novelist, leading the conversations via a group blog.

Moderation is the biggest challenge the team faces. The team needs to find the right balance between allowing people to enjoy a free-flowing conversation while preventing things from turning nasty. Spam is another issue — My Telegraph ranks high on Google and is a magnet for spammers.

Plugins

Like CUNY Commons, My Telegraph has its own WordPress.org profile page. So far, the team has released the Expire User Passwords plugin, which forces users to change their passwords every 30 days. Paul often looks for things that would be of use to other websites to open source. He plans to release more soon.

My Telegraph runs a lot of bespoke plugins and tweaks, such as the Group Competition plugin and the upcoming Bookshelf feature. Its most useful third-party plugin is BP Group Blogs, which ties together blogs and groups. Unfortunately for Paul, the plugin is quite old and can cause problems when the website is updated.

Advice

Both Paul and Kate had advice for people starting a BuddyPress community.

Here’s Kate’s take, from the community manager’s perspective:

Communities are like gardens. They take time to grow, and they need some care and attention. Don’t expect results straight away, but when relationships start growing between members of your community, the results are fantastic and constantly surprising. We’ve had members create a collaborative eBook, meet up for coffee mornings, even go on holiday together! And I hope a great many more people have enjoyed some really interesting discussions.

And Paul, from the developer’s perspective:

Start small. Launch early with a small piece of your intended functionality, and grow your community as you grow your site. Otherwise, it’s very easy to end up with so much “stuff� on the site that new users aren’t sure what they should be doing.

And make sure you have someone on the site participating with your community regularly and talking to them. You need to encourage your community to grow, as it won’t if it’s left alone by itself.

Free Pass

Paul, like Boone, is a BuddyPress core developer, so he always gives input into which features to integrate in BuddyPress’ core. However, for The Telegraph he would like to add a group management screen to the WordPress admin area. This would be similar to the activity management screen that appeared in BuddyPress 1.6. Dealing with users in groups is something that My Telegraph does a lot. Luckily for Paul, BuddyPress 1.7 will have exactly that.

The Non-Profit: Shift.ms

Shift.ms

Current membership: 3631

Shift.ms is an online social support network for people with multiple sclerosis (MS). Over 2.5 million people (“MSers�) worldwide have this chronic neurological condition. People are most commonly diagnosed with MS in their 20s and 30s. Shift.ms founder George Pepper was diagnosed when he was 22, and at the time he found it difficult to find people his own age who were having a similar experience.

MS is progressive, so newly diagnosed MSers have different needs than those who have been living with it for many years. In 2007, George set up Shift.ms as a peer support network for young MSers.

Who Is Behind It?

Shift.ms is a community-led organization, and all of its members provide the content and decide on its direction. It has two ongoing employees, George himself and a community coordinator, Beki. BuddyPress designer and developer Tammie Lister is responsible for the design and development of the website, and WP Valet takes care of ongoing support and hosting.

Why BuddyPress?

I asked the team members why they chose BuddyPress over other solutions. For them, the strength of BuddyPress lay in the thriving community around it. In addition, a lot of plugins existed, which meant they could extend BuddyPress on a tiny budget.

Shift.ms already had an online magazine that was built using WordPress, so using BuddyPress enabled it to easily integrate its community with that. The particular advantage for Shift.ms, however, was that members could create and update their own profiles.

a screenshot of the Shift.ms activity stream.
Much of the activity takes place in the forum.

Community members hang out mainly in the forum, where they can ask questions about living with the condition that they might not want to ask a health professional or a loved one. While all of the comments are read by George and Beki, moderating them is not usually necessary because the community is good at self-moderation and spots any occasional spam accounts that slip under the radar.

The theme itself is a custom child theme of the BuddyPress default. It has had heavy customization and uses several different custom post types. However, the main challenge has been finding a balance between the expected behavior of the community and what BuddyPress and WordPress can do; these things aren’t always in harmony.

Snippets

I asked Shift.ms if it had any code snippets to share. The one below was written by BuddyPress core developer Paul Gibbs. The team needed to solve an issue in which an external company had provided a video template as a page. Shift.ms wanted the page comments to appear in the stream (they usually don’t).

function shiftms_addpagecomments() {
     return array( 'page', 'post' );
}
add_filter( 'bp_blogs_record_comment_post_types', 'shiftms_addpagecomments' );

Shift.ms needs a range of excerpt sizes, and this snippet lets them achieve that:

function shiftms_string_limit_words($string, $word_limit) {
     $words = explode(' ', $string, ($word_limit + 1));
     if(count($words) > $word_limit)
     array_pop($words);
     return implode(' ', $words);
}

This function is called using:

<?php  $excerpt = get_the_excerpt(); 
     echo shiftms_string_limit_words($excerpt, 20);?>

In some places, opening links in a new window is necessary:

function shiftms_openlinks($text) {
     $return = str_replace('<a href = ', '<a target = "_blank" href = ', $text);
     $return = str_replace('<a target = "_blank" href = "http://shift.ms', '<a href = "http://shift.ms', $return);
     $return = str_replace('<a target = "_blank" href = "#', '<a href = "#', $return);
     $return = str_replace(' target = "_blank">', '>', $return);
     return $return;
}
add_filter('the_content', 'shiftms_openlinks');
add_filter('comment_text', 'shiftms_openlinks');

In addition to BuddyPress, Shift.ms finds Gravity Forms useful because it lets non-technical team members have control of forms.

Advice

I asked Shift.ms if it has any advice for someone starting a BuddyPress community. Here’s what it had to say:

BuddyPress developers are few and far between at the moment, but their number is growing fast. I’d say get someone in who has specific BuddyPress experience; WordPress knowledge is fantastic, but there are a number of significant differences.

Free Pass

For users, George would like to see a map integrated into core so that he can show where all members reside. Developer Tammie Lister would like to see more privacy controls. She’d like to give users more control over what is publicly displayed, which would help them feel safer in these more personal communities.

The One that Got Away: TribLocal

TribLocal

Current membership: 100,000

TribLocal is designed to collect and deliver local news via 88 community websites covering the Chicago suburbs. I spoke to developer Tom Willmot, of Human Made, the development shop behind the website. Many of the visitors show up just to read headlines, check out the police blotter or click through the photo galleries of news and events in their neighborhood. More engaged users sign up for accounts to post their own stories and event listings, which the production staff moderate and consider for the home page. Like any blog, this one has comments, social-media sharing tools, RSS and member profiles. In additional to original reporting and community contributions, TribLocal has an aggregation strategy to highlight interesting local news elsewhere.

The Team

In addition to the development team that handles the technical side of things, the community is run by a team of community producers. The news team writes articles for the various local websites, moderates articles submitted by the local journalists and chooses the best ones for inclusion in the weekly newspaper.

Why BuddyPress?

The TribLocal websites were originally built with a custom solution. When Human Made came on board, the client had already decided to replace its existing solution with WordPress Multisite and BuddyPress. The key element that BuddyPress brought to the table was to put user log-ins and profiles on the front end. BuddyPress provides this out of the box.

How It Works

The community producers review content that is submitted via the website and decide whether to promote it on the home page of the website or run it in the following week’s newspaper via a reverse-publishing system. In addition, producers also monitor the website for things like terms-of-service issues.

Add An Event At TribLocal
Members can add events through the front end of the website.

Members can publish three post types:

  • Stories,
  • Photo galleries,
  • Calendar events.

Events have been the most popular. A home page calendar shows upcoming events, and users can download the ICS file.

TribLocal Events List
Members’ events appear on the home page.

Other features are:

  • A photo section to encourage users to post their photographs. Shots of severe weather in the Chicago area have been particularly popular.
  • A voting system for high school athlete of the month, local volunteer recognition and other initiatives.
  • Members becoming regular contributors, with some having their own official blogs covering areas of local interest.

I asked Tom how the members interact with each other:

As far as member-to-member interaction, we had @mentions, which I think are standard to BuddyPress. While we had open registration, member pages, etc., we didn’t activate the feature for people to friend/follow each other. So, in that sense, maybe it wasn’t a true “social network in a box,� but it was an innovative way to engage people in the news and really unlike anything else in local community journalism.

A key requirement was to have user-generated content. Users needed to be able to act as authors, with the ability to post news, photo galleries and events from the front end. This required extending BuddyPress’ user profiles beyond simply logging in and recreating something resembling WordPress’ back-end functionality for users.

Leaving BuddyPress

Human Made has had issues using BuddyPress, not because of any inherent problem in BuddyPress itself, but because it had more functionality than was needed. The client had preselected BuddyPress, so they were stuck with it. The development team only needed the user log-in and profile features, so a lot of features and associated code were superfluous to the project.

This meant that the website had some performance issues due to the number of queries generated by BuddyPress. The client’s internal system prevented them from using Memcached, so instead they used a combination of Varnish for full-page caching and flat HTML fragment caching for widgets and comments. The heavy customization of BuddyPress caused problems when it came time to upgrade the plugin: BuddyPress changed fundamentally between versions, and the team was unable to update to the latest version.

Advice

Tom has this advice for anyone starting a BuddyPress community:

We would advise them to start with BuddyPress at the outset. We had limitations because the client had already designed the site, which restricted how we were able to approach the development. Ideally, the theme and development would be built to work integrally with BuddyPress, rather than having to adapt existing concepts.

Free Pass

If Tom had one free pass, he’d love to see BuddyPress more closely follow WordPress’ core architecture and APIs.

Conclusion

If there’s one commonality among these successful BuddyPress installations, it’s the people behind them. From Michelle’s passion for music journalism and improving student literacy, to Kate’s desire for a community for Telegraph readers, to the CUNY ethos of providing a collaborative working space for staff and students, to George’s aim to provide support for MS sufferers, these communities were started by passionate people who wanted to create a forum for other passionate people to converse, to work towards a shared goal, or to share advice and support each other. The BuddyPress plugin is wonderful, but the personal passion is what really drives these communities.

Resources

If you’re thinking of starting a community and you’ve got the drive for it, check out some of these resources to help you get started with BuddyPress:

You could also take a trip to the first BuddyCamp, which is happening this October in Vancouver.

(al)


© Siobhan McKeown for Smashing Magazine, 2012.


You Already Know How To Use It // design patterns


  

In the first television advertisement for the iPad, the narrator intoned, “It’s crazy powerful. It’s magical. You already know how to use it.� This was an astonishing claim. Here was a new, market-defining, revolutionary device, unlike anything we had seen before, and we already knew how to use it. And yet, for the most part, the claim was true. How does a company like Apple make such great new things that people already know how to use?

One answer lies in the ability of Apple designers to draw upon patterns that people are familiar with. The interaction medium might be completely new: before the iPhone, few people had used a multitouch screen. But everyone knew how to pinch or stretch something, and this interaction pattern was easily transferrable to the small screen after seeing it done just once. As Alan Cooper writes in About Face, “All idioms must be learned; good idioms need to be learned only once.�

The Role Of Dopamine In Pattern Recognition

Our brains like to find such patterns. We are wired to search for patterns that our past experiences have shown will lead to successful interactions (in love, war, gambling, investing, etc.). Jonah Lehrer, in How We Decide, writes that our brain produces a pleasure-inducing neurochemical, dopamine, when we recognize familiar patterns in the world around us. When we act on these patterns and are successful in whatever we are trying to do, we get an additional burst of this pleasing chemical.

If we think we recognize a pattern but are mistaken, or if the pattern doesn’t behave in the way we expect it to, then we do not get that second infusion of the neurochemical, and we readjust our expectations. Many neuroscientists believe this reward system is one way in which learning takes place. The process creates a self-reinforcing, pleasure-based cycle that encourages us to learn from our mistakes and to become better interpreters of the world around us.

The dopamine reward system produces positive or negative emotions based on our experiences in the world. Lehrer argues that this reverses our age-old understanding of the role of emotions in the decision-making process. Since Plato, the rational mind has been depicted as the charioteer holding the reins on our unruly emotions. What makes humans unique, according to this metaphor, is our ability to use logic and rationality to control our emotions and make rational decisions. Lehrer’s book details recent research in neuroscience that upends this reason-based model of decision-making. Emotions, some of them caused by the dopamine-based reward system, play a central role in our decision-making processes.

Brain
(Image: Sue Clark)

These discoveries in neuroscience provide a strong argument for using design patterns in interaction design. Take the carousel pattern, which is prevalent in desktop, tablet and handheld devices. The Yahoo Design Library has a useful illustration of this design pattern. Content appears to slide in from one side of the panel; items at each end are partially obscured to indicate that more virtual space, and more content, lies outside the carousel pane; arrows appear, when appropriate, to indicate how to get to that additional content. This is a very simple pattern that people can learn after using the feature just once.

New users of Pandora will encounter this carousel pattern almost to the letter, and even if they are encountering it for the first time, they will learn it almost immediately. Then, when they encounter versions of the carousel pattern in other designs, they will recognize it before they even begin to interact with it. Their recognition of the pattern will produce pleasure as the dopamine neurons begin firing. When the user then interacts with the pattern — by clicking the arrow on either end to reveal additional content, for instance — and is successful, then more dopamine is produced, leading to additional feelings of pleasure.

Carousel
Carousel design pattern, via Yahoo Developer Network

Admittedly, neuroscientists have not yet attached functional magnetic resonance imaging machines to users in order to measure their brain’s dopamine production as they experience the carousel (or any other) interaction design pattern. To date, our insight into the brain’s responses to the patterns we encounter in the world is limited to what we can extrapolate to humans from experiments that have been conducted on monkeys and to inferences we can draw from the work of psychologists.

Lehrer’s radar technician’s story

Lehrer tells the story of a radar technician during the first Gulf War who spent several days watching blips that represented fighter aircraft returning to ship from a certain point on the coast of Kuwait. One set of blips in the early morning made the technician feel nervous, and he couldn’t explain why. They looked to him to be just the same as those he had observed hour after hour in days past, but his emotional response to this particular set of early morning blips told him that something was wrong. Acting on little more than this emotional response, he ordered the blips to be shot down — thus saving countless lives: the blips turned out to be enemy missiles en route to destroy Allied ships in the Gulf.

The technician could not explain how he knew they were not just another pair of fighter jets. It was only after much review and the discoveries of a cognitive psychologist who was brought in to review the case that investigators determined that what was different about those blips was where they first appeared on his screen: a little farther from shore than all of the other blips. He couldn’t tell at the time that this is what made them different, but subconsciously his brain detected a change in the pattern that he had been observing for hours. The change in pattern caused an emotional and somatic response of panic and anxiety and caused him, despite his reason, to order the blips to be destroyed.

The radar technician’s story (and many others recounted in Lehrer’s book) suggests that our brains observe and act on patterns without our being conscious of it. Recognizable patterns appear, our dopamine neurons fire, our learning is reinforced, and we remain in a state of “flow.� But when a pattern is broken or behaves unexpectedly, all hell breaks loose. Our brain sends out a “prediction error signal�. An area of the brain called the anterior cingulate cortex (ACC) monitors the activity of the prefrontal cortex, and when the ACC detects the absence of activity among dopamine neurons that results from the predicted event not occurring, it sends out this error signal. This results in other chemicals being produced, by the amygdala and the hypothalamus, among other areas, which causes these feelings of panic and anxiety: the heart races, the muscles tense, we become short of breath.

Broken Patterns Cause Panic And Anxiety

Ordinarily, we do not want our users to experience these feelings of panic and anxiety when they use our systems. Yet we know it happens frequently. One reason is that we often present users with interfaces that lack the visual cues to indicate what patterns are being employed. Consider Roku’s Channel Store. When users visit the interface to add a channel to their system, they are confronted with what appears to be a static table of contents. Without prior experience of the carousel pattern, users might interpret this 3 × 4 tabular interface as offering only 12 channels.

In fact, this table does behave according to the carousel pattern. Additional content does lie to the right and left of each row. The content even scrolls vertically as well, but users would never know this from the visual display of the information. Even worse, a new user will learn little about the carousel pattern to apply to their next encounter with it. Ironically, Roku is best known as a Netflix streamer, and Netflix itself applies the carousel pattern expertly to its similar table of contents in its streaming interfaces on game devices such as the Wii. Way back in Design of Everyday Things, Donald Norman defined “visibility� as meaning that “the correct controls are visible, and they convey the correct information.� Neither is the case in the design of Roku’s Channel Store, so users have no way of knowing, without extensive exploration, that the carousel pattern is being employed.

Roku Channel Store
Roku’s Channel Store.

Sometimes, the problem is the reverse: users will think a design pattern is being used when it isn’t. What we recognize as a pattern doesn’t function as we expect; our brains think that something has gone wrong, and the result, again, is anxiety and panic. Take the basic design of a list of items on a smartphone. Users of iOS know this pattern well; it is famously illustrated in Josh Clark’s Tapworthy: Designing Great iPhone Apps. A left-to-right swipe gesture opens a control for deletion, prompting the user to confirm the delete action. This design pattern is easy to learn, but its implementation in other smartphone applications is sporadic and unpredictable. Palm’s webOS email system, for example, uses the swipe gesture for deletion but offers no “Delete� button to confirm the gesture. The email item simply vanishes off the screen. In the messaging application on Palm’s OS, on the other hand, the system does present a deletion control.

iOS Swipe
Swiping left to right to delete in iOS. (Image: Josh Clark)

Early versions of the Android OS didn’t acception the swipe gesture for deletion at all, and it usually interpreted the gesture as a tap by opening the “Edit Itemâ€� page. The Gingerbread update introduced even more inconsistency to the user experience: a right-to-left swipe over a contact, for instance, opens the instant messaging app, and a left-to-right swipe opens the phone app — and initiates a phone call! A user who would naturally expect this gesture to trigger a prompt to delete the contact suddenly finds themselves calling that contact. Talk about panic!

Pattern-Matching Is Harder Than It Sounds

All of us have experienced this feeling of panic to one degree or another. I still feel it when I instinctively move my mouse (in Windows) to the task bar to return to a Web page that I thought I had minimized, when in fact (and for at least three years now) the page I am looking for is open in a different tab, rather than in a minimized, separate window. Interaction habits of mind do not change quickly. And because I use three different Web browsers on at least four different computers, I am constantly unsettled in my search for the “Home� button, which used to be to the left of the URL window in most browsers, but now is all the way on the right in the standard installation of Firefox 12 on both Windows and Mac and doesn’t exist at all in a standard installation of Safari. There is no longer a reliable pattern to determine where I will find the “Home� button on a Web browser. But my brain wants one, feels good when it finds one and rebels (chemically) when it doesn’t.

To be sure, inconsistencies across platforms, browsers and software can have many causes, from patent issues to design legacies. And it is inevitable that interaction designs will change and improve over time. We should not be held to existing patterns just because the human brain prefers it. But we can design according to our developing understanding of how the brain functions. We can employ idioms, such as “pinch,� that are not obvious but are quickly learned. We can progress gradually, building on fundamental elements of existing designs so that new interaction designs retain enough of the old that our brains still recognize them. We can also cautiously introduce new schemes as redundant elements: one doesn’t have to use three- and four-finger swipe gestures on the MacBook Pro’s mousepad, but once one discovers these gestures, they are easy to adopt as natural improvements to the pointer controls and buttons in application interfaces.

In fact, this last approach takes advantage of the brain’s chemistry. The prediction error signal is sent when an expected event does not occur and the result is disappointment or failure. But sometimes, the result of a prediction error is delight, not panic. The expected result did not occur, but something better did. David Rock, in Your Brain at Work, observes that this experience of delight or novelty also produces dopamine and feelings of pleasure. The experience is similar to that of humor: jokes often work because the punchline presents an unexpected twist, a novel outcome. More importantly, jokes work best when the stakes are minimal: no one really gets hurt in a pratfall. When jokes cut too close to the bone, they are painful. We cringe.

New interaction designs can be introduced according to the same principle: if they cause unexpected delight, and no one (and no one’s data) gets hurt, they will induce unexpected pleasure and will be quickly adopted over the legacy designs they are meant to replace.

Further Resources

(al)


© Charles Hannon for Smashing Magazine, 2012.


Mo’ Pixels Mo’ Problems

Mo’ Pixels Mo’ Problems

Mobile devices are shipping with higher and higher PPI, and desktops and laptops are following the trend as well. There’s no avoiding it: High-pixel-density, or “Retina,� displays are now becoming mainstream—and, as you’d expect, our websites are beginning to look a little fuzzy in their backlit glory. But before we go off in the knee-jerk direction of supersizing all our sites, we must first identify the problems ahead and figure out the most responsible way forward—keeping our users in mind first and foremost.

The big problem: gigantic images

In an effort to stay ahead of the curve, many of us have begun the process of making our website designs “@2x,� quietly hoping @3x never becomes a thing. While a @2x image sounds like it would only be twice the number of kilobytes, it’s actually around three to four times larger. As you can see in my @1x vs. @2x demonstration, the end result is that photos or highly detailed compositions easily start bringing these numbers into the megabytes.

“Why is this a problem?� I hear you ask. “Shouldn’t the web be beautiful?� Most definitely. Making the web a better place is probably why we all got into this business. The problem lies in our assumption of bandwidth.

In the wealthiest parts of the world, we treat access to high-speed broadband as a civil right, but for lots of people on this planet, narrow or pay-per-gigabyte bandwidth are real things. “Because it looks pretty� is not a good enough reason to send a 1MB image over 3G—or, god forbid, something like the EDGE network.

Even in our high-bandwidth paradises, you don’t have to look far for examples of constrained bandwidth. A visitor to your website might be using a high-PPI tablet or phone from the comfort of her couch, or from the middle of the Arizona desert. Likewise, those brand-new Retina Macbook Pros could be connected to the internet via Google Fiber, or tethered to a 3G hotspot in an airport. We must be careful about our assumptions regarding pixels and bandwidth.

Failed paths: JavaScript

I’ll just use JavaScript.

— Everyone ever

JavaScript has solved a lot of our past problems, so it’s human nature to beseech her to save us again. However, most solutions fall short and end up penalizing users with what is commonly referred to as the “double download.�

Mat Marquis explained this, but it’s worth reiterating that in their quest for speed and making the web faster, browsers have begun prefetching all the images in a document before JavaScript has access and can make any changes.

Because of this, solutions where high-resolution capabilities are detected and a new image source is injected actually cause the browser to fetch two images, forcing high-resolution users to wait for both sets of images to download. This double download may not seem overly penalizing for a single image, but imagine scaling it to a photo gallery with 100 images per page. Ouch.

Other attempts exist, such as bandwidth detection, cookie setting, server-side detection, or a mixture of all three. As much as I’d like robots to solve my problems, these solutions have a higher barrier to entry for your average web developer. The major pain point with all of them is that they introduce server/cookie dependencies, which have been historically troublesome.

We need a purely front-end solution to high resolution images.

Sound familiar? That’s because high-resolution images and responsive images actually come back to the same root problem: How do we serve different images to different devices and contexts using the same HTML tag?

The solution: good ol’ fashioned progressive enhancement

Those of us involved in CSS and Web Standards groups are well acquainted with the concept of progressive enhancement. It’s important we stick to our collective guns on this. Pixels, whether in terms of device real estate or device density, should be treated as an enhancement or feature that some browsers have and others do not. Build a strong baseline of support, then optimize as necessary. In fact, learning how to properly construct a progressively enhanced website can save you (and your clients) lots of time down the line.

Here are the rules of the road that my colleagues at Paravel and I have been following as we navigate this tangled web of high-density images:

  • Use CSS and web type whenever possible
  • Use SVG and icon fonts whenever applicable
  • Picturefill raster graphics

Let’s talk a bit about each.

CSS and web fonts

CSS3 allows us to replicate richer visual effects in the browser with very little effort, and the explosion of high-quality web fonts allows us to build sites on a basis of rich typography instead of image collages. With our current CSS capabilities, good reasons to rely on giant raster graphics for visual impact are becoming few and far between.

So the old rule remains true: If you can accomplish your design with HTML/CSS, do it. If you can’t accomplish your design with CSS, then perhaps the first question you need to ask yourself is, why not? After all, if we consider ourselves in the business of web design, then it’s imperative that our designs, first and foremost, work on the web—and in the most efficient manner possible.

Take a step back and embrace the raw materials of the web: HTML and CSS.

SVG and icon fonts

SVG images are XML-based vector paths originally designed as a Flash competitor. They are like Illustrator files in the browser. Not only are they resolution-independent, they tend to create extremely lightweight files (roughly determined by the number of points in the vector).

Icon fonts (like Pictos or SymbolSet) are essentially collections of vector graphics bundled up in a custom dingbat font, accessible through Unicode characters in a @font-face embedded font. Anecdotally, we at Paravel have noticed that tiny raster graphics, like buttons and icons, tend to show their awkwardness most on higher-resolution screens. Icon fonts are a great alternative to frustrating sprite sheets, and we’ve already begun using icon fonts as replacements whenever possible.

Support for @font-face is great, and basic SVG embedding support is nearing ubiquity—except for ye old culprits: older versions of IE and Android. Despite this, we can easily begin using SVG today, and if necessary make concessions for older browsers as we go by using feature detection to supply a polyfill or fallback, or even using newfangled projects that automate SVG/PNG sprite sheets.

There are cases where these formats fall short. Icon fonts, for instance, can only be a single color. SVGs are infinitely scalable, but scaling larger doesn’t mean more fidelity or detail. This is when you need to bring in the big guns.

Picturefill raster graphics

No stranger to this publication, the <picture> element, put forth by the W3C Responsive Images Community Group, is an elegant solution to loading large raster graphics. With <picture>, you can progressively specify which image source you want the browser to use as more pixels become available.

The <picture> element is not free from hot drama, and also has a worthy contender. The image @srcset attribute, notably put forth by Apple, is based on the proposed CSS property image-set(), designed for serving high-resolution assets as background images. Here’s a sample of the proposed syntax, (presented with my own personal commentary):

<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x,  // this is pretty cool
large-2.jpg 100w,       // meh
large-2.jpg 100w 2x     // meh@2x
">

As a complete responsive images solution, @srcset has a bothersome microsyntax and is not feature-complete (i.e. it has custom pixel-based h & w mystery units and does not support em units). But it does have some redeeming qualities: In theory, the @srcset attribute could put bandwidth determination in the hands of the browser. The browser, via user settings and/or aggregate data on the speed of all requests, could then make the best-informed decision about which resolution to request.

However, as the spec is written, @srcset is simply a set of suggestions for the browser to choose from or completely ignore at its discretion. Yielding total control to the browser makes this web author cringe a little, and I bet many of you feel the same.

Wouldn’t it be nice if there were a middle ground?

Noticing the strengths of the @srcset attribute, the Responsive Images Community Group has put forth a proposal called Florian’s Compromise, which would blend the powers of both @srcset and the <picture> element.

 
<picture alt="Cat Dancing">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg">
</picture>

No doubt, the <picture> syntax is more verbose, but it is extremely readable and doesn’t use the confusing “100w� shorthand syntax. Expect things to change going forward, but in the meantime, we’re currently using the div-based Picturefill solution from the Filament Group, which we find is easy to use and requires no server architecture or .htaccess files. It simply polyfills the <picture> element as if it existed today.

Under the hood, our previous demonstration was using two instances of the original Picturefill to swap sources as the browser resized. I’ve made some quick modifications to our demo, this time combining both @1x and @2x sources into one Picturefill demo with the newer syntax.

Experimental technique: the 1.5x hack

Another thing we’ve been doing at Paravel is playing with averages. Your mileage may vary, but we’ve noticed that high-resolution screens typically do a great job of getting the most out of the available pixels—as you can see in this @1.5x experiment version of our demo:

SizeSmallMediumLarge
@1x37kb120kb406kb
@1.5x73kb248kb835kb
@2x120kb406kb1057kb

If you don’t have a high-resolution screen, you can increase your browser zoom to 200 percent to simulate how compression artifacts would look on one. The @1x image clearly has the worst fidelity on high-resolution screens, and the @2x image definitely has the highest fidelity. The @1.5x version, however, fares nearly as well as the @2x version, and has a payload savings of about 20 percent. Which would your users notice more: the difference in fidelity or the difference in page speed?

Ultimately, the usefulness of the @1.5x technique depends on the situation. Notably, it does penalize the @1x user, but maybe there’s an even happier middle ground for you at @1.2x or @1.3x. We currently see the “just a bit larger� method as a viable solution for getting a little more out of medium-importance images without adding another degree of complexity for our clients. If you’re in a situation where you can’t make drastic changes, this might be a great way to gain some fidelity without (relatively) overwhelming bloat.

Above all: use your brain

Recently, while redesigning Paravel’s own website, we learned to challenge our own rules. Since we have talented illustrator Reagan Ray on our team, our new site makes heavy use of SVG. But when we exported our most beloved “Three Amigos� graphic, we made a quick audit and noticed the SVG version was 410kb. That felt heavy, so we exported a rather large 2000x691 PNG version. It weighed in at just 84kb. We’re not UX rocket scientists, but we’re going to assume our visitors prefer images that download five times faster, so that image will be a PNG.

Just use your brain. I’m not sure our industry says this often enough. You’re smart, you make the internet, and you can make good decisions. Pay attention to your craft, weigh the good against the bad, and check your assumptions as you go.

Be flexible, too. In our industry there are no silver bullets; absolute positions, methods, and workflows tend to become outdated from week to week. As we found with our own website, firmly sticking to our own made-up rules isn’t always best for our users.

Doing right by users is the crux of front-end development—and, really, everything else on the web, too. Pixel density may change, but as the saying goes, what’s good for the user is always good for business.

Translations
Italian


RSS readers: Don't forget to join the discussion!


The Web Aesthetic

The Web Aesthetic

It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

John Allsopp, The Dao of Web Design

Twelve years ago, John Allsopp asked us to embrace the adaptable nature of the web. We didn’t listen.

Although the web standards movement that followed advocated the separation of presentation and content—an essential requirement for adaptive design—this only manifested itself in code. Floated divs replaced table cells, yet layouts remained governed by the inflexible conventions of print.

Today, when every device begs to be connected, it has become easier—almost necessary—to accept the adaptable nature of the web. Responsive web design is an emerging best practice, and our layouts are becoming more flexible. But once again, innovation is focused on technical implementations while the visual aesthetic remains ignored.

To put it another way, we’re embracing “responsive� but neglecting the second part: “design.� We’re replacing fixed-width divs with fluid ones. As we undergo a period of reassessment, both of our practice and of our tools, now is the right time to seek out an aesthetic that is truer to the medium.

The material of the web

To properly design for a medium, you need to understand it. I like to think of the web as a kind of material, with unique characteristics we can take advantage of, and limits it can reach before it breaks. The web could almost be considered a composite, made up of HTTP (the how), URLs (the where), and HTML (the what). Omit any one of these ingredients and you’re no longer building the web.

It’s this combination of protocols and conventions that helps the web achieve what Sir Tim Berners-Lee calls its “primary design principle�: universality.

It should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large.

With universality so inherent to the medium, it could be said that the web is responsive by default. “Responsive� isn’t so much a technique or process, but a fundamental characteristic of the platform—and it’s one we threaten with each line of CSS and JavaScript we lay upon it. Universality transcends visual design, too: Websites need to be just as easy to use when displayed as plain text or read out loud.

This nature, and these characteristics, should inform every aspect of our design. So how might the overriding aesthetic of the web change were we to design with this universal nature in mind?

The medium is the message

Like the web, television is a medium where the access devices differ: Televisions can vary in size, resolution, aspect ratio, and refresh rate.

This was especially true in the 1970s and early 1980s. Although programs were recorded in color, broadcasters still had to consider the large number of people who owned black-and-white sets. On-screen graphics needed to work on both types of screens, so designers used contrasting shapes and colors. For example, the idents for BBC1 used a yellow (and later, bright green) rotating globe on a dark blue field. The resulting design may have been garish, but it worked.

BBC ident from 1974BBC ident from 1981

BBC1 idents from 1974 and 1981

Television is facing another period of transition, this time toward a high-definition widescreen format. Because many viewers own standard-definition 4:3 televisions, designers again need to compromise, working within a “safe area� to ensure graphics don’t get cropped on older sets. As such, graphics on widescreen televisions tend to float in the middle of the screen, not yet able to make use of the full width.

The overriding aesthetic of television will continue to change, but it will remain governed by advances in technology and designers’ understanding of its limitations.

Everything old is new again

Before “killer websites� and the desire to produce print-like layouts—when bandwidth was limited and small screens could only display 256 colors—pixel graphics were considered de rigueur. Layouts were simple and focused.

In 1995, Hotwired used just sixteen colors. Navigation on the homepage consisted of little more than six four-color, 1kb GIFs representing each topic area. The layout was just those images, centered:

Hotwired, circa 1995

Surrounded by high-resolution displays and limitless bandwidth, it’s easy to forget that similar constraints still exist. Although devices are becoming ever more powerful and feature-rich, less capable devices continue to be developed as well; for example, the Amazon Kindle is a popular device, yet most of the line’s e-reader models feature cellular connectivity and a monochrome E Ink display.

Embracing constraints

In the move to adaptive layouts, another constraint has revealed itself: Bitmap images fail to respond, be it to the size of the viewport or to available bandwidth.

This isn’t a failing of the web; that we can embed different types of media into a webpage is a useful feature. But not all formats share the web’s characteristics. There’s a tremendous opportunity to develop a responsive bitmap format, and I doubt images will truly feel part of the web until such a thing exists. In the meantime, the question persists: How can we make highly detailed photographic images work within such an adaptable medium?

Many have tried to answer this question with technical solutions. Since complex and fragile hacks were found wanting, efforts have moved to defining new standards, with a consensus forming around those that detect when differently sized versions of an image should be requested and displayed.

It’s in the realm of constraint that creativity is fostered. Designers have yet to push against the limits of what is possible. In seeking design solutions to this problem, we could create an aesthetic more appropriate to the medium—and perhaps realize that the responsive image problem only exists because our design conventions remain rooted in print. Without such a period of experimentation and reflection, I fear we could actually introduce standards that go against the medium’s universality; modern-day <font> elements almost.

Designing around the problem

Thankfully, developers and designers are starting to undertake such experimentation, and are finding solutions that negate the need for new standards.

1. Optimization

Rather than generating differently sized images and determining which should be shown, another option is to serve a single, highly optimized image instead.

The dConstruct Archive is a small site where people can listen to talks given at previous dConstruct conferences. Here, background detail around the face of each speaker has been blurred out, generating images with fewer compression artifacts and therefore smaller file sizes. This technique works especially well for portraits, as humans tend to focus on facial features anyway.

dconstruct original ui image exampledconstruct optimized ui image example

Original image: 9kb. Optimized image: 4kb

To work out which image sizes to use, the smallest and largest displays were taken into account. We can already see a failing in current responsive image proposals. If you visit this site, you will notice that larger viewports sometimes display smaller images, because the size of the image required is often dependent on the size of its containing block, not the size of the viewport. Yet viewport is the value the proposed standards would have us query.

2. Altering the aesthetic

If images with fewer colors and higher levels of compression can deliver smaller files, then perhaps our designs should reflect this.

With a theme of “playing with the future,� the dConstruct 2012 conference site employed a highly typographic design that featured monochrome images with areas of flat color. This design decision meant images could be really small, some needing as few as eight colors:

dconstruct original ui image exampledconstruct optimized ui image example

Original image: 14kb. Optimized image: 11kb

As we saw in the television example, the constraints of a medium can impact the resulting aesthetic. In that case, should images with fewer colors or blurred backgrounds—and perhaps even noticeable compression artifacts—become an accepted norm on the web? Surely the popularity of services like Instagram (itself a product born of constraints) has proven that photography is judged by its content, not by its resolution.

3. Progressive enhancement

Altering the visual aesthetic to suit the needs of the medium is a fine ideal, but it’s unlikely to be accepted by some clients, and let’s face it: It’s not always appropriate. In fact, it seems we rarely ask that question: What is appropriate? By evaluating our content, we can decide how many images are actually required to convey a message.

Rather than increasing the resolution of images as sites scale up, we can think about increasing their number instead. This ties in well with the ideas around progressive enhancement: providing a baseline experience that’s enhanced as device capability improves.

The BBC News mobile site is a great example of progressive enhancement. The raw HTML source references just two images: the BBC logo, and an image for the main story. Every device receives this, and pages can weigh as little as 28kb—quite a feat in the world of 5Mb websites.

When accessed on more powerful devices like newer smartphones, tablets, and desktop computers (those that can "cut the mustard"), an image is displayed for each story. These images have been deemed “nice to have�—enhancements to the core experience that are conditionally requested after the basic page has loaded.

The experience for the BBC News mobile site

Progressive enhancement has long featured in the developer’s toolbox, but it should now feature throughout the design process. By thinking about websites in less binary terms (desktop versus mobile; IE6 versus “modern� browsers), we can create experiences that adapt to the diverse landscape of the web.

Adapting our assumptions (not just our layouts)

Imagine the design of a new website. Do you see a layout framed by a header and footer, with navigation running along the top and a main content area featuring a sidebar?

We need to reset such assumptions.

Rather than seek inspiration from print, perhaps we should look more toward software design. Desktop applications have long been imitated on the web, particularly for productivity applications, and they are often insufferable as a result. More successful interfaces combine the best aspects of desktop applications with the native interface of the web—think Gmail versus Yahoo! Mail.

Similar thinking is now being brought to content-focused applications, largely thanks to the introduction of the Chrome Web Store in 2010. This feature gave Chrome developers a marketplace to sell and promote apps built using web standards, and many have created apps that repurpose content available on the web.

That these apps can only be viewed using Chrome is an unnerving requirement, and one worthy of protest. But, if we look at these apps from a purely visual standpoint and compare them to their traditional website counterparts, we’ll see that a blank canvas removed of assumptions can deliver experiences more applicable to the web.

Only the news that’s fit to print

When we think of websites inspired by print, those of newspapers spring to mind. The website for The New York Times features a fixed, densely packed, multi-column grid. Like many contemporary sites, content is suffocated by advertising, sharing widgets, and related links:

NY Times Website Interface

The inappropriateness of this design becomes more apparent when compared to its Chrome App (which is thankfully accessible in other browsers). Content takes center stage, with a less cluttered, more focused interface that’s also responsive—to a point. Note that it also features less photographic imagery, supporting the idea that responsive images might only be a problem when web designers try to replicate print.

NY Times Application Interface

Task-oriented sites

Another website that suffers from similarly crowded layouts is BBC Good Food:

BBC Good Food Website Interface

Yet, when viewing a recipe page in its Chrome app, we again see a more considered, user-centered design; it’s far easier to follow a recipe when you don’t have to scroll the page.

BBC Good Food Application Interface

Content, not chrome

A final example of this trend can be found on Rdio. As the music-streaming service has evolved, its designers have sought consistency between the website and desktop application. Where once these interfaces shared only a few components, now they are largely the same. This has resulted in a design that falls somewhere between the two: not quite a website, but not quite a desktop application either.

Rdio Website Interface

Like the Chrome apps for The New York Times and BBC Good Food, this nudge toward a more app-like interface has resulted in a stronger focus on content (in this case, album covers), a more fluid layout, and less intrusive navigation.

In some respects, the new interface shares qualities with Microsoft’s “Metro� design language, found on Windows Phone and Windows 8. When you consider that some of the design principles behind Metro include “Clean, Light, Open and Fast,� “Content, Not Chrome,� and “Be Authentically Digital,� it would be hard to argue that these values couldn’t equally apply to web interfaces.

Of course, one of the reasons these apps can be treated differently from traditional websites is the absence of display advertising—a constraint not so much of the web, but of the business models built upon it. Online advertising is enduring a long and painful death: Adverts are getting larger and more hostile, while services that remove them, like AdBlock, Instapaper, and Readability, are gaining popularity. Yet without proven business models to replace it, display advertising will likely stay with us for a few more years.

This shouldn’t stop us from learning from these app-inspired designs, though. At the very least, they highlight alternative layout possibilities, and how desirable services can be when greater focus is given to content.

The journey continues

As we enter the third decade of the web’s existence, we should be gaining a sense of what works, and what doesn’t. We should now have the confidence to choose which aspects of other media and platforms to take inspiration from, and which to ignore. We should be inspired by the conventions of other media, but no longer governed by them.

With universality as a guiding principle, we can ingrain approaches like progressive enhancement throughout our design process. Everything on the web ultimately needs to degrade down to plain text (images require alt text; videos require transcripts), so the text editor might just become the most powerful app in the designer’s toolbox.

As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all.

Translations:
Italian
Portuguese
Arabic


RSS readers: Don't forget to join the discussion!


Establishing An Open Device Lab // Mobile Testing


  

Managing a personal device lab can be quite hard with an ever expanding number of devices. It’s not only expensive, but also bad for our environment. Think of a situation where every Web developer would purchase a large pile of gadgets and keep adding new ones as they are launched — this wouldn’t make much sense. Thankfully, there are better ways to handle the problem.

During the spring of 2012, Jeremy Keith wrote on his website that anybody is welcome to visit their device lab at Clearleft’s office in Brighton, UK and use their devices. What they didn’t expect, though, was that in response many local developers offered to add their own devices to the collection as well. Two weeks later Jeremy Keith and Remy Sharp also presented this idea at the Mobilism conference in Amsterdam and the people attending loved it. A few months after Mobilism, similar labs started popping up in places like Amsterdam, Berlin, London and Malmö.

Following this example, we decided to bring our own devices to the Kisko Labs office and do the same thing in Helsinki. We now have an open device lab where anyone can come, start using the devices and contribute by lending their old devices. Three weeks after establishing this we already have three new devices from the local community: a Nokia N900 running Maemo, a Nokia Lumia 800 running Windows Mobile and an HTC Desire HD running Android. I have also been in contact with the device manufacturers and so far at least Nokia, Palm and Sony have promised to help us out with the lab.

Helsinki Open Device Lab
Helsinki Open Device Lab, opendevicelab.com.

I encourage everyone to do the same thing in the city they live in as well. This article will cover most of the things needed to be considered when doing that. It will also work as a guide and give practical tips — things like location, how to get devices, what devices to get and what software to use. At the end of the article is also a list of all the current open device labs around the world.

Location

This is probably the hardest part as it should be relatively open, easily accessible, but also a safe location to prevent burglars. I wouldn’t be too worried though as that’s a risk you need to take with any office space that’s filled with desktop computers and other gadgets. Just make sure that the space has proper locks and an alarm system in place.

Mozilla’s workspace in London
Mozilla’s workspace in London. Image by @mozillaeu.

Finding a location was never a problem for us as we had a space at the office which wasn’t used that often, but I understand that it might be hard to find one unless you already work in a location like that. However, I imagine that the best places to start asking are local Web community meet-ups, conferences and Twitter. Find out about local co-working spaces too, as those could be the best candidates to host these kind of projects. I also asked Shaun Dunne (who established the London Device Lab) if he had any advice on how to find a space, and this is what he answered:

“I was in the Reasons to be Appy conference during April when Christian Heilmann mentioned Mozilla’s new London office and how it had a co-op space with free WiFi for anyone to use. I spoke to him after his talk and mentioned what I was trying to do and he said that he thought Mozilla would be more than happy to host it. He said I should speak to @cyberdees who runs things in the office. We exchanged a few emails and I went there a couple of times and it was born from there.”

Devices

You don’t need a huge collection of devices to establish a lab — it can initially be small and grow once other developers start contributing their devices. Some device manufacturers are also willing to help the community by providing test devices for initiatives like this, so you should definitely contact them too.

There are basically four main areas that need to be covered in the lab. These are: feature phones, smartphones with low level support, smartphones and tablets. Later on you might also want to consider adding a Smart TV and other more exotic devices like game consoles. Additionally, the lab should also efficiently cover various screen sizes between 240 x 320 and 1280 x 800 pixels, as well as some high-DPI variants.

PhoneGap’s Device Wall
PhoneGap’s Device Wall. Photo © 2012 Adobe Systems Inc.

David Blooman from BBC recently shared the process that they use while testing on mobile devices, and the minimum set of devices to get the job done. This list is a slightly modified version of their minimum test device stack. For now it is a good starting point for anyone who is thinking about setting up an open device lab:

  • iOS 5 — iPhone 4
  • iOS 6 — iPad 3 Retina
  • Android 2.2 — HTC desire
  • Android 2.3 — Huawei U8650
  • Android 2.3 — Kindle Fire (Silk browser)
  • Android 3.X — Motorola Xoom
  • Android 4.X — Samsung Galaxy Tab 2
  • Blackberry OS 5 — Curve 8900
  • Blackberry OS 6 — Bold 9700
  • Windows Phone 7.5 — Lumia 800
  • Symbian S40 — Nokia 2700
  • Symbian S60 — Nokia N95
  • Symbian Belle — Nokia 500

Remember: You will want to end up with a collection that represents the audience and overall market share in your own location, which might be different from what I have listed here. Stephanie Rieger, who is a co-owner of Yiibu, has written an excellent article explaining Strategies for choosing test devices (so be sure to read that to find out more about the subject). Dave Olsen has also written an article about how to build a device lab, where he explains how and why they decided to get certain devices.

“If I had to start from nothing, I would start with the phone in my pocket. After that, I would take the usual suspects — Android 2.3, iOS5, etc., and make sure to have the more popular phones in place, but not go overboard. One of each to begin with, and then more varieties as time goes on. In a good way, everyone’s device lab should be different, as every market is going to have variations. There is no golden list of devices.”

— David Blooman

How To Contact Device Manufacturers

  • You will need to have a space and a website (a single-page website is fine) for the lab before asking for any devices. Otherwise, it may be hard to look convincing.
  • Twitter and email seem to be the best way. Look for developer relations accounts like this from Twitter and send emails to their developer related addresses. You can find the addresses from the developer websites, which usually reside in an URL formed like this: developer.manufacturer.com.
  • Ask people on Twitter if they know someone who works at one of the companies you are trying to contact. It may be an easier way to begin communicating with the right people.
  • When sending emails, explain carefully what the project is about, what you need and why you need it. It’s good to keep it short and get straight to the point.
  • Remember that you are sending emails to other human beings, not to some random corporations.
  • If you don’t get any answer from them within two weeks try to contact another person from that manufacturer.
  • Last but not least: Don’t be afraid to ask for help. I contacted several people about their test devices and where they got them from. Shaun Dunne (from the London Device Lab) was also kind enough to provide his perspective on how to contact the manufacturers:

“I started hitting the developer relations people up on Twitter. BB and Palm got back to me via Twitter and an email conversation went on from there. Nokia had their developer relations person at Mobilism, so I found out his email and sent him an email directly. It’s about being persistent, really, email is hard because it could end up in their spam or they can ignore it.”

“In a public forum like Twitter it’s harder for them not to engage. Don’t just go after the hardware manufacturers either, it’s worth speaking to the Android + WP7/8 people to see what they can do for you. If they want people to develop applications and websites that work on their devices, then it’s in their best interests to get those devices in developers’ hands. The best and easiest way to get the devices in their hands is through a community lab.”

Setting Up The Lab

You don’t need much in the beginning: a table, a few chargers and a Wi-Fi connection is all you need to get things up and running. If you have more than five devices, it may be a good idea to get a USB hub which can provide power to avoid cable clutter and stands where you can put the devices on. A few of the labs have also built their own stands and you can get some ideas from the resources listed below. Jeremy Keith also told me that they have all the devices running through a wall socket that’s on a timer which switches the power off in the evening and nighttime and back on again in the morning. That might be useful for saving some energy and also to keep the batteries healthy.

64 Digital’s device testing station
64 Digital’s device testing station. Photo © 2012 64Digital.

Later on, when there are many more devices in the lab, you may want to start considering getting a better wireless router which can handle all the devices. Andre Jay Meissner told me that Apple’s Airport Extreme can handle up to around 30 devices, but not much more (it claims to support 50!). SIM cards with data plans are also something which you might need once you start adding older devices that exclude Wi-Fi.

Software Tools To Get You Started

Adobe Shadow: Probably one of the best tools for testing at the moment. It allows device pairing, synchronous browsing and remote inspection using Chrome extension on either Mac or Windows. To be able to use Adobe Shadow you will need to download and install the mobile client to all test devices. In addition, you will also need the Google Chrome extension to run Shadow on your laptop.

Adobe Shadow running on multiple devices
Adobe Shadow running on multiple devices. Photo © 2012 Adobe Systems Inc.

JS Bin: JS Bin is a Web app specifically designed to help JavaScript and CSS folks test snippets of code, within some context, and debug the code collaboratively. You can use JS Bin together with the Adobe Shadow mentioned earlier.

Web Inspector Remote: Weinre is a remote inspector tool for WebKit browsers. It has been included in the Adobe Shadow application, but you can also set up your own installation to be able to use it on platforms like WebOS and Blackberry (in addition to the iOS and Android platforms).

xip.io: xip.io is a domain name that provides wildcard DNS for any IP address. You can use these domains to access virtual hosts on your development Web server from devices on your local network (like iPads, iPhones, and other computers).

Showoff.io, Localtunnel, Proxylocal: For sharing your localhost over the web.

Mobile browsers: Remember to install various browsers like Opera Mobile, Opera Mini, Chrome and Firefox to all of your supported test devices.

“Be sure to track the OS versions found on your test devices, and think carefully each time you upgrade. Owning four BlackBerry devices with four different versions of the OS is infinitely more valuable than owning four with the same version.”

— “Strategies for choosing test devices” by Stephanie Rieger.

Maintenance

There are some running expenses — rent, Wi-Fi, personal time used — and you may initially need to spend a few hundred bucks to provide chargers, wires and stands for the devices. So it’s worth considering if a small monthly payment would be acceptable. As it also might not be possible to find a space which is completely open like the one in London, it’s possible to have everything available by appointment too. This seems to be quite common practice and it allows you to use the same space for your own workshops as well, if needed.

In the beginning, when you are setting up the lab, I wouldn’t worry about all of this though. It’s possible that the lab will get popular and have lots of visitors and that someone might be using the devices when someone else comes in, but only time will tell. Shaun Dunne also said that they were discussing this very same problem in the beginning and decided finally that the lab should just be open. Jeremy Keith seems to think in a similar manner:

“When I started the device lab in Brighton, I didn’t worry about the paperwork. Instead of worrying about insurance, theft, liability and all those other worst-case scenarios, I decided to just do it and deal with the bad stuff if and when it arises. So far, so good.”

Closing Words

I believe in testing on real devices. Software emulators and simulators can be useful, but in the end they can only do that; simulate the experience (as Paul Robert Lloyd points out). To make testing on real devices possible for everybody, we need open device labs. If your city doesn’t yet have such a lab, I would say go for it, establish one. Don’t worry about the amount of devices you start off with, you’ll be surprised about how much the community is willing to help.

Last but not least: just a few days ago, while writing this, Andre Jay Meissner contacted me about the possibility to set up LabUp!, which would help people around the world in establishing nonprofit Open Device Labs. I think it’s a splendid idea and everyone who can help should join the movement.

Open Device Labs Around The World

This list is by no means complete, but it should include all the labs which were established before this post was published. For the future you should bookmark the up-to-date list of all open device labs which Jay is collecting.

(jvb) (il)


© Viljami Salminen for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress