What makes a web hosting server?

Posted by DesignDisease | Web and Graphic Design Blog at 04-15-2013

Ever wondered what technology is used in a web hosting server? Whether it is a shared server powering hundreds of websites, a cloud hypervisor as part of a larger cluster or a dedicated server for power hungry websites, server technology is key to the smooth running of each and every website around the world.

 

Server technology advances at a breathtaking rate each and every year. Server manufacturers focus on increasing raw performance while reducing power usage; in today’s world, energy costs are only ever going to rise.
As part of the launch of our new UK dedicated servers, our design team built a 3d image showing just what goes in a typical server. Each of the key core components is highlighted and we’ve explained the technology we use. DesignDisease is hosted on a WebHostingBuzz dedicated server, so this image is particularly appropriate.  I’ll let the pictures do the rest of the talking :)

Dedicated server components

The hardware components that make up a dedicated server

 

Survey Results: How To Improve The Deployment Of WordPress Websites

Posted by Smashing Magazine Feed at 04-15-2013


  

As WordPress matures into a full-fledged CMS and more and more large online publishers come to rely on the platform, the practice of developing and deploying websites becomes increasingly important. High-profile members of the WordPress community, such as core developer Mark Jaquith and Cristi Burca, have spoken on the topic and built tools such as WP-CLI and WP Stack to improve the professionalism of our administration and deployment.

But what I’m really interested in is the current state of WordPress deployment: how an average developer manages the deployment of their websites, and how can we improve as a community?

In late July 2012, I conducted a short survey to help me answer these questions. The survey was open for three months and drew a modest but not insignificant 327 respondents. This article documents the results of the survey and draws some conclusions about where education is needed and how we can help each other become more professional when deploying our WordPress websites.

The Demographic

In my survey, I asked a few questions to establish the demographic that’s working with WordPress; this was obviously already done in far greater detail with the WordPress user and developer survey, but I felt that getting a sense of who was responding to this survey was important. Of the 327 respondents, 43% self-identified as developers, 10% as designers, 40% as both designers and developers and 7% other.

The vast majority were located in the North America (50%) and Europe (38%), with the following continents also registering: Asia (6%), Australia (4%), Africa (3%) and South America (1%). I also asked respondents how they would categorize the businesses they work for. Here’s how they responded:

biz-type

The results were overwhelmingly in favor of freelancing (46%), with small businesses (19%) and small agencies (17%) taking a close second and third place, respectively. These figures back up accepted knowledge that WordPress is largely used by small internal Web teams, regional Web agencies and freelancers. Finally, as with the WordPress user and developer survey, I asked respondents whether they made their living from WordPress. This was relatively evenly split, with a small majority of 59% saying yes.

That said, of those who identified themselves as developers, 67% said they earn their living from WordPress, which suggests that WordPress developers are generally more inclined to stick with one platform than designers, who are perhaps more agonistic.

Deployment Practices

Now we get to the meat of the survey, how respondents actually deploy their WordPress websites. Combined, the 327 respondents maintain 6,378.5 WordPress websites — yes, someone maintains half a WordPress website. The majority of respondents manage a fairly small number of websites, with 46% looking after fewer than 10. That said, an impressive 8% manage between 30 and 40 websites, and, incredibly, one person is responsible for 700. Below is a breakdown of the numbers.

Websites Maintained by Survey Respondents

Number of websites Number of respondents
Fewer than 10 149
10 – 20 109
20 – 30 26
50 – 100 7
100 – 200 4
200 – 500 1
500 – 1000 1

Version Control

I asked all respondents whether they use version control and, if so, which software they favor. Astonishingly (at least to me), 45% of respondents said they do not use version-control software at all as part of their workflow. Of the remaining 55%, Git was by far the most popular, taking 41% of the vote, and Subversion surprisingly accounted for only 9%. Drilling down a little deeper, 28% of those who identify themselves as a developer stated that they do not use version control, and 48% of those who are both developers and designers said the same. Here’s a breakdown of overall responses on version-control software:

version-control

Next, I asked respondents what method of deploying websites they favor. These I broke down into FTP, SFTP, SCP, SSH + version control, SSH + version control + Capistrano, and other. Again, somewhat shocking for me was to find that FTP took 49% of the vote, followed by SFTP (20%) and SSH + version control (17%). My preferred method, SSH + version control + Capistrano, got only 3% of the vote; but even with so low a number, I was pretty encouraged to hear that people out there take the time to work in this manner.

Environments

I asked respondents whether they maintain different environments for their WordPress websites — that is, whether they set up local, test, staging and live environments. Answering yes didn’t require that they run all of these environments, but simply that they differentiate between the website they develop on, the website on which they show changes to a client and the live website. The vast majority of respondents (75%) indeed do this, which is great news.

An important facet and constant pain point of running multiple environments is the need to alter URLs in the WordPress database when migrating the database from one environment to another. I asked respondents how they typically deal with this problem and gave them an open field to type their answer. Here are some answers that came up repeatedly. These aren’t actual responses, but rather my representation of groups of similar replies.

“I don’t migrate between staging and live databases.”

“I don’t touch the database. I just export and import posts out of and into WordPress.”

“I use Dave Coveney’s PHP script for finding and replacing URLs in the database, including those in serialized data.”

“I do a find-and-replace on the SQL dump and the website’s files.”

“It’s a massive pain in the arse, and I steer clear of it.”

“I dunno. What is the best practice on this?”

Cowboy Coding

Finally, to gauge how strictly people adhere to general best practices, I asked respondents whether they ever cheekily edit code on the live server. Let’s be honest: this question is only ever going to yield one outcome. As expected, a whopping 76% owned up to having tweaked some WordPress production code in their time.

What We’ve Learned

In reviewing the lessons learned, it’s important to say up front that I am not criticizing the development and deployment practices of the survey’s respondents. The goal was to identify the areas where we, as a community, can become more professional and to draw some conclusions on how we might achieve that. You’ll find no finger-wagging or hyper-critical feedback for developers — just broad conclusions drawn from the responses.

Version Control

First, clearly not enough of us are using version control in our everyday workflow. This is a fundamental tool for any developer, and for 61% of those who self-identify as a developer or as both a designer and developer to say that they don’t use version control indicates that effort is needed in the WordPress community to educate developers on the importance of source-control management.

Still, while not enough WordPress developers use version control, that so many who do use Git is very positive. I prefer the decentralized approach of Git, and while WordPress’ core team still uses (and will likely continue to use) Subversion, Git brings many benefits. Suppose a few teams are working on a project. Each team could write to its own repository, and then a senior member of the quality-assurance team or an administrator could merge changes from all of those repositories into a protected repository before deploying the website. This approach makes a lot of sense if the website you’re working on is large and members of your team are dispersed, and it’s why I favor Git.

Environments

While a lot has been done to grapple with the issues arising from WordPress storing URLs in the database, the problem goes beyond WordPress’ core and extends to plugins and even to the pesky URLs ending up in serialized data. This is a pain in the arse at best, and a complete time-suck at worst. There are many options for overcoming this, but the most common choice is either not to migrate data from environment to environment at all or to use Dave Coveney’s PHP script. Both have their problems. For me, the first just isn’t viable, and the second, while perfectly acceptable, isn’t automated enough and is pretty time-consuming. There has to be a better option.

Free and premium tools and plugins offer solutions to this problem. One that came up a lot in the survey’s results was BackupBuddy and its migration feature. I’ve played around with its functionality, and, while it works perfectly well, it does not (as yet) work with Multisite, and I actually found the process more arduous than using a find-and-replace script. One project of mine that has emerged from this survey is to automate the find-and-replace process with a tool for Capistrano.

Conclusion

The survey’s results have shown the need for more education on professional deployment practices. Mark Jaquith’s talk “Scaling, Servers, and Deploys, Oh My!” is a must-watch for anyone deploying WordPress websites. And the WP Stack project on Github and WP-CLI are also worth checking out if you’re interested in breaking free of the browser and speeding up your administration of WordPress websites. For my part, I plan to start blogging more about professional WordPress deployment practices and to release more Capistrano tools on Github. Finally, I would love to hear in the comments section about the kinds of issues that you’d like to see covered in future posts and of any other projects that are moving this issue forward.

(al)


© Kieran Masterton for Smashing Magazine, 2013.

FYI Monday: Beautiful Vintage Illustrations by Andrew Fairclough

Posted by Fudgegraphics | for lovers at 04-15-2013

This post is part of the For Your Inspiration Monday series showcasing the most inspiring designs out there. Each week a new artist or design style will be presented in order to get your creative juices flowing for the upcoming week. I hope you enjoy the series.

Andrew Fairclough is an independent illustrator, designer and art-director from Sydney working under the moniker of Kindred Studio. I first stumbled across Andrew’s gorgeous vintage illustrations when researching gig poster. He really knows how to add grain, textures and halftone patterns to his illustrations for that authentic vintage look. Not to forget the colour palettes which are beautifully muted. For more inspiration check out kindred.prosite.com

Vintage Illustration by Andrew Fairclough

Vintage Illustration by Andrew Fairclough

Vintage Illustration by Andrew Fairclough

Vintage Illustration by Andrew Fairclough

Vintage Illustration by Andrew Fairclough

Vintage Illustration by Andrew Fairclough

Freebie Friday: 4 Wood Grain Brushes

Posted by BittBox at 04-12-2013

Advertise here with BSA






Download .ZIP

Nancy Dickenson On UX Design: Copying Others Is Not The Answer

Posted by Smashing Magazine Feed at 04-12-2013


  

Recently, we had the pleasure of sitting down to pick the brain of Nancy Dickenson, talented UX designer and the Executive in Residence for Bentley University’s HFID Graduate Program. With a bit of back and forth, we got some wonderful insight into the UX field from this long-time field participant and shaper, who looks back over her time in UX design.

We are very appreciative of Nancy taking the time to answer our questions and provide this glimpse into the evolution of the field of UX. We hope our readers enjoy the interview as much as we did collecting the information for you. Get ready for an engaging conversation.

Interview

Q: Nancy, where was your first job (in technology)?

At Apple Computer.


Nancy Dickenson

Q: Wow, what’s it been like watching Apple evolve over the years, having once been on the inside?

It was great to see how Steve Jobs’ return brought focus to the many smart, talented people working at Apple. The jury is now out on whether they’ll be able to self-organize without his strong POV leading the way.

Q: First user experience you designed (in whole or in part)?

The American Sign Language Dictionary CD-ROM.

Q: Last app you used today?

Yelp, TaskRabbit and Uber.

Q: How would you describe your style?

Open, passionate about new ideas.

Q: Why are you a user experience designer? What was it that drew you to UX?

UX is profession that we’re defining as we do it. I like that. The need for easy-to-use, useful products that exceed users’ expectations is as relevant today as it was when I started my career at Apple in the 1980s.

Q: Very good point! Do you find that most people understand UX or take it for granted? Has this changed over the years?

UX is increasingly becoming an accepted part of successful product and service creation and delivery. Whether you’re a product manager, developer or experience designer, everyone must engage in creative problem-solving and user-informed product strategy. Experience designers are no longer the only ones responsible for advocating for the user — the whole team is.

Q: What other less-related jobs have you worked in previous to design?

I sang in a band in the 1970s. Leading a band was my first lesson in managing creative talent (especially engineers!).

Q: Cool! What was the name of the band?

Nothing fancy: Nancy Dickenson Quartet. We played jazz at the Shadowbrook in Capitola and a lot of weddings. :)

Q: We’d love to learn more about your workflow and how you approach problem-solving. Could you tell us a bit about your personal process? How do you get started on a new project?

I start by seeking user insights that overlap with opportunities in the market. I follow this research with rapid idea generation and experimental prototyping. I call my creative problem-solving approach “Think, Make, Show.” “Think, Make, Show” is also a course that I taught for Bentley University’s Certificate Program in 2011.

Q: Good process! Did you make many converts to your process? In other words, did you get a good response from your students? Anything they were resistant to?

The phrase I repeat a great deal is, “Know the user, and know you’re not the user.” I didn’t pen the phrase, but unfortunately can’t remember who I got it from. Whoever it was, I thank them for it.

Q: When you work on a project, is there a particular element of UX design that you prefer to focus on, or would you just as soon work on any or all of it?

I am usually involved most with strategic direction, leadership, training, and management of experience design teams.

Q: So, at the head head of the pack, just like your days in the band. What’s the most important quality for a member of your team to possess?

The most talented designer is not always the most successful designer. Great UX folks start with being excellent designers (or researchers or writers), but then they go further. They are experts at gathering up-to-date knowledge of UX trends and industry competitors, and they are practiced, skillful communicators. These three areas together make a star UX professional: UX craft, relevant expert knowledge and skillful communication. The most successful UX folks on my teams embrace this idea and build learning opportunities around it.

Q: Speaking of your process, what hardware, software and other tools do you use?

Everything: Android and iOS mobile devices, Mac, PC, etc.

Q: What is your opinion of the fragmentation Android has created in the market? Do you see this as a positive or negative?

I love operating system disruptions! The complexity makes our heads hurt and brings us into a vibrant and creative period. From software application design to website design to service design to ecosystem design across form factors, each has opened up new opportunities for user experience to provide an ever more strategic contribution that delights users and helps businesses succeed.

Q: What would you consider the most misunderstood aspect of UX design?

Many companies confuse design thinking and design — design thinking is user-centered, strategic, creative problem-solving. That is a skill that all product roles should take part in. UX designers should be positioned to lead design thinking because they also bring their specific designer skills, knowledge and talent to both strategizing and executing great products.

Often, designers are not viewed as a strategic resource. As such, they are only invited into the product process during final execution, to “make the pages pretty.” Apple’s products have significantly changed users’ expectations — the technology and the design must now succeed together. By doing this, Apple raised its market capitalization to become the most valuable company in the world. No technology product company today can afford to cut design out of the product strategy conversation, but 98% of all companies don’t have a clue how to do it.

Q: You bring up a good point. What do you think we as an industry can do to correct this potentially costly error in judgment? How can we do a better job of making this point to businesses outside of our field?

Too often, companies think that copying Apple is the answer. I’ve heard executives say, “Go hire me a bunch of Steve Jobs.” That would be a disaster for 99% of companies. The answer is to focus on targeting the company challenges that UX is best suited to drive solutions for. For some companies, that might be giving UX authority to determine which new features will delight users and drive buzz (word of mouth), or which new features have the best chance of driving faster user-adoption rates and/or sustaining longer user-loyalty metrics.

Stay unique and original!
Illustration by Rube Goldberg.

Q: What are the main lessons you’ve learned throughout your work in UX?

To be, as Bill Gribbons often says, “a student of humankind.” It’s a great way to work and to live.

Q: What were the most remarkable “A-ha!” moments in your career? What were the most decisive moments that changed the way you approach UX projects?

Learning to be a facilitative leader of teams was a key turning point for me. In fast-paced organizations, nuanced delegation drives the right level of involvement, authority and motivation critical to creating successful, agile teams. These types of teams effectively balance the contributions of business, design and technology.

Q: Who would you say has had the biggest influence on you as a UX designer and why?

I have been very lucky to have many mentors, but working at Apple in the 1980s was the seminal event in my career. Michael Tchao was my mentor. He was, and still is, a rock star.

Q: If you could choose it, what would your legacy in the industry be? What is it that you want to be remembered for?

I hope that my legacy lies in playing a part in inventing and growing UX design and research from a concept into a profession. Through this, I hope to increase the number of smart people who find gainful, satisfying work as UX professionals.

(al)


© Robert Bowen for Smashing Magazine, 2013.

The Rainbow Spreadsheet: A Collaborative Lean UX Research Tool

Posted by Smashing Magazine Feed at 04-11-2013


  

Liverpool FC fans sing “You’ll Never Walk Alone” to their players during matches. UX research is best done when a team is involved. When you run UX research on your own without active observers, you are missing its point. This article describes and gives you a tool I created called the Rainbow Spreadsheet.

With it, you will be able to collaboratively observe UX research sessions with team members (or clients). You will be able to conduct research that involves the entire product team, with results that are turned around quickly and that team members will be committed to acting on. And all of this without writing a formal exhaustive research report that no one wants to read.

What Is The Rainbow Spreadsheet?

The Rainbow Spreadsheet, which takes its name from the different colors used in it to represent the study’s participants, is a spreadsheet with which all of the data collected during a UX study is centrally and simultaneously documented by a team of people; for example, through a Google Doc. It serves as the centerpiece for lessons learned from a study, and later turns into the final report.

Preview of the Rainbow Spreadsheet
The “Observation” sheet: repeated observations are highlighted in different colors. (Large preview)

Before The Study

As you prepare to run the study, your goal is to have a spreadsheet ready to be used, with all of the known information about participants and tasks entered. You also want your team to be well informed on how to use it and how to document its observations.

  1. Finalize your study’s protocol or discussion guide. Have a very good idea of what you will ask participants to do and what questions you will ask them to answer, and in what order.
  2. Schedule 45-minute breaks between study sessions. You will use those breaks not only to prepare for the next sessions but to discuss observations with your team. Here is how a four-participant, one-day study schedule might look like:
    10:00 – 11:00 Participant 1
    11:00 – 11:45 Break 1
    11:45 – 12:45 Participant 2
    12:45 – 1:45 Break 2 (including lunch)
    1:45 – 2:45 Participant 3
    2:45 – 3:30 Break 3
    3:30 – 4:30 Participant 4
    4:30 – 5:30 Summary
  3. Make a copy of the master rainbow spreadsheet for your own use.
  4. Enter the information about participants that you collected during the recruiting stage in the sheet titled “Participants”:

    The “Participants” sheet: details of the characteristics of participants and links to session recordings.
    The “Participants” sheet: details of the characteristics of participants and links to session recordings. (Large preview)

  5. Enter predetermined observations in the sheet titled “Observations.” These might be behaviors that you and your team (or client) expect participants to demonstrate; for example, “Noticed the green ‘Calculate’ button.” Do not enter double-barreled observations, such as “Noticed and used the green ‘Calculate’ button” because determining what to indicate in case a participant demonstrates only one of the behaviors is sometimes hard (in this case, either noticing or using the button).
  6. Customize the columns for participants to match the number of the study’s participants. The master spreadsheet contains 10 columns, each in a different color. If you have five participants, remove (or hide) columns P6 to P10. If you have 12 participants, add two more colored columns.
  7. Share the spreadsheet with your team in an email or meeting. Explain what it is, and tell them it will serve as a summary for the study and that there will not be another report. Encourage them to attend as many study sessions as possible.
    The observation sheet with 12 participant columns.
    The “Observation” sheet, with 12 columns for participants. (Large preview)
    The observation sheet with 5 participant columns.
    The “Observation” sheet, with five columns for participants. (Large preview)
  8. Ask team members to read the “Participants” sheet prior to the study to better understand who participants are.
  9. Ask team members to use the “Observations” sheet during study sessions to note the behaviors of participants. Instruct them to color a participant’s cell when a certain behavior occurs. If a particular behavior repeats in sessions with other participants, ask team members to color the relevant participants’ cells, rather than add one more line for a behavior that’s already been noted. To clarify: there is only one spreadsheet, which everyone accesses and works on at the same time.
  10. Identify UX metrics to monitor during the study with your team, and prepare the sheet titled “Metrics” to collect them. The master spreadsheet is prepared to collect three basic metrics: the success rates of tasks, the time to complete tasks, and self-reported satisfaction ratings. Collect any metric you see fit.
    The metrics sheet with sample data for task success, time on task, and satisfaction.
    The “Metrics” sheet, with sample data for task success, time on task, and satisfaction. (Large preview)
  11. Ask team members to add notes to the “Raw” sheet. Tell them it is there for anyone to add anything that doesn’t belong in the other sheets. My experience is that this sheet usually remains empty, but some people feel more comfortable taking notes there.
  12. Add sheets as you see fit. My team was once interested in what questions participants ask when they use a certain product, so we added a “Questions” sheet and assigned a “Chief Questions Officer” to log that data. There are no rules. Feel free to customize this spreadsheet to your team’s needs.

During The Study

As the day of the study begins, you and your team will begin entering data into the spreadsheet. As the day progresses, you’ll notice that your team is getting comfortable with the mechanics of using it and is doing an even better job of inputting its observations. Facilitating quick debriefings after each study session will increase the quality and tightness of the data entered.

  1. Enter data into the “Observations” sheet as soon as the first session of the study starts. Although moderating the session, paying attention to what participants say and do, taking notes and minding the observers is somewhat challenging, try to see if they are adding observations. If they aren’t, contact them through an instant messenger and remind them to feed the sheet with observations. If needed, pause the session, apologize to the participant, and finish the short IM conversation. Yes, it is that important.
  2. Don’t worry about overriding each other’s data. People usually self-manage their entries to prevent this from happening. Let it be.
  3. Fill in the “Metrics” sheet with data. You can definitely delegate this part to one of the observers, especially one who plans to attend the entire study. Another option is to assign metric-collecting responsibilities. So, for example, one team member would collect and log the success rates of tasks, another would take care of the time to complete tasks, and so on.
  4. Talk with your team between sessions. After the first session is over and after each session, break for a few minutes. Use this break to prepare the study room for the next participant and to collect your thoughts and organize your entries in the spreadsheet. Then, go to where your team is and discuss its observations. Help people understand observations that are not clear to them (rephrasing if needed). Tighten the list of observations by agreeing with team members on what should be removed. Candidates for removal from this sheet would be duplicate entries and any entry that cannot be considered an observation (such as a conclusion, thought, inference, solution to a problem or action item). Clarify to the team that, at this point, everyone should be entering only things that participants do or say, and that you’ll discuss everything else by the end of the study.
  5. Enter data into any other sheets you’ve created. Don’t feel bad if something doesn’t work out. This is a learning opportunity for you and your team. Maybe you should do something differently the next time around. Decide together.

After The Study

Although you and your team will be tired after a long day of research, it is time for one last effort to summarize, come to conclusions and assign action items. Here is what needs to be done to wrap up the study and to prepare the spreadsheet for future action:

  1. Assemble the team for a summary discussion as soon as the last participant has left the building. The goal of this discussion is to agree on the answers to the research questions that you defined in your study plan, to identify the primary findings of the study and to decide on the next steps.
  2. Add a “Summary” sheet as the first in the spreadsheet. This sheet will have four areas (see the sample rainbow spreadsheet):
    • research questions,
    • answers to research questions,
    • action items,
    • primary findings.

    The summary sheet with research questions, answers, action items, and primary findings.
    The summary sheet, with research questions, answers, action items and primary findings. (Large preview)

  3. Facilitate the discussion until you reach the point that the team feels it has captured the essence of what happened during the study and is ready to take action. Don’t overanalyze. Avoid “analysis paralysis.” If you have 10 important action items, you are in a pretty good shape. There’s no need to exhaust every tiny detail of the study’s results.
  4. Add links to video recordings of the sessions (if you recorded them) to the “Participants” sheet.
  5. Declare the study done, and publish the spreadsheet. When you share the spreadsheet outside of your immediate team, don’t call it the “Rainbow Spreadsheet.” Instead, call it “the report.”

When To Use The Rainbow Spreadsheet?

The most appropriate kind of study in which to use the Rainbow Spreadsheet is one that involves live, moderated sessions; for example, a traditional usability test in which participants interact with a design, while other people (stakeholders, team members, the client) observe in the next room or remotely. Any other moderated research study is also appropriate.

The spreadsheet also works well for walkthroughs in which users show you how they use a product or interviews with a product’s users (while others observe).

When Not To Use It?

Because the spreadsheet is best used live, using it in any unmoderated activity would not work. It would be irrelevant, say, in an online study that uses a tool such as Userzoom, Usabilla or Loop11. Using it in fieldwork would also be hard unless the study is being broadcast live or being recorded for viewing later by people gathered together (which is feasible, yet usually harder to do).

Advantages

The Rainbow Spreadsheet has several advantages:

  • It involves the entire team.
  • Research results are turned around quickly.
  • The team is committed to act on research results.
  • The visual representation of observations helps people quickly understand what’s important.
  • There is no formal report. When was the last time you heard someone say, “Yes! I get to read a report today!”

Disadvantages

There are also some drawbacks to keep in mind:

  • It requires the team to stop whatever it is working on and observe the sessions. That might be too costly, or even unfeasible for small companies.
  • There is no formal report. Some people in your organization might expect a formal, organized document to follow up the research.
  • People who can’t observe the sessions will feel left out.
  • It cannot be used in organizations that prohibit online collaborative documents.

What If Your Manager’s Manager’s Manager Asks For The Report?

Give it to them! If you feel uncomfortable sharing something that does not look like a report, you can do one (or more) of the following:

  • Ask them what they wish to know, and meet them for a few minutes to address their need.
  • Copy and paste the “Summary” sheet into an email, and send it to them.
  • Copy and paste the “Summary” sheet into a Word document, make it look like a report (perhaps adding a screenshot of the “Observations” sheet), and send it to them.
  • Present whatever you send or say as “the team’s deliverable” or “conclusions.” It’s not your research — it’s everyone’s.

Remember that people don’t come to work saying, “Yes! I get to read a report today!” So, chances are they’ll be thankful for a short document.

A Final Word

UX research is not about producing reports. It’s about answering people’s questions and helping the organization develop empathy for its customers. Deliverables and reports are means to that end. Don’t pay extra attention to them. Focus on your team’s learning. That can only happen in a collaborative way.

The rainbow spreadsheet is a tool to support such collaboration. If it doesn’t work for you, then customize it to your team’s needs or develop your own tools. Writing a report for a week will not serve your team’s needs very well. Find creative ways to learn about users together!

Rainbow Spreadsheet Templates

(il) (al)


© Tomer Sharon for Smashing Magazine, 2013.

Free Texture Tuesday: Stone Wall

Posted by BittBox at 04-09-2013

Advertise here with BSA







Brand Nu Launches New Portfolio

Posted by Fudgegraphics | for lovers at 04-09-2013

Radim Malinic aka Brand Nu just launched his new website. Radim is a freelance art director, illustrator and graphic designer based in London. He’s also a good friend of mine and regular LDNMeets attendee. The website features loads of new work, from illustration to typography to branding. Furthermore, the site is a perfect example of what a portfolio site should look like. It’s clean, responsive and easy to navigate. Below are a few screenshots, for the full experience go to www.brandnu.co.uk

Brand-Nu-2013

aaron-phipps-london-2012-athlete-website-design-01

colourspaces-vector-tutorial-computer-arts

roger-cracknell-photographer-portfolio-website-01-

thor-drinks-packaging-design

Release: Responsive Nav: A Simple JavaScript Plugin For Responsive Navigation

Posted by Smashing Magazine Feed at 04-09-2013


  

There are several ways to make navigation responsive, and usually the solution we need is quite straightforward. But despite the apparent simplicity, there are many underlying factors which, when thought through and implemented properly, can make a simple solution even better without adding more complexity to the user interface.

One of the problems I’ve encountered while building responsive navigations is that browsers currently don’t support CSS3 transitions to a height which is defined auto. Most of the time, we shouldn’t use fixed height either because the height of menu items might not be the same in all browsers, and the number of items may change. I also always try to reduce the weight of pages I build, so I’ve been wanting a solution that doesn’t require a big library such as jQuery to work.

Today, I’m pleased to introduce Responsive Nav, a free and open-source JavaScript plugin that solves these problems and more in one tiny package. It’s released under the MIT License, so you can use it in all of your projects for free and without any restrictions. The solution is not one size fits all, nor is it meant to be. But for those who are looking for a solution that does one thing well, it’s definitely a good choice.

Official site of Responsive Nav plugin.
The official site, view live at responsive-nav.com.

Features

Responsive Nav is a tiny JavaScript plugin which weighs only 1.6 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

  • Simple, semantic markup.
  • Weighs only 1.6 KB minified and Gzip’ed.
  • Doesn’t require any external library.
  • Uses CSS3 transitions and touch events.
  • Removes the 300 ms delay between a physical tap and the click event.
  • Makes it possible to use CSS3 transitions with height: auto.
  • Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
  • Works in all major desktop and mobile browsers, including IE 6 and up.
  • Free to use under the MIT license.

The official demo of Responsive Nav plugin.
The official demo, View live at responsive-nav.com/demo.

How It Works?

Responsive Nav is the successor of TinyNav.js which was released in 2011. While TinyNav worked so that it converted a regular navigation to a select menu, Responsive Nav only hides the original navigation and adds a toggle which opens and closes it. Responsive Nav doesn’t basically alter the html structure of the document at all, so it’s in that sense a much simpler solution.

Responsive Nav works by calculating in the background the max-height needed to fit all the menu items. When the user taps the navigation toggle the plugin uses CSS3 transitions to transition from a height that is set to 0 to the max-height it calculated earlier. Responsive Nav also attaches a touchstart event listener to the toggle, which makes it possible to remove the default 300 ms delay that happens when using click events.

Why Choose This Over Another Solution?

Responsive Nav is lightweight and doesn’t depend on any external library. The navigation opens instantly on touchstart — no more 300 ms delay on touch devices. It’s also (as far as I know) the only responsive navigation plugin out there that uses CSS3 transitions with variable height (although correct me if I’m wrong). Responsive Nav is also built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, right out of the box. Finally, Responsive Nav has been tested to work on 60+ mobile and desktop browsers, so that you would’t have to worry about browser support. See the full list of tested platforms.

Demo And Download

(al) (ea)


© Viljami Salminen for Smashing Magazine, 2013.

Campaigning With Personality: How To Raise Your Email Above Inbox Noise

Posted by Smashing Magazine Feed at 04-08-2013


  

If we look at email from a signal-to-noise perspective, then one-to-many emails are undeniably in the “noise” category; people are exceedingly good at ignoring them. Even Gmail and Hotmail are helping us ignore them by providing smart inboxes that sort incoming messages.

Emails from our families, friends and coworkers, however, are “signals.” We go out of our way to read them. But those emails aren’t the only ones — on occasion, we’ll happily read messages from businesses or complete strangers. Why? Because these emails are interesting, engaging and, most importantly, full of personality.

We’ve become very selective of what we consume in order to keep from drowning in our overfilled inboxes. Emails from Dad or a lifelong friend take priority, because they’re people we know and trust. Emails from outside our circle? Not so much. Our brains have an upper limit; we don’t have the capability to focus on an unlimited number of things, and our mental ability to care about the things that do interest us wanes over time.

But ultimately, we crave interaction, whether it comes from a trip to an unfamiliar part of the world, from conversations with friends or from the deluge of stories delivered by the 24-hour news cycle. We need to be engaged by ideas and people. It’s built into our psychology.

So, what can we do to make our email more engaging? How can we make sure that people are eager to read it? What gives an email personality? Before we can answer those questions, we have to overcome a couple of problems.

Information Overload

The first problem, as unintuitive as the notion might be, is the inability of humans to multitask. In “The Myth of Multitasking,” Christine Rosen shows that more and more evidence is being found to indicate that our brains simply aren’t wired for it. Despite what many believe, performing several tasks at once (like sitting at a computer and browsing the Web while talking on the phone and taking notes) isn’t multitasking, because we aren’t actually doing all of those things simultaneously.

What we’re actually doing is moving laterally, and switching quickly from task to task. Because of this, we end up in a state of “continuous partial attention,” a term coined by Linda Stone to describe the broadening of our focus from one task to many. Whether or not this sort of divided focus is a bad thing depends on the context; it serves us well at our desks, but take that phone conversation behind the driver’s wheel, and the effect is detrimental.

Our failure to maintain a high level of interest in a subject can be traced to what’s known in psychology as “secondary traumatic stress disorder,” colloquially known as “compassion fatigue” (see the chapter by Charles R. Figley in the “Sources” section below). You’ll find compassion fatigue in just about any caregiving profession — therapists may eventually need therapists of their own, and doctors’ bedside manner might cool over the years. You’ll also find it in customer service, where burnout is common. The growing cynicism over the state of news media is another clear example, as people become wearier of the “always on, always a scoop” environment. To combat that fatigue, news outlets double down on their tactic, and the problem turns into a cycle. So, compassion fatigue is our second problem.

To capture someone’s attention, we have to overcome these issues. For email, it lies in convincing people to take that first look, and then getting them to care enough to hang on for the long term. As people become more exacting of what they allow in, we creators need to become just as discriminating about what we put out.

The Subject Line

Getting people to take that first glance at an email can be difficult. Inboxes all seem filled to the brim, so finding a good hook is important. Writing captivating email content arguably starts in one place: the subject line. There’s no shortage of theories on what tone works best, or which words to avoid, or how long a subject line should be. It’s not an exact science, and a wealth of studies out there prove it. One of the more interesting looks at subject lines comes from the recent re-election campaign of US President Barack Obama.

Back in November, Bloomberg Businessweek published an article by Joshua Green on the short, familiar subject lines used in the Obama 2012 campaign emails. “Would love to meet you,” “Do this for Michelle” and “Hey” are three examples of subjects the campaign used.

Some of them read more like subject lines you’d find in spam than anything from the President’s camp. They’re not much better than what I’m seeing in my own junk folder today: “Let’s hang out!”; “Check this out”; “Hey!” In fact, I recall receiving the “Hey” email from the Obama campaign and immediately marking it as spam. Seriously? The Obama campaign sending an email that opens with “Hey”? Get real. That’s absolutely spam.

As it turns out, I was in the minority.

obama_email-500

“Hey” was incredibly popular, and that email raised quite a bit of money for Obama. The single-word subject, incredibly light in tone considering its source, came out of left field and snagged the attention of millions of people. A casual tone for a decidedly non-casual topic worked as a hook and got people to open the email. Green goes on to highlight how the Obama campaign team didn’t stop there — it kept iterating and testing and running with different quirky subject lines, and in turn raised a large portion of its $690 million worth of online donations through emails. But the subject lines always kept that simple slant.

The Content

The success of the Obama for America emails didn’t just come from the subject lines, and the team didn’t reach everyone it targeted on the strength of “Hey” alone. The subject lines were the initial draw, but the content of the emails, written in a familiar and conversational tone that belied their lofty source and that subverted expectations, made them effective. (See “Message Machine: Reverse Engineering the 2012 Campaign” by Jeff Larson and Al Shaw in ProPublica.)

An archetypal example of an email driven by great content is Dave Pell’s NextDraft. Pell crafts each issue of NextDraft daily, with content curated from the day’s most important or interesting news, along with a smattering of related stories. What Pell does with NextDraft is undeniably successful: Today, the newsletter goes to more than 25,000 readers, and every month more than 2,000 new ones sign up. The open- and click-rate numbers for NextDraft remain so consistently high that they put the rest of his industry — media and publishing — to shame; the average open rate for NextDraft hovers around 57%, compared to an industry average that checks in at around 17%. Click rates are similarly impressive at around 30%, versus a industry average of just 4%. By all measures, Pell’s doing it right.

nextdraft-email-500

Much of the reason why NextDraft works so well comes down to the way he handcrafts each issue. Pell takes a different tack on writing, blurring the line between one-to-one and one-to-many emailing. “I am writing my content to be read as a newsletter,” he told me. “It’s not a repurposed blog. I write it as I would write an email to anyone.” The distinction that website and email content should be handled in fundamentally different ways is spot on. The contrast between the two is stark, yet many of the emails arriving in our inboxes today can be considered “website, extra small,” when they should instead be purpose-built to better suit the more personal environment that email makes possible.

Pell also likes the relative permanence of email “in this era of Facebook and Twitter streams, where the news seems to flow by in the blink of an eye,” and he says there’s a benefit to the fact that “a newsletter is right where you left it.”

The Audience

Crafting kick-ass subject lines and content won’t get you anywhere, however, if you’re writing to the wrong people. Recognizing your audience and what they expect is an important factor in crafting a successful email. In Pell’s case, NextDraft emails are written in a voice and tone of familiarity, which resonates with his readers and makes each issue valuable to them.

Knowing your readers is easier when you have a narrowly defined audience, like Pell does, but it’s not always clear from day one who your audience actually is; the readers of the Obama for America emails had all, at some point, opted in to receive the emails, whether through a petition, a donation or any of the million other ways there were to land on the campaign’s list. But over time, not everyone stuck around.

There’s a certain level of attrition in any audience. When I received my first Obama for America email, I immediately marked it as spam. Those “Hey” subject lines matched a pattern that I considered spammy, especially coming from a source that I didn’t believe would use such casual language. That doomed the endeavor from the start; working at MailChimp, I’m already preoccupied with junk email, so the notion that I’d mark the email as such isn’t really unusual (unless “Democrat 30-something user-experience designers working for an email service provider” is a segment of the population they’re specifically targeting — in which case, the subject line shows a lapse in judgment). So, admittedly, I’m probably not a good representation of who the Obama folks were trying to snag with those subject lines.

But the majority of their readers didn’t go anywhere. In this case, the remaining audience was very likely composed of Democratic and independent supporters of the President. That audience is part of what’s known in psychology as an in-group: a cluster of people who share a collective identity (see Henri Tajfel’s article listed below). Taking this into account, the notion that “Hey” worked makes a lot more sense when you also consider what your average email recipient expects. Obama’s “Hey” and a spammer’s “Hey” both work because we see “Hey” from our friends all the time; as an audience of social animals, people are already receptive to these short titles.

There’s a quote that reads, “I don’t know the key to success, but the key to failure is trying to please everybody.” The remaining readers were already predisposed to open any email coming from the Obama camp. They made up a more narrowly defined audience that was emotionally invested in these campaigns, and they were exactly the right group to target.

The Source

Over the long haul, the combination of a catchy subject line, interesting content and an ideal audience will certainly get an email opened and read, but it also nets something else that contributes to long-term success: trust. When people subscribe to a list, they’re actively seeking a relationship with the creator and trusting that the communication they receive will have some value.

Here again, NextDraft is the perfect example. Dave Pell’s readers rely on him to curate, summarize and deliver each day’s important or compelling news stories. That’s a big responsibility for Pell, especially considering that some of those readers might be using NextDraft as one of their few news sources.

In a world where everyone has too much to worry about, many people can’t keep up with current events by seeking out stories from specific news websites, and instead rely on aggregators — be they friends, blogs or half-hour comedy news shows like The Daily Show and The Colbert Report. Given this, we can see how Pell himself acts as a news source. He isn’t simply forwarding content from various sources; he’s selecting meaningful stories, offering commentary and helping the reader to digest each item — much like an anchor you’d see on a nightly news round-up.

Pell has developed a trustworthy voice with a sense of gravitas, but he can also be funny and lighthearted, and his tone changes to suit the news he’s summarizing. Pell’s personality, combined with his interesting and reliable emails, builds trust. His emails resemble something we’d receive from a friend. Pell says there’s “a certain level of intimacy to the exchange… People let me into their inboxes, and if they have something to say, they can just hit reply.” This openness to discussion makes his readers trust him even more, and his conversational style of writing makes him more accessible as a creator.

Practical Application

The principles followed by Obama for America and Dave Pell are building blocks that we can apply to any other email campaign.

Knowing the audience might be the most important piece of data to have before that first campaign goes out, although we may not know who exactly that audience is. In the beginning, casting a wide net is OK. Eventually, defining the audience more narrowly will be essential; that broad view that we start with makes it harder to find what works moving forward. Specialization is key. We can begin to focus on a more narrowly defined audience simply by asking ourselves who we’re writing for, by finding our in-group. Is that group comprised of industry peers? People with similar cultural interests? Friends? We can adapt our content and style based on this better understanding of the audience. We can come to a place where we’re sending them email they actually want to read over and over because, in the end, it’s something we’d read ourselves.

Once we’ve defined our audience, then crafting subject lines that work is about fitting the right peg in the right hole. It’s not an easy task, but we can home in on what piques our readers’ interests and develop a good hook by using our own preferences as a baseline. What would I like to see? What would get me to open this email? From there, we can iterate. Just talking to family, friends and coworkers to get an idea of what subject lines hit the right note for other people is a great place to start. Once the audience is a little larger, something more formal, like A/B testing, is a logical next step. With feedback from others, we then have a chance to develop our voice and tone and write in a way that keeps people interested and that fosters the relationship between creator and consumer.

Panic uses beautiful emails with a friendly tone and voice.
Panic uses beautiful emails with a friendly and helpful tone and voice. Larger version. (Image Source: Lucien W. Dupont)

Writing good email content is a craft of its own, and one that isn’t easy by any stretch of the imagination. We can start with some good baselines, however. Email isn’t a long-form medium, and in a world that’s becoming increasingly mobile, lengthy and wordy often does more harm than good. Write like the audience is distracted. We’re dealing with small screens, busy lives and short attention spans — every email benefits from being short and sweet. What we write should be focused, clear and concise. We can better serve our readers by formatting content into digestible sections. If we have a lot more to say, then linking to external content or even returning to the topic in the next email might make sense; the semi-permanent nature of email allows for some episodic risks to be taken. Remember, too, the importance of design in email. Presenting content in a beautiful way, whether through images or typography, can also improve how readers respond to emails.

Even given great content, the importance of creating a two-way relationship with readers can’t be overstated. Building a connection and making an email something that our subscribers have a stake in is necessary for success. Trust is at the root of that connection. If we’re able to provide readers with something of value that doesn’t just add to the background noise of life, then they’ll find the time and commit to hearing what we have to say. This bond is the ultimate goal for creators. A little personality goes a long way when it comes to making email interesting and worthwhile. People don’t want neutral email; they want intriguing and familiar. If the Obama campaign can get away with a “Hell, no” in its subject line, we can all find a way to pour a little bit of our own personality into what we write. Humans are social animals by nature, so why not make emails more sociable?

One-to-many mass email is, by definition, a largely impersonal venture, so email often ends up boring and lacking in character. But with care and attention, we can buck that trend and create emails that mean something to people. By getting to know your audience and writing to them in a personable and conversational way, your email can rise above inbox noise. It can be about human connection.

Sources

(al)


© Fabio Carneiro for Smashing Magazine, 2013.