Skip directly to content

Smashing Magazine

Subscribe to Smashing Magazine feed
For Professional Web Designers and Developers
Updated: 1 hour 30 min ago

Maximize Your Creative Energy

Thu, 10/30/2014 - 09:00

We’ve heard many personal stories this week of how people in our industry have experienced hard times and how they managed to get out of them. We end this week with an article by Ann Holm, a personal development coach and expert in psychology and brain science. Read on to learn how to reduce stress in your everyday life and prevent burnout and other breakdowns in order to stay healthy and unlock your potential. — Ed.

What does knowledge of the brain and personality have to do with creative work? As a lifelong brain geek, I have taken on the mission to help others tap the secrets of the brain to uncover personal potential. Not surprisingly, everyone can benefit from at least some knowledge in this area.

In fact, I’ve found that people who work in the creative industry in particular seem to be interested in this topic because many of them work alone and have to manage their energy, distractions and time to complete a project, while staying flexible and in the moment to capture the unforeseen creative gems that emerge seemingly out of nowhere.

“Everyone who’s taken a shower has an idea. It’s the person who gets out of the shower, dries off and does something about it who makes a difference.”

– Nolan Bushnell, video-game visionary and Atari founder

Oftentimes we have habits that seem to work, so we are unaware that there might be better, more brain-efficient ways to do things. Other times, we feel exhausted and stretched, so our creativity suffers. In this article, I’ll share some facts and insight on brain functionality, as well as tips on how to get the most out of your creative energy. Some of these suggestions might be very different from what you are doing right now.

Multitasking: A Rapid Way To Deplete Brain Energy

Like many web designers and developers, you might work in a small business or even as a single entity. This means you need to master and implement several skills:

  • your creative work,
  • your networking tasks,
  • your administrative tasks.

While this makes you versatile, it can also lead to multitasking or plate-spinning. What is the most effective way to perform all of your roles, while still maximizing creativity?

In the old days, before computers, smartphones, social media and the like, interrupting someone’s train of thought was verboten — and for good reason. The brain is not meant to multitask. In fact, multitasking is a myth. Multitasking is actually task-switching, and it is among the most rapid ways to deplete brain energy. Every time you perform a task, the most energy-hungry area of your brain, the prefrontal cortex, has to recruit a different collection of brain cells to carry out the task you are trying to accomplish. You use different brain networks to work on projects, to respond to a phone call, and to check email and social media.

John Medina, author of Brain Rules1, tells the story of his son trying to write a paper for school with 11 other applications running, including two instant-messaging screens! Every time he switches his attention, his brain has to engage, disengage and reengage somewhere else. Studies show that a person who is interrupted takes 50% longer to complete a task and makes 50% more errors in the process.

Here are a few tips to avoid the pitfalls of task-switching:

  • Work uninterrupted for a designated period of time.
    Brain research shows that 25 minutes is approximately the amount of time it takes to “get on a roll.” Set a timer if necessary. Do only that one important task during that time.
  • Check email and social media at designated times.
    Email and social media notifications not only create those task-switching scenarios, but can result in a protracted diversion from your intended work.
  • Minimize distraction with internal and external management.
Manage Distractions With Internal And External Management

Distractions can be managed either internally or externally. Internal management requires additional brain energy, sometimes a considerable amount of it. It’s a form of willpower. A classic example is the individual who is trying to lose weight but keeps all kinds of tempting food in the house. The old saying “out of sight, out of mind” is instructive here.

I am a business owner myself. I coach, blog, maintain a website and develop curricula for leadership-development workshops. I use social media, including Facebook, Twitter and LinkedIn. By far, my biggest distraction was Facebook on my iPhone. I have a personal page in addition to my business page, and I found it way too easy to check my latest push notifications. So, I deleted the app from my phone. Now I wasn’t one click away from another diversion.

There are many ways to manage distractions externally so that the brain doesn’t get exhausted in the process. In my college days, I taped myself to a chair to finish term papers, thus eliminating the possibility of wandering off to chat with a friend. Nowadays, I ask myself, how can I make a distraction so difficult to execute that I don’t even consider doing it?

A young client used the following strategy to externally manage his biggest distraction:

“The biggest distraction of my life is my phone. I had a large project due, so I decided to try your suggestion. I took the phone out of my pocket, shut it off, put the cover on backward, and placed it on a high shelf. Amazingly, I got everything done, and I got it done fast.”

Distractions are best managed by eliminating them from your immediate environment — or by making them so difficult to execute that you don’t even consider them.

Here are a few tips on externally managing distractions:

  • Turn off your phone or place it in another room.
  • If you have to take calls, disable Internet access on your phone.
    Some phones have a “do not disturb” function that only allows calls from a list of defined numbers (such as emergency numbers) to minimize disruption to your workflow.
Sleep Well To Uncover Your Potential

“Sleep while you’re dead“ was my philosophy for years. I was a dedicated night owl, often denying that I needed much sleep at all. In truth, only 10% of the population do their best work at night, and few people can get by on less than 7 to 8 hours of sleep per night, night after night.

It is possible that the creative industry has a slightly higher percentage of night owls or those who can get by on very little sleep. However, the chances are high that most people need the same amount of sleep in order to function optimally. Many of us keep going at night because we are too tired to put ourselves to bed.

Our brains need time to calm down, so try to stop working several hours before going to bed. (Image credit: kroszk@2)

Recently, I attended a seminar titled “The Ever-Changing Brain.” I was struck by the impact of sleep deprivation on every aspect of our lives. John Preston, Psy.D, wasn’t talking about simply doing time in bed. He was talking about the deeply restorative sleep that affects our ability to regulate our emotions, solve problems and think creatively. Sleep researchers say that, in the absence of slow-wave sleep, our pain threshold decreases and our cognition and focus are reduced. Depression is a long-term consequence of poor sleep quality.

Sleep behavior is largely a result of sleeping habits. Even a few small adjustments can have a profound affect on sleep quality:

  • Exercise regularly throughout the day.
    However, avoid exercising close to bedtime or it will have the opposite effect.
  • Avoid caffeine, alcohol and sleeping pills.
    These substances interfere with restorative sleep, especially when you consume them close to bedtime. Sleeping pills can affect your sleep patterns long term.
  • Trend towards calmer evenings.
    Your brain needs time to calm down. Stop working several hours before going to bed, and fill those hours with calm and relaxing activities.
  • Avoid blue light at least an hour before bed.
    The blue light of computer screens and bright sources of light affect our sleep. Avoid them at least an hour before bed. Additionally, you can manage the light of your computer screen with the f.lux3 app.
  • Sleep in a cool room and ventilate before going to bed.
    Sufficient oxygen supply is important for your brain to recover from a hard day of work.
Eat Well And Exercise To Maximize Your Potential

My great Aunt Marian grew up on a diet of fatty meat, dumplings and potatoes. Vegetables were usually cucumbers doused in bacon grease. She smoked for 80 years and loved her scotch. She broke every health rule and yet lived with a clear mind until she died in her mid-90s.

Aunt Marian was lucky and probably genetically exceptional. Current brain research suggests that most of us probably couldn’t pull this off. Although we’re more aware of the benefits of eating healthy and exercising than we have been in the past, the stresses of the modern world and the increasing pace and pressure of our lives affect us more than we might think. Traveling to conferences and clients adds another layer of stress to our lives. We know now that small yet measurable brain declines already happen in a person’s late-20s.

Don’t underestimate healthy nutrition. Your brain will thank you. (Image credit: Ted Eytan4)

Anxiety is common in developed countries, and the lifetime risk for severe depression is 20%. A hundred years ago, the risk was 1%. Because many creatives work on projects that they’re passionate about, they often don’t realize how much stress they’re putting themselves through and the negative effects this can have on their bodies. Burn-out often occurs after a phase of idealistic passion for something.

Stress is caused not only by the number of tasks we have to complete, but also by emotional events in our lives. This could be the death of a beloved one, a divorce or break-up, or tensions in our family or social circle. We have to acknowledge that our brain needs additional capacity for us to emotionally deal with these problems.

In short, we have to take care of our brains in order to get many years of creative output:

  • Keep weight within the normal range.
    Excess weight, a poor lifestyle and a lack of sleep set off the inflammatory process.
  • Reduce or eliminate sugar.
    Evidence is emerging that sugar is a significant cause of inflammation. Inflammation is system-wide. Therefore, if you feel unwell after eating something, then your whole body, including your brain, could be affected. Keep this in mind when attending conferences and meetings, where unhealthy food is often easily obtainable. Investing some time and money in eating healthy could result in a better creative output later on.
  • Supply your body with omega-3 fatty acids.
    Many supplements don’t work. However, the omega-3 fatty acids found in fish oil have been proven to benefit the brain.
  • Exercise regularly.
    Exercise improves blood flow to the brain. Exercise not only will bring about creativity in the moment, but will benefit the brain in the long run.
  • Build and maintain relationships and interests outside of work.
    This is important to avoiding depression and burn-out.
  • Don’t underestimate the effects of emotional events.
    If an emotional event happens in your life, take some extra time out so that you’re brain is able to effectively deal with it. For example, go for a walk outside or a bike ride or meet up with people who can help you through this situation.
A Real-Life Example

Recently, a client confessed to me that she was staying up well past 1:00 and 2:00 am because she was a night owl. When I asked her what she was doing at that hour, she said she was “researching” various topics on the Internet. As we discussed this further, she conceded that she was really just surfing the web and couldn’t fall sleep any sooner. I explained that when we get very tired, we lose some of our willpower to move away from what we are doing and head off for a good night’s rest. She agreed to try an earlier bedtime and to turn off her computer screen at least 30 minutes before that. I further suggested she use the Sleep Cycle5 app to get solid data on her sleeping patterns. Ten days later, I received this email:

“I’ve been using the Sleep Cycle app most nights since we talked and I’m shocked. I knew that I often didn’t get as much sleep as I should, but I hadn’t realized just how bad it was. If the last week and a half is any indication — and I have no reason to think it’s an anomaly — I rarely get eight hours’ sleep on a weeknight. I hadn’t realized just how much time I’m wasting online before I go to sleep on a regular basis. This is a huge thing to work on. Thank you for this wake-up call.”

Several months later, she continues to report better sleep and better results in her work. It’s not that she doesn’t do any more night benders, but she is more aware of her need for sleep and how it affects her work.

Conclusion

No matter what a person’s career is, we are all first and foremost human, and we have evolved with a certain physiology that is not altogether compatible with modern life. Our ancestors walked up to 20 kilometers a day and focused on one thing at a time. We woke with the sun, slept when it was dark and ate the available natural food. Our lives today are vastly different from the conditions that mapped our ancestral brains, and yet modern living has not significantly changed our basic neural framework.

The main take-away is to be open-minded about how you might be compromising your own success and productivity by relying on habits that run counter to how we are wired to live and thrive. Experiment with some of the principles described in this article and see whether a few small changes make a big difference in your overall productivity.

These are only a few suggestions to help maximize your potential. Feel free to share your own tips and strategies below in the comments sections.

Other Resources

(al, ml, il)

Footnotes
  1. 1 http://www.amazon.com/Brain-Rules-Principles-Surviving-Thriving/dp/0979777720
  2. 2 https://www.flickr.com/photos/kroszka/4122223330
  3. 3 http://justgetflux.com/research.html
  4. 4 https://www.flickr.com/photos/taedc/10689767154
  5. 5 https://itunes.apple.com/us/app/sleep-cycle-alarm-clock/id320606217?mt=8
  6. 6 http://rachelandrew.co.uk/archives/2014/03/24/5-tips-for-the-healthy-frequent-traveller/
  7. 7 http://www.thefreelanceweb.com/ep36-dealing-with-stress-depression/
  8. 8 https://medium.com/what-i-learned-today/how-i-have-lost-over-100-pounds-and-dont-know-how-d5da698ee2ba
  9. 9 http://www.amazon.com/Brain-Rules-Principles-Surviving-Thriving/dp/0979777720
  10. 10 http://www.amazon.com/Spark-Revolutionary-Science-Exercise-Brain/dp/0316113514
  11. 11 http://justgetflux.com/research.html
  12. 12 https://itunes.apple.com/us/app/sleep-cycle-alarm-clock/id320606217?mt=8

The post Maximize Your Creative Energy appeared first on Smashing Magazine.

Let’s Talk About It

Wed, 10/29/2014 - 01:10

Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. It’s {Geek} Mental Help Week1 and we would like to help raise awareness with a couple of articles exploring these issues. – Ed.

Talking about mental health can be awkward and embarrassing, but it really shouldn’t be. Mental health is just an illness, like any other. When we talk about mental health, we do so in hushed terms. We whisper, “Don’t mention it, he or she isn’t ‘all there.’”

I believe this approach — sweeping the problem under the carpet, hiding it from view, or stating, “Let’s not talk about it” — is a problem. Mental health is an issue. It affects our industry, in particular and confronting it head on is important. We need to talk about mental health more openly, and I’m happy to be one of a growing number of people in our industry who are helping to bring this subject out into the open, where it should be.

Mental health is an issue, it shouldn’t be a stigma. If more of us address it, openly, we’ll be able to address some of the problems we face collectively. Our industry is, in many ways, unique in its approach. We share what we learn, pooling our knowledge for the betterment of all. We can apply this approach to greater issues, like health, particularly mental health, and in so doing win the battle of the mind.

A Broken Elbow

Four years ago I broke my elbow. I left my house, on the west coast of Ireland, intending to take a short cycle ride and, barely a few minutes from my front door, managed to throw myself over the handlebars, bounce down a steep hill and break my elbow into what felt like a million pieces.

It was a stupid mistake. I wasn’t wearing a helmet — note to self, that’s never a good idea — and when my body, frail as it was, impacted upon the tarmac and gravel, it suffered immense trauma. Covered in cuts and bruises and bleeding profusely, I tried to pick myself up off the ground, only to discover that my left elbow was, I’m sad to say, almost beyond repair.

Fortunately, my wife, Cara (who — it has to be said — has supported me for an inordinate length of time), happened to be following behind me moments later in a car. She pulled in, gathered me up and took me to the hospital. I’m not a hospital person (I have a real phobia of hospitals), so this wasn’t the greatest day of my life, but I was soon taken care of and dispatched to Belfast, where I was admitted to yet another hospital for an operation to fix my broken elbow.

Unfortunately, all of this coincided with my end-of-year student assessments. I work as a senior lecturer at the Belfast School of Art, and my students, after many years of hard work, were just about to graduate. It was a difficult time, but, thanks to the generous support of my colleagues, I was able to assess my students from the relative comfort of a hospital bed, all thanks to technology. (iPhones are just the ticket when you’re assessing students from afar.)

I returned to work a fortnight later, my arm nestled in a sling. I wore that sling like a badge of pride.

A Broken Mind

Barely two years later, I would find myself in a hospital again. This time, I awoke in a hospital bed feeling exhausted, disorientated and ashamed. The day before, I had tried to kill myself. I didn’t wear that like a badge of pride. Indeed, outwardly, you wouldn’t have seen any evidence that I had even been in hospital at all.

I suffer from depression.

I find myself all too often overwhelmed by life, questioning the point of it all. I wonder, “Is there an easier way out of this?” The answer, for me at that time, was simple: It’s time to exit.

At that time, with my elbow on the mend, my mind was in a terrible place. I couldn’t see the point of anything; I could only see a way out. Try as I might to rationally address my worries, my mind was cast adrift, and my thoughts were illogical. I had had enough. The rational — or, rather, irrational — solution was to end it all.

I am married and I have two wonderful children. I love my wife, Cara, and my children, Ross and Caitlín, dearly. They mean the world to me. When I look back on that time, I am ashamed of myself. I was ready to leave; I had had enough.

These words are the hardest I’ve written. They are almost impossible to write and to share. How can you state that you were ready to abandon your family? That’s the worst thing anyone could put down on a page.

2Anxiety: one of the most prevalent mental health problems in the industry.

When I feel great, I feel great. The world is my oyster, and the world is filled with opportunity. I am filled with hope, and I see the boundless possibilities that life offers. When the fog hits me, however, I cannot think rationally. The world is a black place, somewhere I wish to leave. Rationally, of course, I understand the devastation my choice will incur, but my mind is nowhere near working in what we might call a rational manner.

At that point, there is no badge of pride, only a badge of shame.

Managing A Mind

My last year has been one of change. I’ve regrouped and focused on trying to live a healthier lifestyle. I’ve also resigned myself to the fact that I cannot be all things to all people. The edges of my day had blurred: 9:00 to 5:00 had become 8:00 to 6:00 and, not long after, 7:00 to 7:00 (and worse). This kind of ever-increasing workload, where the balance between work and life switches, is not uncommon.

I’m sure we’ve all spent evenings or even whole nights just “catching up.” At the risk of stating the obvious, this is extremely unhealthy. We need to wake up, look at ourselves and ask, “Is this what life is really all about?”

Over the last two years, I’ve read a great deal to try to understand how the mind works. That journey has been an interesting one, and I’ve learned a great deal. I’ve found books to be the most helpful. Alain de Botton’s Status Anxiety3 is excellent, as is Viktor Frankl’s incredibly moving Man’s Search for Meaning4. Both are well worth owning.

If you can afford to buy just one book, however, get Steve Peters’ The Chimp Paradox5. Peters’ ideas on mind management are invaluable, and if he can help athletes win Olympic gold medals, then he can most certainly help you.

Books are great — as an educator, you’d expect me to say that — but we in this industry share something greater: a strong sense of community. Unlike in many other industries, we share our knowledge freely. Let’s share our knowledge about more than just design and code. Let’s share it about the issues we face in life.

You Are Not Alone

I’m not alone in writing about the issues I’ve faced. A growing number of others have, too, many of whom have been inspired to share their experience as a result of Geek Mental Help Week6. Geek Mental Help Week affords us all an opportunity to address these issues head on. We work in an industry that is relentless. Keeping up with change can be a challenge.

A year ago in my journal, fsck, I wrote7:

I believe, as an industry, we focus all too often on the headlong excitement of endlessly moving forward. That’s fine, but there’s a flip side. Relentless progress brings with it relentless pressure. It can be difficult to keep up, and the pressure to stay on top of everything can at times prove debilitating.

That remains the case.

Our industry is constantly evolving. It’s developing at an unprecedented rate, and it is intimidating at times. New technologies emerge yearly, monthly, weekly, even daily. Maintaining a knowledge base that is fit for purpose is incredibly time-consuming.

Keeping up is hard, and sometimes the stress of trying to stick with the pack (a pack that always seems to be pulling away from you) is frustrating. The older I get, the harder I find it to keep up with the pace of progress.

No one can do everything; we need to remind ourselves of that from time to time. AngularJS, Ember.js, Node.js; Bower, Grunt, Yeoman — I have no idea how any of these things work, and that’s fine. I have a skill set — I’m essentially a creative director and a mentor — and I’ve slowly come to the realization that my skill set is more than adequate.

I hope, as an industry, we can learn to let go a little. A wonderful world exists inside the machines we work with, but — equally — a wonderful world exists outside of those machines. Look up. Step away from the computer. Go for a walk in the park. That’s where you’ll witness what life is really all about.

We are all struggling. Even those who seem to effortlessly accumulate knowledge are struggling (though they might not admit it). Together, we can confront the challenges we face, as we do so many other challenges. Let’s not forget that.

(al, ml)

Footnotes
  1. 1 http://geekmentalhelp.com/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/anxiety.jpg
  3. 3 http://www.amazon.co.uk/exec/obidos/ASIN/0141014865/monographic-21
  4. 4 http://www.amazon.co.uk/exec/obidos/ASIN/1844132390/monographic-21
  5. 5 http://www.amazon.co.uk/exec/obidos/ASIN/009193558X/monographic-21
  6. 6 http://stuffandnonsense.co.uk/blog/about/announcing-geek-mental-help-week
  7. 7 http://fsck.monographic.org/fsck.php

The post Let’s Talk About It appeared first on Smashing Magazine.

Feeling Stuck? Design What You Don’t Know

Tue, 10/28/2014 - 14:57

Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. It’s {Geek} Mental Help Week1 and we would like to help raise awareness with a couple of articles exploring these issues. – Ed.

Where is it?! It has to be here somewhere. It use to be so easy. What happened? Somewhere, somewhere, somewhere. That idea is somewhere. It’s here, it has to be. This is where I’ve always found it. But there’s nothing. The only shapes I find here are well worn and boring, dints still obvious even with fresh paint. Oh so boring. So boring and so often used because they’re just “fine.” Too easily used. Too easily reached for and offered up as if they were new again.

Didn’t this used to be easy? Didn’t fresh ideas arrive without being asked for? Why did I have to wait until the last moment to even notice, wait until moments before these old dented ideas have to be presented?

Wasn’t this a passion? Wasn’t this a calling? Wasn’t this something I sprung from bed every morning to race to the studio to do?

Now it’s none of these things. Now it’s different. Now it’s quiet with muted color. Now it’s something I just do. No, it’s worse. Now it’s a job. It’s not my work, it’s my job.

It’s a job, and the ideas don’t arrive like they used to. I keep designing what I know. I’m stuck.

What Stuck Is Really Like For A Designer

Sound familiar?

We often think about being stuck as not having anywhere to move. But for a designer, this is what stuck really looks like. It’s emptiness followed by panic, days before a concept or first proof is due.

It’s reaching for old familiar ideas, ones used far too often simply because they’re reliable, even if they make for boring shapes. Whatever solutions might be offered up to the client’s problems are often interchangeable. Client names and logos could be swapped and the difference would be indistinguishable.

Without being creatively stretched, our skills take little time to silently atrophy. Before long, memories of excitement become all too distant. The misguided hope that the next project will be better starts to kick in, but the same situation is repeatedly found, so the same solutions are repeatedly used.

Being stuck means no movement, and no movement means that the creative waters of our minds grow stagnant. (Image credits2)

Luckily, this can be solved with the most boring and obvious of things.

What Causes A Designer To Feel Stuck?

The longer we work, the bigger our box of tricks gets. We start to learn what will work for a client almost every time, what most clients don’t like, what most clients are fine with.

When desperate, we rely on those tricks in place of exploration and research, just to get the work finished and out the door. But before long, we are relying on them too heavily, then perhaps completely, rendering our creative legs useless as we find height atop of our empty little tricks. Alternatively, such stagnation may settle over us because of arrogance. We might allow our ego to fill up the space in our brains left for new knowledge and consider ourselves full.

We might think that we’re done with our education because we’ve graduated, won an award, gained some recognition or simply found a job. We forget how our skills developed in the first place — within a storm of unknown outcomes and a thousand wrong solutions. We forget that we need to understand and challenge our limits, that learning means being willing to be wrong and to try again, over and over.

We stop learning; we get bored. We fall into a rut and get stuck. What we need in our work is a little novelty. No tricks, no work made up of shortcuts alone and no ego — no, none of these — we just need some curiosity.

Want To Get Moving? Design What You Don’t Know

Writers are often given the advice to “write what you know.” Weaker wordsmiths would consider this justification to simply write what’s in their head. Their ego will suggest that they already have within them what’s needed for the next great novel.

Smarter writers, the ones who take their craft seriously, understand that to write what they know means to know many things, and to know many things means to deliberately subject themselves to a barrage of experiences. It means visiting the country in which a short story is set to understand the culture found there, not just relying on weak memories or a few Google searches. It means calling the local pharmacy to ask a few questions about how certain drugs work in the body if it’s central to how a main character dies.

It’s to put yourself in unknown places and routines so that you can find new sources from which to draw inspiration. The advice should almost be “write what you don’t know.”

I’ve always been amazed by the similarities between writing and design. They’ve often felt like two sides of the same card to me, and the advice for one often translates well to the other. So, what of the advice to write what one knows? What good is this for the designer?

Design what you don’t know.

A blatant copy, but it makes our point well. Design what you don’t know. Find your limits, push them with education and experience, and perhaps avoid that burnout and stagnated-career feeling.

Seek Out Your Limits, Know Them, List Them

Do you know what your limits are? Do you know what you don’t know? Do you have them in front of you? It’s not enough to have a vague idea of what you’re not comfortable doing. You have to make a list, to plan your education and your efforts.

A list: That’s our not-so-obvious obvious solution.

Such a list can provide an enjoyable stability and direction. It’ll stop you from stumbling through ignorance, wildly throwing your arms out hoping to clutch some knowledge to keep from falling again.

Go wild. This is your fantasy list; this is all the things you ever wanted to learn about your profession. Leave nothing out, include big and small, and cover the whole gamut. Write fast and with passion.

Patterns will emerge, little groupings and relationships. You’ll see what little classes you can structure for yourself, and you will play both student and teacher. You’ll be lucky for it — being both will make you better at both. Add to it every time something comes up during a project that you avoid because it confuses you, anything that makes you genuinely nervous to think about. Be specific. “Make website responsive” isn’t specific, but “How do I target specific resolutions?” is.

The benefit of getting granular isn’t just that it helps you avoid easily stumbled-upon distraction, but that it gives you things to test and to develop a very short feedback loop around. It let’s you test-break-repeat. We have to seek out the difficult and uncomfortable if we wish to grow. This is what has to be on our list — not the things we know how to do well already; there’s little to learn in practicing such things repeatedly.

In practice, concepts are defined, given shape, can even be manipulated, all while being tested. Don’t fall too hard into the trap of reading without doing, of adding items to the list without ever crossing them off. Make sure as soon as you have even the roughest idea of how something might work that you start trying to make it do so.

You have to do things, even when you do them poorly — especially when you do them poorly. Like those well-considered writers who know their stories well because they’ve lived them, because they’ve focused on what they don’t know so that they could write about such things like it was old knowledge — like them, we need to focus on designing what we don’t know, what we don’t understand.

Push Your Limits To Never Feel Stuck Again

All it takes is one thing from our list to lift a project from dull to interesting. Just one tiny thing. The first project you do might only benefit from your learning one small thing, but the second will be improved by what you learned previously and the new task that you’ll tackle for it.

One new thing per project. Some might consider it selfish to use clients’ projects as a means to give yourself an education, but I think it’s a perfect testing ground. It will give your daylight hours more meaning, something to bounce out of bed for.

Personal projects are a great place to learn, too, but the energy available to us outside of our normal office hours is fleeting. If you’re to work on client work anyway, why not derive more benefit from it than just a bit of money?

Cross off the items on your list as often as you can, as quickly as you can, with as much fury and energy as you can muster. It might not feel like much, learning one small thing at a time, but it’ll add up quickly, and it’ll give you a fun little challenge to solve every day. It’s a wonderful thing to experience.

Joyous Ignorance And Worlds Of Possibility

When we’re learning something new, we feel as if a world of possibility has opened before us. We’re wonderfully ignorant of any boundaries. But as we learn more, we make that world smaller. No wonder we can sometimes feel uninspired and stuck.

We rely too easily on what we’ve learned that we don’t add to our mental “need to learn” list. But it’s in lists that we can escape that stuck feeling and once again expand the world of opportunities. Exploring othis list gives us new glasses through which to see the world before us, enabling us to open new doors and gain new experiences. Boredom has never been found when exploring exciting new worlds.

This is all a bit circular. It sounds as though I’m suggesting that shortcuts, which is really knowledge well known and experienced, aren’t to be trusted, and so what you should do is focus on what you don’t know until it’s… well, a shortcut.

The truth is that nothing is wrong with shortcuts. It shows experience and knowledge. The problem occurs when one relies on the same set of shortcuts, the same set of tricks, never adding to their set of skills. For whatever reason, once our skills reach the point at which they are no longer challenged by our clients’ requests, we tend to let them stay where they are.

Few clients are sophisticated enough to know how complex our work can be, so they ask for simple solutions. Our human-natured desire to find the easiest path gives our ego the excuse it needs to simply let these sleeping dogs lie. Why try harder? But before long, the ego that granted us the easy path starts to gripe when we walk down it too often. Somewhere in the pit of our souls, it begins to cry havoc that we aren’t being used for worthy problems.

Vibrant Waters Of The Creative Mind

The waters of the mind stagnate when no new currents of knowledge pass through them. The silt, which is movement made visible, falls to the bottom when undisturbed. The waters sit still and before long are rendered lifeless.

Only through knowledge and new experiences will the waters once again come alive, allowing a vibrant crop of new species, new ideas, to grow and call your mind home. It’s only through the introduction of new ideas that our mind can transform from stagnant pots of water into vibrant ecosystems.

This requires work, a constant and caring tending — not great movements once a week, nor month, nor year, through hollow and meaningless retreats, self-development programs or committees or, worse, the occasional reading of a how-to article, quickly forgotten.

No, only through gentle stirrings daily will the waters of your mind remain lively and fruitful.

How does this work start? The short version is easy enough:

  • List everything you want and need to learn.
  • Read just enough to start experimenting with these listed curiosities.
  • Always find a place in your current project to apply a new experiment.

Write your list, tend to it regularly, and the waters will never go still. If you’re lucky, you might never find yourself stuck and bored, browsing your library of those faded and dented shapes.

(al, il)

Footnotes
  1. 1 http://geekmentalhelp.com/
  2. 2 https://unsplash.com/

The post Feeling Stuck? Design What You Don’t Know appeared first on Smashing Magazine.

When Flowers Start To Bloom, It’s A Sign That SmashingConf Oxford Is Coming Soon!

Tue, 10/28/2014 - 13:00

Crafting a good front-end is no piece of cake. When tough budgets and ambitious goals interweave, you need just the right expertise to make just the right decisions. That’s why we create heavily practical Smashing Conferences, and the upcoming SmashingConf Oxford 201531 isn’t going to be an exception.

2Yes, we’re coming back to the UK: SmashingConf Oxford 201531 will be as practical as usual, taking place in March 16–18th. Get your ticket.4 About The Conference

We don’t care about volatile trends, but we do care about things that work and don’t work in real projects, and why, and that’s exactly what the event will be focusing on. With practical talks, lots of networking, jam sessions, a personal, intimate atmosphere and spectacular surprises (lasers5, anyone?), this is a conference you probably won’t want to miss. A valuable, affordable community event for designers and developers who love their craft. Seriously.

No fluff, no basics, but real actionable insights that you can apply to your work right away. First speakers are already announced6, including Jake Archibald, Zoe M. Gillenwater, Tom Giannattasio, Natalie Yadrentseva, Richard Rutter, Paul Lewis and Peter Bilak. And we’ve got a few hands-on Front-End + RWD workshops7 as well, you know.

£289 / €349
Get your ticket.198350 tickets available, and they’re selling fast. First Confirmed Speakers

We thoroughly curate every single talk and work alongside our speakers to make sure that each presentation fits nicely within the overall theme of the conference. For the Oxford conference, we’re very happy to welcome the first confirmed speakers:

9

  • Jake Archibald
    (Front-End, Google)
  • Zoe M. Gillenwater (+ workshop)
    (Front-end, Flexbox)
  • Tom Giannattasio
    (Front-End, Macaw)
  • Natalie Yadrentseva
    (UX, Data Visualization)
  • Seb Lee-Delisle (+ workshop)
    (Creative JavaScript)
  • Richard Rutter
    (Web typography, Fontdeck)
  • Meagan Fisher
    (Front-End, Visual Design)
  • Paul Lewis
    (Rendering Performance, Google)
  • Lorna Mitchell
    (PHP, Open Source Evangelist)
  • Peter Bilak
    (Typography)
  • Rachel Simpson
    (UX, Google)
  • Yoav Weiss (+ workshop)
    (Responsive Images Group)
  • Polle de Maagt
    (Creative UX, KLM)
  • Christopher Murphy (+ workshop)
    (Designer, Educator)
  • Bruce Lawson
    (Opera, Standards)
  • Mystery Speaker
    (Someone you definitely know.)
  • …more speakers will be announced soon!
10To keep our tradition of holding conferences at unique places, we did not choose lovely Oxford randomly. The venue for the SmashingConf Oxford is the amazing Oxford Town Hall, just like last year. (Image credits11) Seven Valuable, Hands-On Workshops

Conference talks are one thing, but a full-day hands-on workshop another. Why not add a practical workshop on top of your conference experience and come back to your office with a bag full of useful findings, learnings and perhaps even skills? Well, that’s what our workshops are all about! And we’ve got a few pretty, pretty good ones prepared for you:

Get your ticket.198Conf + Workshop ticket? You won't be disappointed. Fair Pricing: £289 / €349 For Two Full Days

We want to make sure that the conference is affordable for everyone, and this is reflected in the pricing for the event. The regular price is £289 (€349) for two full days (incl. UK VAT 20% and all booking fees), but if you are quick, you can snap one of the 50 early-bird tickets20.

Besides, if you get a workshop ticket, too21, you save £100 off the conference + workshop price. Student discounts (25% off) are available on request as well. Quite smashing, isn’t it? We thought so!

22Beautiful SmashingConf sketchnotes by Elisabeth Irgens.
She'll be joining us in Oxford as well. (Image credits23) Location And Hotels

Of course we didn't choose Oxford randomly. It's perhaps the quintessential English city: a gorgeous maze of winding streets, ancient college buildings, eccentric traditions and some very fine hostelries. Every inch of the city centre is packed with history, and no route you choose will disappoint. Made famous by its world-class university, Oxford is just wonderful for exploration and inspiration. And open areas by the flowing Isis river, ponies grazing and some of the best sunsets out there are within walking distance. It's very, very lovely in Oxford.

24Come and learn amongst the dreaming spires of Oxford! (Image credits25) 26One of the historic workshop rooms in the City Hall of Oxford. (Image credits27) 28The view of the stage in the main hall. (Image credits29) 30 Yummy Smashing Cat cupcakes! (Image credits31)

Just like last year, we'll set up an open-stage session a day before the conference, so you can publicly speak about your own experiences and discuss what worked and hasn't worked for you. We'll also put a list of all attendees on the website, so you'll know beforehand who is coming and perhaps even organize a trip to Oxford together.

Sponsors, Dear Sponsors

We pour our heart and soul into creating a friendly, memorable and inspiring community event for everybody involved. Our goal is a valuable community event with practical talks, neatly packed with lots of learning, sharing and networking opportunities.

We keep ticket prices affordable for everyone, and we're happy to welcome sponsors to help us make the conference smashing in every possible way. If you're interested in sponsoring the event, please drop us an email at cat@smashingconf.com32.

Questions?

So here we go! More speakers will be announced soon, and since it's a Smashing conference, you should expect a few surprises, but we're not going to reveal them just yet. If you have any questions, send us an email at hello@smashingconf.com — we'd love to assist you in every possible way and would be humbled and happy to welcome you to Oxford in March!

Ah, and make sure to bring an umbrella with you, of course. But that goes without saying, doesn't it? Cheers!

.shop-that {text-align:center;margin:1.5em auto; max-width: 550px; } .pricing {text-align: center; font-size: 1.75em; /* 24px */ font-family: "Proxima Nova","Helvetica Neue",Arial,sans-serif; font-weight: bold; margin: 2.5em 0em 0 0em;color: #E25A34; display: block} .pre-order-now {font-family:"Proxima Nova","Helvetica Neue",Arial,sans-serif; font-size: 1.85em; /* 20px */color: #fff;padding: .5em 1.45em; vertical-align: middle; text-align: center; margin: 0 auto .08em;display: block; font-weight: bold; background: #F68131; width: 50%; max-width: 100%; line-height: 1.25em; background: -webkit-linear-gradient(top, #FA9334, #F4712B);background: -o-linear-gradient(top, #FA9334, #F4712B);background: linear-gradient(to bottom, #FA9334, #F4712B); border: .04em solid rgba(0,0,0,0.15);opacity: 1; border-radius: .4em; text-shadow: 0 .08em .08em rgba(0,0,0,0.1);-webkit-box-shadow: 0 .08em .1em rgba(0,0,0,0.1);box-shadow: 0 .08em .1em rgba(0,0,0,0.1); -webkit-transition: all ease .3s;-o-transition: all ease .3s;transition: all ease .3s; } .pre-order-now:hover,.pre-order-now:focus {cursor: pointer; opacity: .97; outline:0; box-shadow: 3px 5px 5px 0px #ccc;} .pre-order-now:active {opacity: 1;-webkit-box-shadow: inset 0 .13em .13em rgba(0,0,0,.4), inset 0 -.13em .13em rgba(255,255,255,.1);box-shadow: inset 0 .13em .13em rgba(0,0,0,.4), inset 0 -.13em .13em rgba(255,255,255,.1);outline:0;} .im-loving-it {font-family: "Proxima Nova","Helvetica Neue",Arial,sans-serif;font-size:1.1em;text-align:center;margin: 1em 0em 2em 0em;display: block;color: #808D91;} Footnotes
  1. 1 http://smashingconf.com/oxford-2015/
  2. 2 http://smashingconf.com/oxford-2015/
  3. 3 http://smashingconf.com/oxford-2015/
  4. 4 http://smashingconf.com/oxford-2015/registration
  5. 5 https://vimeo.com/89624072
  6. 6 http://smashingconf.com/oxford-2015/speakers
  7. 7 http://smashingconf.com/oxford-2015/workshops
  8. 8 http://smashingconf.com/oxford-2015/registration
  9. 9 http://www.smashingconf.com/oxford-2015
  10. 10 http://www.smashingconf.com/oxford-2015/
  11. 11 https://www.flickr.com/photos/deebeejay/13295503754/in/photostream/
  12. 12 http://smashingconf.com/oxford-2015/workshops/zoe-mickley-gillenwater
  13. 13 http://smashingconf.com/oxford-2015/workshops/guy-pordjany
  14. 14 http://smashingconf.com/oxford-2015/workshops/seb-lee-delisle
  15. 15 https://shop.smashingmagazine.com/smashingconf-oxford-workshop-idea-factories.html
  16. 16 http://smashingconf.com/oxford-2015/workshops/yoav-weiss
  17. 17 http://smashingconf.com/oxford-2015/workshops/vitaly-friedman
  18. 18 http://smashingconf.com/oxford-2015/workshops/marko-dugonjic
  19. 19 http://smashingconf.com/oxford-2015/registration
  20. 20 https://shop.smashingmagazine.com/smashing-conference-oxford-2015-eb.html
  21. 21 https://shop.smashingmagazine.com/smashing-conference-workshop-ticket-oxford-2015.html
  22. 22 http://elisabethirgens.com/wp/wp-content/uploads/2014/03/2014oxford-16-tyler.jpg
  23. 23 http://elisabethirgens.com/2014/smashingoxford/
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2013/10/oxfrod-cupola.jpg
  25. 25 https://www.flickr.com/photos/simononly/7988394843/
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/Smashingconf-Oxford-workshop-room.jpg
  27. 27 https://www.flickr.com/photos/marcthiele/13217092874/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/10/scott-kellum-stage-opt.jpg
  29. 29 https://www.flickr.com/photos/deebeejay/13295150495/
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/10/Smashingconf-Oxford-muffins.jpg
  31. 31 https://www.flickr.com/photos/marcthiele/13264531553/
  32. 32 cat@smashingconf.com

The post When Flowers Start To Bloom, It’s A Sign That SmashingConf Oxford Is Coming Soon! appeared first on Smashing Magazine.

You Are Not A Machine. You Are Not Alone.

Mon, 10/27/2014 - 14:06

Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. {Geek} Mental Help Week1 starts today and we would like to help raise awareness with a couple of articles exploring these issues. – Ed.

It was pouring with rain and I found myself driving. I didn’t know where I was going. I just needed out of the house. I needed to escape. After what felt like an age I found myself parked outside my parents’ house, just staring at their front door. Eventually I got out of the car, rang the doorbell and burst into tears the moment my mum answered.

Me, a grown man. A respected figure in my field. A success. Standing on the doorstep of my parents’ house, crying to my mum like a small child. This was the breaking point for me, the minute I finally realized I had depression. In fact I’d been depressed for over a decade. Burnt out. Used up with nothing left to give.

It had started back in the late nineties when I took a job with a dot com. I had a boss who was a bully, plain and simple. He shouted, he threatened, he manipulated. I stood up to him, but it drained me. Every day was a battle.

He was replaced, but the next guy wasn’t much better. He used to put me in a room with the company’s investors and make me present to them. He knew I was a good presenter, so when things got tough he would wheel me out. But he would sit next to me through the meetings kicking me under the table when I said something he didn’t like.

In time, the dot com bubble burst and I found myself forced to make people redundant. People I knew. People I considered my friends. Worse than that was having to make redundant people I didn’t know, people who worked for companies we had acquired. When you have to make a friend redundant at least they know you find it hard, that you don’t want to do it. When you fire a stranger, you are just an evil hatchet man.

From bad experiences, good things grew. Following the dot com company folding, I and two colleagues set up Headscape, the agency I run to this day. I love Headscape. I love the people I work with. But the stress didn’t dissipate – if anything, it
increased.

I remember standing in a newsagent’s, wasting time before a big pitch. I was terrified. Terrified of not winning the work, work we needed as a company to survive. The last thing I wanted was to have to make people redundant again. I was so worried that I vomited, right there in the middle of the shop.

I love working for myself but every month is a roller coaster. Either we have too much work and I fret about delivering, or not enough and we worry about going out of business.

Then there is the pressure to keep up. The day I read Jeffrey Zeldman’s book Designing with Web Standards was one of the most terrifying of my life: the sudden realization that the table-based design I had built my career on was about to go away; that I would need to relearn my entire skill set.

Not that this was the end of the changes. The demise of Flash, the rise of user-centred design, content strategy, the mobile web, responsive design. The list goes on. Always something new to learn. Always the pressure to keep up.

Even now, twelve years into Headscape, things are hard. Like many agencies right now, we had a bad first half of the year. The sector feels like it is changing again, and so once again the pressure is on.

But this time is different. This time I will not end up on my parents’ doorstep in floods of tears. Because along the way I have learnt something. I am not a computer. I am not a machine. I am a human being.

We demand too much of ourselves as web professionals. We lie to one another, all living in a consensual delusion we build together. We talk about digital being our passion. We tell each other how great our jobs are. We work every hour in the day either in the hopes of getting bought by Google, or because we have convinced ourselves we enjoy it. Maybe we do and maybe we will be bought by Google, but is it healthy? I can tell you from experience it is not.

2I realized that I was not a machine able to work 24/7. I realized I had times of insane productivity and then periods where I needed to rest; that I could not expect to churn out high quality work without stepping away from time to time. (Image credits3)

I realized something else, too. I realized that I could be human with my colleagues, that I didn’t need to pretend to be a machine. This I discovered when I told my co-founders I was burnt out; they understood and helped lighten the load. When I shared my depression online, nobody laughed at me or thought I was weak. Instead they thanked me for allowing them to talk about their struggles.

In fact, I found huge support from total strangers, people who suffered or were going through the same difficulties as me. Far, far more than I ever could have guessed, based on the way we talk online. If you believe what we post online, we are all happy, successful and rich.

And I had one final revelation. I realized I wasn’t a machine stuck in a preprogrammed routine. I could change things. I started looking after myself both physically and mentally. I found friends outside the web. I took regular walks, found other interests, and spoke up about my struggles. I even stopped working long hours, screw the consequences. As it turned out, I just learned to work smarter. Long hours are not a badge of honor, they are a sign of failure, pure and simple.

As part of my job I meet hundreds of web designers every year, either at conferences or as part of my work within organizations. Many are contractors who never get a holiday and worry about being able to pay the bills. Others are in-house web developers so beaten down they are resigned to being trapped in their organization forever. And yet what do you read online? You read about successful startups, acquisitions, and competitors with their amazing client lists.

You might think this all sounds rather depressing but, you know, it isn’t. It is meant as an encouragement, that if you are struggling you are not alone; that there is not something wrong with you, there is something wrong with the industry.

This post gives you permission. Permission to stop being a machine and become a human being. Permission to spend some days in your pants watching daytime TV rather than working. Permission to be honest about your fears and stresses. Permission to tell somebody you are struggling and get help.

For those of you reading this thinking “Well, my work is my passion and I am happy” then good for you! But it won’t always be like that. There will be times when it gets tough. They won’t last forever but they will happen. I ask you to remember one thing when those times come… You are not a machine. Allow yourself to be human by cutting yourself some slack and getting help.

If you’d also like to get involved, please don’t hesitate to submit an article4 and share your experiences. We’d sincerely appreciate it.

(il, og)

Footnotes
  1. 1 http://geekmentalhelp.com/
  2. 2 https://www.flickr.com/photos/87957708@N00/324259281/
  3. 3 https://www.flickr.com/photos/87957708@N00/324259281/
  4. 4 https://github.com/Heydon/geek-mental-help-week

The post You Are Not A Machine. You Are Not Alone. appeared first on Smashing Magazine.

How To Run A Content-Planning Workshop

Fri, 10/24/2014 - 09:00

Back when my agency started taking content seriously, we invested a lot time in developing a process to produce content. The biggest challenge was always figuring out how to get clients onboard with this new process.

Most of our clients were totally happy riffing on how to meet the business objectives of a project or how to approach the visual design, but they always struggled to get to grips with our process for producing content. We found that the most effective way to get their buy-in was to run a content-planning workshop.

Workshops work really well to get everyone onboard with how to produce content (while also clarifying how to agree on content). By involving as many people from the client’s side as possible in these workshops, you can really underline people’s responsibilities, while also highlighting that this process won’t happen overnight.

In this article, I’ll share the approach we developed to run content-planning workshops with our clients. While you will need to adapt the format to your scenario, you should be able to apply most of the steps.

1. Prepare

You’ll have to sort out a few things before inviting your client to the workshop. These workshops have a few components, so put in the work beforehand to make sure everything runs smoothly and you don’t have awkward pauses during the session.

Put in some planning work beforehand to make sure everything runs smoothly and to avoid awkward pauses. Find a Venue

You’ll want to get a room with a large table and a whiteboard. You could bring the client to your agency’s boardroom or do the workshop somewhere off-site that you agree on. Having an inspiring new environment is always good for the client. Sometimes the client will be engaged, but I’ve been in a few workshops where no one wanted to be there and were constantly checking their email or not taking it seriously. Working off-site might hold everyone’s interest better; it also makes it easier to set ground rules (no phones, for example).

Invite the Project Manager, Project Owner and Senior Editor

These roles will vary hugely according to the project. Either way, involve some kind of senior manager and someone on the ground who will actually be producing the content. This way, you’ll get buy-in from the top and a realistic plan from the bottom.

Invite a technical person, too, so that they can talk about CMS formatting and any details regarding migration and publishing processes. By inviting people who represent key areas of the project, you are minimizing risk. I’ve been in workshops where someone from legal turned up and effectively redefined the requirements by sharing important legal requirements.

Invite Representatives From Different Teams

Invite one or two representatives from each of these groups: writers and producers, subject experts, and digital producers. Again, these roles will vary according to your situation. Essentially, you want to get managers from a cross-section of departments, as well as the people who will actually be carrying out the production process that you map out. Be aware of organizational politics and the workloads of the people you’re involving.

Bring Materials

Bring plenty of sticky notes and markers and some big sheets of paper. These will be used throughout the workshop, and you will need enough for up to three groups.

2. Map Your Process

First, look at the production stages that a piece of content will need to go through before it is ready to be published. This generally starts with identifying the key content types (for example, “product pages,” “course summary pages,” “how-to guides”). Content types are not necessarily “pages” as such, but could be more modular components of the website — things like product specifications or staff biographies.

Look at the production stages that a piece of content will need to go through before it is ready to be published.

Once you’ve identified the main content types, look at what’s involved in taking them from a basic page brief (which outlines what an item of content is supposed to achieve) to a product that is published and maintained.

Choose a Content Type

Choose a content type that you expect to appear on your new website, such as a service or product page, a blog post or a course outline. Choose something that everyone can relate to; avoid specialized content types such as legal documents and engineering reports.

Map a Publishing Process

In groups, map out a production process to get a single piece of content published on the new website. Again, this will vary a lot according to your team (for example, depending on who will be doing the heavy lifting of producing the content).

A simple workflow might look something like this:

  1. Draft content
  2. Edit tone of voice
  3. Review internally
  4. Get approval from client
  5. Optimize for search engines
  6. Import to CMS
  7. Review web page
  8. Publish
  9. Maintain

The workflow will vary considerably from project to project. You might need to account for legal and compliance reviews or technical accuracy, or you might need to specify phases for formatting and publishing content (such as formatting for mobile or converting items into downloadable PDF documents). This is another reason to start with a fairly generic piece of content, and then move on to creating more elaborate workflows for specific content types or sections of the website.

The bias that stems from people’s roles in the project is always interesting to see (which is why having people with different roles involved in the workshop is so valuable in the first place). You might find legal representatives claiming to need four separate stages for legally reviewing every page, while a copywriter might want to break the editing for tone of voice into multiple phases. A concerted team effort should result in a workflow that is balanced, realistic and agreed on.

3. Assign Responsibility

One of the most powerful things about these workshops is that you assign responsibility, making clear who exactly is accountable for which work. Failing to clarify responsibility over content is one of the most common causes for delays. Bottlenecks happen usually because people simply do not know they were expected to produce content or because responsibility has all been put on one person. This part of the workshop should prevent such trouble.

Failing to clarify responsibility over content is one of the most common causes for delays. Assign Responsibility

Annotate each stage on your sheet with the person or role responsible for it. This might look something like this:

  1. Draft content: subject expert
  2. Edit tone of voice: copywriter
  3. Review internally: senior editor
  4. Get approval from client: project owner
  5. Optimize for search engines: SEO editor
  6. Import to CMS: CMS editor
  7. Review web page: project owner
  8. Publish: CMS editor
  9. Maintain: subject expert
Identify Lack of Ownership

Mark any stages that don’t have a clear owner. This is often a huge revelation. “We need to hire an SEO editor!” “We need a copywriter!” “We need a pastry chef!” By simply highlighting the parts of the process for which no one is responsible, you’ll quickly see where the challenges for your project lie. By acknowledging these now, you will save a huge amount of stress down the line. You might find that the plan is solid and has no gaps, or you might immediately see that hiring a copywriter will save you a whole lot of trouble. Either way, this part of the workshop is critical.

Clarify Responsibilities

Ask, “Do the people responsible know they are responsible?” This is another great opportunity to minimize risk. Make sure that everyone knows what’s expected of them, and see whether anyone has too much on their plate. A well-organized content inventory or dedicated project-management software comes in handy here.

4. Identify Risks In The Process

Building on the previous step, make sure the following questions are resolved to avoid bottlenecks.

“Do Too Many People Have a Say?”

Multiple heads are sometimes not better than one for producing content. Keep an eye out for pages or sections of the website that have a lot of editors and reviewers involved. I’ve seen so many projects delayed because content was bounced between editors for days on end, often just leading to over-edited and nonsensical text.

“Is One Person Overburdened?”

These workshops are the perfect time to assess the volume of work assigned to individuals and assess how realistically they can get it done. Give less outspoken people a chance to air their concerns, which is a lot easier when you’ve estimated the hours of work involved. Speak with each individual to review their workload.

“Do We Have the Skills Required?”

Is poorly written content a risk? Or could the content be misinformed (due to a lack of expertise)? Will the content be optimized for search engines? Go back to your content requirements and make sure you have the manpower to meet them all. If you don’t, call for some outside help.

“Where Might Things Get Political or Contentious?”

It’s an awkward subject to broach, but organizational politics could pose a serious threat to the project. I’ve often seen people hold back their opinion (or, more dangerously, overestimate their ability to deliver work) due to certain people being in the room or politics. The best way to deal with this is simply to treat all team members as equals and to ask probing questions of everyone in the room.

5. Estimate Hours

It might not be easy, but try to calculate the man hours of work required to complete each stage of the process. This isn’t the same as calculating how long it will take to complete a stage, although both are important when planning resourcing.

Estimatehow much effort is required to complete each stage. Estimate Workload

Estimate (in fractions of hours) how much effort is realistically required to complete each stage. Once you’ve come to an agreement on the time required, write the number beside each stage. If the debate about estimates is taking too long, you could try adapting the “planning poker1” technique used in scrum.

Calculate Time

Add up the time required to complete all stages. This might be a good time for a break.

Estimate Total Workload

Multiply the total time by the number of pages anticipated for the website to get an estimate of the total amount of effort required for all of your content. As mentioned, you might be dealing with modules or items of content (things like product specifications or staff biographies), rather than pages. Either way, consider the average size of these items to get a realistic estimate of the time required to get the work done. I often group together additional content, such as microcopy, treating it as a single item in the calculation.

The calculation might look like this: 4 hours (time to produce and approve one page) × 125 pages = 500 hours of work.

6. Present The Process

Everyone should review the process at the end of the workshop to be clear on what’s going to happen, who is doing what and how it will be implemented. This is also a good time to outline the next steps.

Walk Through the Process

Each group should walk the whole team through their process (on a sheet of paper) and then open up the presentation for discussion. The person facilitating the workshop should go around and get input from everyone in the room. Address any concerns or anxieties immediately. Concerns tend to focus on whether there is enough time! Also, address any technical issues that people might not feel confident asking about.

Try to film the presentations so that any absent stakeholders can keep up with the discussion.

Following this discussion, move on to the slightly more serious task of setting realistic deadlines for the content and assigning responsibility. Talk about the software you might use to host your editorial calendar2, once you have a clear idea of the process that the software has to support. Choosing the software first could lead you to have to shoehorn the process in; this is best avoided!

Workshops Work

That’s the process we’ve developed to run workshops with our clients. Hopefully, this template will help you to run successful content-planning workshops of your own and, more importantly, help you to get content finished on time and to a high standard.

With everyone on the same page (literally), the risk of delays with content production will be far less.

Additional Resources

(al, ml)

Footnotes
  1. 1 http://en.wikipedia.org/wiki/Planning_poker
  2. 2 http://blog.crazyegg.com/2013/10/18/content-strategy-editorial-calendar/
  3. 3 http://www.lagomstrategy.net/blog/2014/16/06/8-tactics-help-clients-produce-web-project-content
  4. 4 https://blog.gathercontent.com/art-of-content-approval
  5. 5 http://alistapart.com/article/a-checklist-for-content-work
  6. 6 https://gathercontent.com/content-production-planning-for-agencies
  7. 7 http://www.hilarymarsh.com/2014/04/23/lets-talk-migration/
  8. 8 http://alistapart.com/article/clientcontent

The post How To Run A Content-Planning Workshop appeared first on Smashing Magazine.

Reducing Abandoned Shopping Carts In E-Commerce

Thu, 10/23/2014 - 12:43

In March 2014, the Baymard Institute, a web research company based in the UK, reported that 67.91%1 of online shopping carts are abandoned. An abandonment means that a customer has visited a website, browsed around, added one or more products to their cart and then left without completing their purchase. A month later in April 2014, Econsultancy stated2 that global retailers are losing $3 trillion (USD) in sales every year from abandoned carts.

Clearly, reducing the number of abandoned carts would lead to higher store revenue — the goal of every online retailer. The question then becomes how can we, as designers and developers, help convert these “warm leads” into paying customers for our clients?

Before Cart Abandonment

Let’s begin by looking at recognized improvements we can make to an online store to reduce the number of “before cart” abandonments. These improvements focus on changes that aid the customer’s experience prior to reaching the cart and checkout process, and they include the following:

  • Show images of products.
    This reinforces what the customer is buying, especially on the cart page.
  • Display security logos and compliance information.
    This can allay fears related to credit-card and payment security.
  • Display contact details.
    Showing offline contact details (including a phone number and mailing address) in addition to an email address adds credibility to the website.
  • Make editing the cart easier.
    Make it as simple as possible for customers to change their order prior to checking out.
  • Offer alternative payment methods.
    Let people check out with their preferred method of payment (such as PayPal and American Express, in addition to Visa and MasterCard).
  • Offer support.
    Providing a telephone number and/or online chat functionality on the website and, in particular, on the checkout page will give shoppers confidence and ease any concerns they might have.
  • Don’t require registration.
    This one resonates with me personally. I often click away from websites that require lengthy registration forms to be filled out. By allowing customers to “just” check out, friction is reduced.
  • Offer free shipping.
    While merchants might include shipping costs in the price, “free shipping” is nevertheless an added enticement to buy.
  • Be transparent about shipping costs and time.
    Larger than expected shipping costs and unpublished lead times will add unexpected costs and frustration.
  • Show testimonials.
    Showcasing reviews from happy customers will alleviate concerns any people might have about your service.
  • Offer price guarantees and refunds.
    Offering a price guarantee gives shoppers the confidence that they have found the best deal. Additionally, a clear refund policy will add peace of mind.
  • Optimize for mobile.
    Econsultancy reports that sales from mobile devices increased by 63% in 2013. This represents a real business case to move to a “responsive” approach.
  • Display product information.
    Customers shouldn’t have to dig around a website to get the information they need. Complex navigation and/or a lack of product information make for a frustrating experience.

Unfortunately, even if you follow all of these recommendations, the reality is that customers will still abandon their carts — whether through frustration, bad design or any other reason they see fit.

After Cart Abandonment

The second approach is to look at things we can do once a cart has been abandoned. One tactic is to email the customer with a personalized message and a link to a prepopulated cart containing the items they had selected. This is known as an “abandoned cart email.”

The concept is pretty simple. At the right time, a customizable email is sent, complete with a personalized message and a link to the customer’s abandoned cart. Of course, this approach assumes that the customer has submitted their email address — effectively, they’ve done everything but paid. Abandoned cart emails represent one last attempt by the merchant to convince the buyer to check out.

In September 2013, Econsultancy outlined3 how an online cookie retailer recaptured 29% of its abandoned shopping carts via email. This is a huge figure and one we might naturally be skeptical of.

To get a more realistic perspective, I asked my colleagues at Shopify4 to share some of their data on this, and they kindly agreed. Shopify introduced “abandoned cart recovery” (ACR) in mid-September 2013 (just over a year ago at the time of writing). Here’s a summary of its effectiveness:

  • In the 12 months since launching automatic ACR, $12.9 million have been recovered through ACR emails in Shopify.
  • 4,085,592 emails were sent during this period, of which 147,021 carts were completed as a result. This represents a 3.6% recovery rate.
  • Shop owners may choose to send an email 6 or 24 hours after abandonment. Between the two, 6-hour emails convert much better: a 4.1% recovery rate for 6 hours versus 3% for 24 hours.

It’s worth noting that the 3.6% recovery rate is from Shopify’s ACR emails. Many merchants use third-party apps5 instead of Shopify’s native feature. Given that Shopify is unable to collect data on these services, the number of emails sent and the percentage of recovered carts may well be higher.

Given the statistics, abandoned cart emails are clearly an important part of an online retailer’s marketing strategy. Luckily, most leading e-commerce platforms enable merchants to send custom emails, either in plain text or HTML. Knowing how to implement these notifications is a useful skill if you are designing for e-commerce, and they represent added value to your services.

Creating An HTML Abandoned Cart Email

The implementation of abandoned cart emails varies from platform to platform. Some platforms require third-party plugins, whereas others have the functionality built in. For example, both plain-text and HTML versions are available on Shopify. While the boilerplates are very usable, you might want to create a custom HTML version to complement the branding of your store. We’ll look at options and some quick wins shortly.

In recent years, HTML email newsletters have really flourished. You only have to look at the many galleries6 to see how far this form of marketing has progressed. Sending an HTML version, while not essential, certainly allows for more flexibility and visual design (although always sending a plain-text version, too, is recommended). However, it’s not without its pain points.

If you’ve been developing and designing for the web since the 1990s, then you will remember, fondly or otherwise, the “fun” of beating browsers into shape. Designing HTML newsletters is in many ways a throwback to this era. Table-based layouts are the norm, and we also have to contend with email clients that render HTML inconsistently.

Luckily for us, the teams at both Campaign Monitor7 and MailChimp8 have written extensively on this subject and provide many solutions to common problems. For example, Campaign Monitor maintains a matrix and provides a downloadable poster9 outlining the CSS support of each major desktop and mobile email client. MailChimp, for its part, provides numerous resources on CSS10 and email template design11. Familiarizing yourself with the basics before tackling your first HTML email is worthwhile — even if you ultimately use a template.

Open-Source Responsive Email Templates

While many of you might wish to “roll your own” template, I often find it easier to build on the great work of others. For example, a number of great open-source projects focus on HTML email templates, including Email Blueprints12 by MailChimp.

Another example comes from Lee Munroe. His “transactional HTML email templates13” differ in that they are not intended for use as newsletters, but rather as “transactional” templates. To clarify the difference, Lee breaks down transactional email into three categories:

  • action emails
    “Activate your account,” “Reset your password”
  • email alerts
    “You’ve reached a limit,” “A problem has occurred”
  • billing emails
    monthly receipts and invoices

The templates are purposefully simple yet elegant. They also have the added benefit of having been throughly tested in all major email clients. Finally, because they are responsive, they cater to the 50+%14 of emails opened via mobile devices.

The Challenge

Lee’s templates are a good option for creating a simple HTML email for abandoned carts. Therefore, let’s move on from the theory and look at how to create an HTML template for the Shopify platform.

Let’s begin by setting some constraints on the challenge:

  1. make the fewest number of markup changes to Lee’s template;
  2. make use of the boilerplate text that is set as the default in the abandoned cart HTML template in Shopify;
  3. inline all CSS (a best practice for HTML email);
  4. send a test email with dummy data, and review the results in Airmail, Gmail and Apple Mail (on iOS).
1. Create a Local Copy of the Action Email Template

Having looked at the three templates, the “action” version appears to offer the best starting point. You can download the HTML for this template directly from GitHub15 if you wish to follow along.

The first step is to take the contents of Lee’s template and save it locally as abandoned-cart.html. A quick sanity check in a browser shows that the style sheet isn’t being picked up.

16Basic template setup. (View large version17)

Inlining all CSS is recommended (we’ll look at this in a later step), so add the styles to the <head> section of abandoned-cart.html. You can copy the CSS in its entirety from GitHub18 and then paste it in a <style> element. Another check in the browser shows that the styles are being applied.

CSS applied. 2. Add the Content

Now that the template is working as a standalone document, it’s time to look at integrating Liquid19’s boilerplate code from Shopify’s default template. This can be found in the Shopify admin section under “Settings” → “Notifications” → “Abandoned cart.” If you wish to follow along with these code examples, you can set up a free fully featured development store20 by signing up to Shopify’s Partner Program21.

Hey{% if billing_address.name %} {{ billing_address.name }}{% endif %}, Your shopping cart at {{ shop_name }} has been reserved and is waiting for your return! In your cart, you left: {% for line in line_items %}{{ line.quantity }}x {{ line.title }}{% endfor %} But it’s not too late! To complete your purchase, click this link: {{ url }} Thanks for shopping! {{ shop_name }}

All notification emails in Shopify make use of Liquid, the templating language developed by Shopify and now available as an open-source project and found in tools such as Mixture22 and software such as Jekyll23 and SiteLeaf24. Liquid makes it possible to pull data from the store — in this case, all of the details related to the abandoned cart and the user it belonged to.

Having studied the markup, I’ve decided to place the boilerplate content in a single table cell, starting on line 2725 of Lee’s original document.

After pasting in the boilerplate code, let’s double-check that the template renders as expected in the browser. At this stage, Liquid’s code is appearing “as is.” Only once the template is applied to Shopify’s template will this be replaced with data from the store.


Boilerplate text added. 3. Modify the Boilerplate Code

The next stage involves tidying up some of the boilerplate code, including wrapping the boilerplate text in <p> tags. Then, it’s time to work out how best to display the cart’s contents in markup. For speed, I’ve chosen an unordered list. Liquid’s refactored for loop26 is pretty straightforward:

<ul> {% for line in line_items %} <li>{{ line.quantity }} x {{ line.title }}</li> {% endfor %} </ul>

After another sanity check, things are looking much more promising. However, we need to make a few final tweaks to make it work:

  • remove unwanted table rows,
  • add the correct link to the blue call-to-action button,
  • change the contents of the footer.
Tidying up. 4. Make Final Adjustments

Lee’s template includes markup to create a big blue “Click me” button. You can see this on line 3827:

<a href="http://www.mailgun.com" class="btn-primary">Upgrade my account</a>

Let’s turn this into a relevant link by changing the markup to this:

<p><a href="{{ url }}" class="btn-primary">Check out now</a></p> Adding the call-to-action URL.

In this case, {{ url }} represents the link to the abandoned (and saved) cart. I’ve enclosed the anchor in a paragraph to ensure consistent spacing when the email is rendered, and I’ve moved it up into the main section.

Finally, we’ve changed the unsubscribe link in the footer to a link to the shop:

<a href="{{ shop.url }}">Visit {{ shop_name }}</a>

After a few minutes of editing, the template looks more than respectable. However, we’ve neglected one section, the text in the yellow highlighted “alert” section. I’ve changed this, along with the title element in the HTML, to this:

Changing the header text and footer link. Your cart at {{ shop_name }} has been reserved and is waiting for your return!

Email notifications in Shopify have access to a number of variables that can be accessed via Liquid. A full list is available in Shopify’s documentation28.

5. Inline the CSS

To recap, we’ve changed the template’s markup very little, and the CSS is identical to Lee’s original (albeit in the template, rather than in an external file). Shopify’s boilerplate text is also intact, albeit with a very small change to Liquid’s for loop.

The next step is to inline the CSS in the HTML file. Because some email clients remove <head> and <style> tags from email, moving the CSS inline means that our email should render as intended. Chris Coyier penned “Using CSS in HTML Emails: The Real Story29” back in November 2007 — the landscape hasn’t changed much since.

Thankfully, taking your CSS inline isn’t a long or difficult process. In fact, it’s surprisingly easy. A number of free services30 enable you to paste markup and will effectively add your styles inline.

I’ve chosen Premailer31 principally because it has a few extra features, including the ability to remove native CSS from the <head> section of the HTML document, which saves a few kilobytes from the file’s size. After pasting in the markup and pressing “Submit,” Premailer generates a new HTML version that you can copy and paste back into your document. It also creates a plain-text version of the email, should you need it.

32Premailer has the ability to remove native CSS which saves a few kilobytes. (View large version33)

Another great feature of Premailer is that you can view the new markup in the browser. You’ll find a link above the text box containing the new markup, titled “Click to View the HTML Results.” Clicking the link opens a hosted version of the new markup, which you can use to check your sanity or share with colleagues and clients.

If you are keen to automate the creation of e-commerce notification emails, then Premailer also offers an API34. A number of libraries that support it are also available on GitHub, including PHP-Premailer35.

The final task is to copy the new HTML code and paste it in the “HTML” tab of our abandoned cart notification in Shopify’s admin area. Once it’s applied, you can preview the email in the browser, as well as send a dummy copy to an email address.

36Shopify admin. (View large version37)

Below are the results in various email clients (both mobile and desktop).

Airmail 38Airmail rendering. (View large version39) Apple Mail 40Apple Mail rendering. (View large version41) Gmail (Browser) 42Gmail rendering. (View large version43) Apple Mail on iOS 44Apple Mail on iOS rendering. (View large version45)

The process of turning Lee’s template into a usable email took around 30 minutes, and I am pretty pleased with the result from such little input.

Of course, this process screams out for automation. For those who are interested, Lee has also posted about his workflow for creating HTML email templates46 and the toolkit he uses (Sketch, Sublime, Grunt, SCSS, Handlebars, GitHub, Mailgun, Litmus).

Taking It Further

The template produced above is admittedly quite basic and only scratches the surface of what is possible. We could do plenty more to customize our email for abandoned carts, such as:

  • consider tone of voice,
  • show product images to jog the customer’s memory,
  • add a discount code to encourage the user to return and buy,
  • add upsells,
  • list complementary products.
Dodo Case

Tone of voice is a key consideration and goes a long way to engaging the customer. Dodo Case4947 has a great example:

48Dodo Case4947’s email for abandoned carts. (View large version50)

As always, context is very important when it comes to tone of voice. What’s right for Dodo Case might not be right for a company specializing in healthcare equipment.

Let’s review a few examples (taken from Shopify’s blog51) to get a taste of what other companies are doing.

Fab 52Fab5553’s email for abandoned carts. (View large version54)

While this email from Fab5553 is pretty standard, the subject line is very attention-grabbing and is a big call to action.

Chubbies 56Chubbies57’ email for abandoned carts. (View large version58)

The language and tone used in Chubbies’ email really stands out and is in line with the brand: fun-loving people. There’s also no shortage of links back to the cart, including the title, the main image and the call to action towards the bottom of the email.

Black Milk Clothing 59Black Milk60’s email for abandoned carts. (View large version61)

Black Milk Clothing62 includes a dog photo and employs playful language, such as “Your shopping cart at Black Milk Clothing has let us know it’s been waiting a while for you to come back.”

Holstee 63Holstee6664’s email for abandoned carts. (View large version65)

Finally, Holstee6664 asks if there’s a problem they can help with. It even goes so far as to include a direct phone number to its “Community Love Director.” Having worked with Holstee, I can confirm that this is a real position within the company!

Conclusion

While there are many tactics to persuade customers to buy, inevitably some people will get to the payment screen and decide not to continue. Any tactic that helps to seal the deal is certainly worth considering, and given the small amount of work involved in implementing an email to recover abandoned carts, it’s a great place to start. Designers and developers are in a powerful position to help their clients increase their revenue, and being armed with tactics such as the ones outlined in this article will hopefully enable them to offer a wider range of services.

Further Reading

(al, ml)

Footnotes
  1. 1 http://baymard.com/lists/cart-abandonment-rate
  2. 2 https://econsultancy.com/blog/64680-six-tactics-for-reducing-cart-abandonment-rates#i.weabnjzqdeyu10
  3. 3 https://econsultancy.com/blog/63466-nine-case-studies-and-infographics-on-cart-abandonment-and-email-retargeting#i.weabnjzqdeyu10
  4. 4 http://shopify.com
  5. 5 https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=abandoned
  6. 6 http://inspiration.mailchimp.com/
  7. 7 http://campaignmonitor.com
  8. 8 http://mailchimp.com
  9. 9 https://www.campaignmonitor.com/css/
  10. 10 http://templates.mailchimp.com/resources/email-client-css-support/
  11. 11 http://templates.mailchimp.com/
  12. 12 https://github.com/mailchimp/Email-Blueprints
  13. 13 http://blog.mailgun.com/transactional-html-email-templates/
  14. 14 http://emailclientmarketshare.com/
  15. 15 https://raw.githubusercontent.com/mailgun/transactional-email-templates/master/templates/alert.html
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-template-setup-opt.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-template-setup-opt.png
  18. 18 https://raw.githubusercontent.com/mailgun/transactional-email-templates/master/templates/styles.css
  19. 19 http://docs.shopify.com/themes/liquid-documentation/basics
  20. 20 http://docs.shopify.com/themes/theme-development/getting-started/development-environment
  21. 21 http://www.shopify.com/partners
  22. 22 http://mixture.io
  23. 23 http://jekyllrb.com/
  24. 24 http://www.siteleaf.com/
  25. 25 https://github.com/mailgun/transactional-email-templates/blob/master/templates/alert.html#L27
  26. 26 http://docs.shopify.com/themes/liquid-documentation/objects/for-loops
  27. 27 https://github.com/mailgun/transactional-email-templates/blob/master/templates/alert.html#L38
  28. 28 http://docs.shopify.com/manual/settings/notifications/email-variables
  29. 29 http://css-tricks.com/using-css-in-html-emails-the-real-story/
  30. 30 https://www.google.co.uk/webhp?sourceid=chrome-instant&amp;ion=1&amp;espv=2&amp;ie=UTF-8#q=inline+css+html+email
  31. 31 http://premailer.dialect.ca/
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-premailer-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/10/07-premailer-opt.jpg
  34. 34 http://premailer.dialect.ca/api
  35. 35 https://github.com/onassar/PHP-Premailer
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-template-8-opt.jpg
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-template-8-opt.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-airmail-opt.png
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-airmail-opt.png
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-ios-opt.jpg
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-ios-opt.jpg
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-gmail-opt.png
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-gmail-opt.png
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-mail-opt.png
  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-mail-opt.png
  46. 46 http://www.leemunroe.com/email-design-workflow/
  47. 47 http://www.dodocase.com/
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-dodocase-opt.png
  49. 49 http://www.dodocase.com/
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-dodocase-opt.png
  51. 51 http://www.shopify.co.uk/blog/12522201-13-amazing-abandoned-cart-emails-and-what-you-can-learn-from-them
  52. 52 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-fab-opt.jpg
  53. 53 http://www.fab.com
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-fab-opt.jpg
  55. 55 http://www.fab.com
  56. 56 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-chubbies-opt.jpg
  57. 57 http://www.chubbiesshorts.com/
  58. 58 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-chubbies-opt.jpg
  59. 59 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-blackmilk-opt.jpg
  60. 60 http://blackmilkclothing.com/
  61. 61 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-blackmilk-opt.jpg
  62. 62 http://blackmilkclothing.com/
  63. 63 http://www.smashingmagazine.com/wp-content/uploads/2014/10/17-holstee-opt.png
  64. 64 http://holstee.com
  65. 65 http://www.smashingmagazine.com/wp-content/uploads/2014/10/17-holstee-opt.png
  66. 66 http://holstee.com
  67. 67 https://econsultancy.com/blog/63466-nine-case-studies-and-infographics-on-cart-abandonment-and-email-retargeting#i.weabnjzqdeyu10
  68. 68 http://www.exacttarget.com/blog/13-best-practices-for-email-cart-abandonment-programs/
  69. 69 http://blog.mageworx.com/2014/04/cart-abandonment-email/
  70. 70 http://www.shopify.co.uk/blog/8484093-why-online-retailers-are-losing-67-45-of-sales-and-what-to-do-about-it

The post Reducing Abandoned Shopping Carts In E-Commerce appeared first on Smashing Magazine.

Design Accessibly, See Differently: Color Contrast Tips And Tools

Wed, 10/22/2014 - 13:07

When you browse your favorite website or check the latest version of your product on your device of choice, take a moment to look at it differently. Step back from the screen. Close your eyes slightly so that your vision is a bit clouded by your eyelashes.

  • Can you still see and use the website?
  • Are you able to read the labels, fields, buttons, navigation and small footer text?
  • Can you imagine how someone who sees differently would read and use it?

In this article, I’ll share one aspect of design accessibility: making sure that the look and feel (the visual design of the content) are sufficiently inclusive of differently sighted users.

1Web page viewed with NoCoffee low-vision simulation. (View large version2)

I am a design consultant on PayPal’s accessibility team. I assess how our product designs measure up to the Web Content Accessibility Guidelines (WCAG) 2.0, and I review our company’s design patterns and best practices.

I created our “Designers’ Accessibility Checklist,” and I will cover one of the most impactful guidelines on the checklist in this article: making sure that there is sufficient color contrast for all content. I’ll share the strategies, tips and tools that I use to help our teams deliver designs that most people can see and use without having to customize the experiences.

Our goal is to make sure that all visual designs meet the minimum color-contrast ratio for normal and large text on a background, as described in the WCAG 2.0, Level AA, “Contrast (Minimum): Understanding Success Criterion 1.4.3523.”

Who benefits from designs that have sufficient contrast? Quoting from the WCAG’s page:

The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

As an accessibility consultant, I’m often asked how many people with disabilities use our products. Website analytics do not reveal this information. Let’s estimate how many people could benefit from designs with sufficient color contrast by reviewing the statistics:

  • 15% of the world’s population have some form of disability4, which includes conditions that affect seeing, hearing, motor abilities and cognitive abilities.
  • About 4% of the population have low vision, whereas 0.6% are blind.
  • 7 to 12% of men have some form of color-vision deficiency (color blindness), and less than 1% of women do.
  • Low-vision conditions increase with age, and half of people over the age of 50 have some degree of low-vision condition.
  • Worldwide, the fastest-growing population is 60 years of age and older5.
  • Over the age of 40, most everyone will find that they need reading glasses or bifocals to clearly see small objects or text, a condition caused by the natural aging process, called presbyopia6.

Let’s estimate that 10% of the world population would benefit from designs that are easier to see. Multiply that by the number of customers or potential customers who use your website or application. For example, out of 2 million online customers, 200,000 would benefit.

Some age-related low-vision conditions7 include the following:

  • Macular degeneration
    Up to 50% of people are affected by age-related vision loss.
  • Diabetic retinopathy
    In people with diabetes, leaking blood vessels in the eyes can cloud vision and cause blind spots.
  • Cataracts
    Cataracts clouds the lens of the eye and decreases visual acuity.
  • Retinitis pigmentosa
    This inherited condition gradually causes a loss of vision.

All of these conditions reduce sensitivity to contrast, and in some cases reduce the ability to distinguish colors.

Color-vision deficiencies, also called color-blindness, are mostly inherited and can be caused by side effects of medication and age-related low-vision conditions.

Here are the types of color-vision deficiencies8:

  • Deuteranopia
    This is the most common and entails a reduced sensitivity to green light.
  • Protanopia
    This is a reduced sensitivity to red light.
  • Tritanopia
    This is a reduced sensitivity to blue light, but not very common.
  • Achromatopsia
    People with this condition cannot see color at all, but it is not very common.

Reds and greens or colors that contain red or green can be difficult to distinguish for people with deuteranopia or protanopia.

Experience Seeing Differently

Creating a checklist and asking your designers to use it is easy, but in practice how do you make sure everyone follows the guidelines? We’ve found it important for designers not only to intellectually understand the why, but to experience for themselves what it is like to see differently. I’ve used a couple of strategies: immersing designers in interactive experiences through our Accessibility Showcase, and showing what designs look like using software simulations.

In mid-2013, we opened our PayPal Accessibility Showcase9 (video). Employees get a chance to experience first-hand what it is like for people with disabilities to use our products by interacting with web pages using goggles and/or assistive technology. We require that everyone who develops products participates in a tour. The user scenarios for designing with sufficient color contrast include wearing goggles that simulate conditions of low or partial vision and color deficiencies. Visitors try out these experiences on a PC, Mac or tablet. For mobile experiences, visitors wear the goggles and use their own mobile devices.

Fun fact: One wall in the showcase was painted with magnetic paint. The wall contains posters, messages and concepts that we want people to remember. At the end of the tour, I demonstrate vision simulators on our tablet. I view the message wall with the simulators to emphasize the importance of sufficient color contrast.

Showcase visitors wear goggles that simulate low-vision and color-blindness conditions. Some of the goggles used in the Accessibility Showcase. Software Simulators Mobile Apps

Free mobile apps are available for iOS and Android devices:

  • Chromatic Vision Simulator
    Kazunori Asada’s app simulates three forms of color deficiencies: protanope (protanopia), deuteranope (deuteranopia) and tritanope (tritanopia). You can view and then save simulations using the camera feature, which takes a screenshot in the app. (Available for iOS6210 and Android6311.)
  • VisionSim
    The Braille Institute’s app simulates a variety of low-vision conditions and provides a list of causes and symptoms for each condition. You can view and then save simulations using the camera feature, which takes a screenshot in the app. (Available for iOS6412 and Android.)13
Chromatic Vision Simulator

The following photos show orange and green buttons viewed through the Chromatic Vision Simulator:

14Seen through Chromatic Vision Simulator, the green and orange buttons show normal (C), protanope (P), deuteranope (D) and tritanope (T). (View large version15)

This example highlights the importance of another design accessibility guideline: Do not use color alone to convey meaning. If these buttons were online icons representing a system’s status (such as up or down), some people would have difficulty understanding it because there is no visible text and the shapes are the same. In this scenario, include visible text (i.e. text labels), as shown in the following example:

16The green and orange buttons are viewed in Photoshop with deuteranopia soft proof and normal (text labels added). (View large version17) Mobile Device Simulations

Checking for sufficient color contrast becomes even more important on mobile devices. Viewing mobile applications through VisionSim or Chromatic Vision Simulator is easy if you have two mobile phones. View the mobile app that you want to test on the second phone running the simulator.

If you only have one mobile device, you can do the following:

  1. Take screenshots of the mobile app on the device using the built-in camera.
  2. Save the screenshots to a laptop or desktop.
  3. Open and view the screenshots on the laptop, and use the simulators on the mobile device to view and save the simulations.
How’s the Weather in Cupertino?

The following example highlights the challenges of using a photograph as a background while making essential information easy to see. Notice that the large text and bold text are easier to see than the small text and small icons.

18The Weather mobile app, viewed with Chromatic Vision Simulator, shows normal, deuteranope, protanope and tritanope simulations. (View large version19) Low-Vision Simulations

Using the VisionSim app, you can simulate macular degeneration, diabetic retinopathy, retinitis pigmentosa and cataracts.

20The Weather mobile app is being viewed with the supported condition simulations. (View large version21) Adobe Photoshop

PayPal’s teams use Adobe Photoshop to design the look and feel of our user experiences. To date, a color-contrast ratio checker or tester is not built into Photoshop. But designers can use a couple of helpful features in Photoshop to check their designs for sufficient color contrast:

  • Convert designs to grayscale by going to “Select View” → “Image” → “Adjustments” → “Grayscale.”
  • Simulate color blindness conditions by going to “Select View” → “Proof Setup” → “Color Blindness” and choosing protanopia type or deuteranopia type. Adobe provides soft-proofs for color blindness22.
Examples

If you’re designing with gradient backgrounds, verify that the color-contrast ratio passes for the text color and background color on both the lightest and darkest part of the gradient covered by the content or text.

In the following example of buttons, the first button has white text on a background with an orange gradient, which does not meet the minimum color-contrast ratio. A couple of suggested improvements are shown:

  • add a drop-shadow color that passes (center button),
  • change the text to a color that passes (third button).

Checking in Photoshop with the grayscale and deuteranopia proof, the modified versions with the drop shadow and dark text are easier to read than the white text.

If you design in sizes larger than actual production sizes, make sure to check how the design will appear in the actual web page or mobile device.

23Button with gradients: normal view; view in grayscale; and as a proof, deuteranopia. (View large version24)

In the following example of a form, the body text and link text pass the minimum color-contrast ratio for both the white and the gray background. I advise teams to always check the color contrast of text and links against all background colors that are part of the experience.

Even though the “Sign Up” link passes, if we view the experience in grayscale or with proof deuteranopia, distinguishing that “Sign Up” is a link might be difficult. To improve the affordance of “Sign Up” as a link, underline the link or link the entire phrase, “New to PayPal? Sign Up.”

25Form example: normal view; in Photoshop, a view in grayscale; and as a proof, deuteranopia. (View large version26)

Because red and green can be more difficult to distinguish for people with conditions such as deuteranopia and protanopia, should we avoid using them? Not necessarily. In the following example, a red minus sign (“-”) indicates purchasing or making a payment. Money received or refunded is indicated by a green plus sign (“+”). Viewing the design with proof, deuteranopia, the colors are not easy to distinguish, but the shapes are legible and unique. Next to the date, the description describes the type of payment. Both shape and content provide context for the information.

Also shown in this example, the rows for purchases and refunds alternate between white and light-gray backgrounds. If the same color text is used for both backgrounds, verify that all of the text colors pass for both white and gray backgrounds.

27Normal view and as a proof, deuteranopia: Check the text against the alternating background colors. (View large version28)

In some applications, form fields and/or buttons may be disabled until information has been entered by the user. Our design guidance does not require disabled elements to pass, in accordance with the WCAG 2.0’s “Contrast (Minimum): Understanding Success Criterion 1.4.34129:

Incidental: Text or images of text that are part of an inactive user interface component,… have no contrast requirement.

In the following example of a mobile app’s form, the button is disabled until a phone number and PIN have been entered. The text labels for the fields are a very light gray over a white background, which does not pass the minimum color-contrast ratio.

If the customer interprets that form elements with low contrast are disabled, would they assume that the entire form is disabled?

30Mobile app form showing disabled fields and button (left) and then enabled (right). (View large version31)

The same mobile app form is shown in a size closer to what I see on my phone in the following example. At a minimum, the text color needs to be changed or darkened to pass the minimum color-contrast ratio for normal body text and to improve readability.

To help distinguish between labels in fields and user-entered information, try to explore alternative visual treatments of form fields. Consider reversing foreground and background colors or using different font styles for labels and for user-entered information.

32Mobile app form example: normal, grayscale and proof deuteranopia. (View large version33) NoCoffee Vision Simulator for Chrome

NoCoffee Vision Simulator6634 can be used to simulate color-vision deficiencies and low-vision conditions on any pages that are viewable in the Chrome browser. Using the “Color Deficiency” setting “achromatopsia,” you can view web pages in grayscale.

The following example shows the same photograph (featuring a call to action) viewed with some of the simulations available in NoCoffee. The message and call to action are separated from the background image by a practically opaque black container. This improves readability of the message and call to action. Testing the color contrast of the blue color in the headline against solid black passes for large text. Note that the link “Mobile” is not as easy to see because the blue does not pass the color-contrast standard for small body text. Possible improvements could be to change the link color to white and underline it, and/or make the entire phrase “Read more about Mobile” a link.

35Simulating achromatopsia (no color), deuteranopia, protanopia using NoCoffee. (View large version36) 37Simulating low visual acuity, diabetic retinopathy, macular degeneration and low visual acuity plus retinitus pigmentosa, using NoCoffee. (View large version38) Using Simulators

Simulators are useful tools to visualize how a design might be viewed by people who are aging, have low-vision conditions or have color-vision deficiencies.

For design reviews, I use the simulators to mock up a design in grayscale, and I might use color-blindness filters to show designers possible problems with color contrast. Some of the questions I ask are:

  • Is anything difficult to read?
  • Is the call to action easy to find and read?
  • Are links distinguishable from other content?

After learning how to use simulators to build empathy and to see their designs differently, I ask designers to use tools to check color contrast to verify that all of their designs meet the minimum color-contrast ratio of the WCAG 2.0 AA. The checklist includes a couple of tools they can use to test their designs.

Color-Contrast Ratio Checkers

The tools we cite in the designers’ checklist are these:

There are many tools to check color contrast, including ones that check live products. I’ve kept the list short to make it easy for designers to know what to use and to allow for consistent test results.

Our goal is to meet the WCAG 2.0 AA color-contrast ratio, which is 4.5 to 1 for normal text and 3 to 1 for large text.

What are the minimum sizes for normal text and large text? The guidance provides recommendations on size ratios in the WCAG’s Contrast (Minimum): Understanding Success Criterion 1.4.34129 but not a rule for a minimum size for body text. As noted in the WCAG’s guidance, thin decorative fonts might need to be larger and/or bold.

Testing Color-Contrast Ratio

You should test:

  • early in the design process;
  • when creating a visual design specification for any product or service (this documents all of the color codes and the look and feel of the user experience);
  • all new designs that are not part of an existing visual design guideline.
Test Hexadecimal Color Codes for Web Designs

Let’s use the WebAIM Color Contrast Checker4239 to test sample body-text colors on a white background (#FFFFFF):

  • dark-gray text (#333333).
  • medium-gray text (#666666).
  • light-gray text (#999999).

We want to make sure that body and normal text passes the WCAG 2.0 AA. Note that light gray (#999999) does not pass on a white background (#FFFFFF).

43Test dark-gray, medium-gray and light-gray using the WebAim Color Contrast Checker.(View large version44)

In the tool, you can modify the light gray (#999999) to find a color that does pass the AA. Select the “Darken” option to slightly change the color until it passes. By clicking the color field, you will have more options, and you can change color and luminosity, as shown in the second part of this example.

45In the WebAim Color Contrast Checker, modify the light gray using the “Darken” option, or use the color palette to find a color that passes. (View large version46)

Tabular information may be designed with alternating white and gray backgrounds to improve readability. Let’s test medium-gray text (#666666) and light-gray text (#757575) on a gray background (#E6E6E6).

Note that with the same background, the medium text passes, but the lighter gray passes only for large text. In this case, use medium gray for body text instead of white or gray backgrounds. Use the lighter gray only for large text, such as headings on white and gray backgrounds.

47Test light-gray and medium-gray text on a gray background. (View large version48) Test RGB Color Codes

For mobile applications, designers might use RGB color codes to specify visual designs for engineering. You can use the TPG Colour Contrast Checker49. you will need to install either the PC or Mac version and run it side by side with Photoshop.

Let’s use the Colour Contrast Checker to test medium-gray text (102 102 102 in RGB and #666666 in hexadecimal) and light-gray text (#757575 in hexadecimal) on a gray background (230 230 230 in RGB and #E6E6E6 in hexadecimal).

  1. Open the Colour Contrast Checker application.
  2. Select “Options” → “Displayed Color Values” → “RGB.”
  3. Under “Algorithm,” select “Luminosity.”
  4. Enter the foreground and background colors in RGB: 102 102 102 for foreground and 230 230 230 for background. Mouse click or tab past the fields to view the results. Note that this combination passes for both text and large text (AA).
  5. Select “Show details” to view the hexadecimal color values and information about both AA and AAA requirements.
50Colour Contrast Analyser, and color wheel to modify colors. (View large version51)

In our example, light-gray text (117 117 117 in RGB) on a gray background (230 230 230 in RGB) does not meet the minimum AA contrast ratio for body text. To modify the colors, view the color wheels by clicking in the “Color” select box to modify the foreground or background. Or you can select “Options” → “Show Color Sliders,” as shown in the example.

Colour Contrast Analyser, with RGB codes. Show color sliders to modify any color that does not meet minimum AA guidelines.

In most cases, minor adjustments to colors will meet the minimum contrast ratio, and comparisons before and after will show how better contrast enables most people to see and read more easily.

Best Practices

Test for color-contrast ratio, and document the styles and color codes used for all design elements. Create a visual design specification that includes the following:

  • typography for all textual elements, including headings, text links, body text and formatted text;
  • icons and glyphs and text equivalents;
  • form elements, buttons, validation and system error messaging;
  • background color and container styles (making sure text on these backgrounds all pass);
  • the visual treatments for disabled links, form elements and buttons (which do not need to pass a minimum color-contrast ratio).

Documenting visual guidelines for developers brings several benefits:

  • Developers don’t have to guess what the designers want.
  • Designs can be verified against the visual design specification during quality testing cycles, by engineers and designers.
  • A reference point that meets design accessibility guidelines for color contrast can be shared and leveraged by other teams.
Summary

If you are a designer, try out the simulators and tools on your next design project. Take time to see differently. One of the stellar designers who reviewed my checklist told me a story about using Photoshop’s color-blindness proofs. On his own, he used the proofs to refine the colors used in a design for his company’s product. When the redesigned product was released, his CEO thanked him because it was the first time he was able to see the design. The CEO shared that he was color-blind. In many cases, you may be unaware that your colleague, leader or customers have moderate low-vision or color-vision deficiencies. If meeting the minimum color-contrast ratio for a particular design element is difficult, take the challenge of thinking beyond color. Can you innovate so that most people can pick up and use your application without having to customize it?

If you are responsible for encouraging teams to build more accessible web or mobile experiences, be prepared to use multiple strategies:

  • Use immersive experiences to engage design teams and gain empathy for people who see differently.
  • Show designers how their designs might look using simulators.
  • Test designs that have low contrast, and show how slight modifications to colors can make a difference.
  • Encourage designers to test, and document visual specifications early and often.
  • Incorporate accessible design practices into reusable patterns and templates both in the code and the design.

Priorities and deadlines make it challenging for teams to deliver on all requests from multiple stakeholders. Be patient and persistent, and continue to engage with teams to find strategies to deliver user experiences that are easier to see and use by more people out of the box.

References Low-Vision Goggles and Resources

(hp, al, il, ml)

Footnotes
  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevis-large.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevis-large.png
  3. 3 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  4. 4 http://www.who.int/mediacentre/factsheets/fs352/en/
  5. 5 http://www.un.org/esa/population/publications/worldageing19502050/
  6. 6 http://www.mayoclinic.org/diseases-conditions/presbyopia/basics/causes/con-20032261
  7. 7 https://www.nei.nih.gov/healthyeyes/aging_eye.asp
  8. 8 http://webaim.org/articles/visual/colorblind
  9. 9 https://www.youtube.com/watch?feature=player_embedded&v=7MyHZofcNnk
  10. 10 https://itunes.apple.com/us/app/chromatic-vision-simulator/id389310222?mt=8
  11. 11 https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en
  12. 12 https://itunes.apple.com/us/app/visionsim-by-braille-institute/id525114829?mt=8
  13. 13 https://play.google.com/store/apps/details?id=com.BrailleIns.VisionSim&hl=en
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/10/CVSbuttonsOG-large.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/CVSbuttonsOG-large.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/textonbuttons-large.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/10/textonbuttons-large.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weatherCVS-large.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weatherCVS-large.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weathervisionsim-large.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weathervisionsim-large.png
  22. 22 http://help.adobe.com/en_US/creativesuite/cs/using/WS3F71DA01-0962-4b2e-B7FD-C956F8659BB3.html#WS473A333A-7F61-4aba-8F67-5553208E349C
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/10/buttongradients-large.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/10/buttongradients-large.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/10/logindev-large.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/logindev-large.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/10/rowsandicons-large.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/10/rowsandicons-large.png
  29. 29 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields-large.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields-large.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields_bwcc-large.png
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields_bwcc-large.png
  34. 34 https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=en&gl=US
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeecolorsim-large.png
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeecolorsim-large.png
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevisionsims-large.png
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevisionsims-large.png
  39. 39 http://webaim.org/resources/contrastchecker
  40. 40 http://paciellogroup.com/resources/contrastAnalyser
  41. 41 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html
  42. 42 http://webaim.org/resources/contrastchecker
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2014/10/colorcontrastgrays-large.png
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/10/colorcontrastgrays-large.png
  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2014/10/modifylightgray-large.png
  46. 46 http://www.smashingmagazine.com/wp-content/uploads/2014/10/modifylightgray-large.png
  47. 47 http://www.smashingmagazine.com/wp-content/uploads/2014/10/gray_graybackground-large.png
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2014/10/gray_graybackground-large.png
  49. 49 http://paciellogroup.com/resources/contrastAnalyser
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2014/10/ccanalysercolorwheel-large.png
  51. 51 http://www.smashingmagazine.com/wp-content/uploads/2014/10/ccanalysercolorwheel-large.png
  52. 52 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  53. 53 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html
  54. 54 https://www.paypal-engineering.com/2014/03/13/get-a-sneak-peek-into-paypal-accessibility-showcase/
  55. 55 http://www.adobe.com/accessibility/products/photoshop.html
  56. 56 http://help.adobe.com/en_US/creativesuite/cs/using/WS3F71DA01-0962-4b2e-B7FD-C956F8659BB3.html#WS473A333A-7F61-4aba-8F67-5553208E349C
  57. 57 http://webaim.org
  58. 58 http://webaim.org/resources/contrastchecker/
  59. 59 http://wave.webaim.org
  60. 60 http://webaim.org/articles/visual/colorblind
  61. 61 http://www.paciellogroup.com/resources/contrastAnalyser/
  62. 62 https://itunes.apple.com/us/app/chromatic-vision-simulator/id389310222?mt=8
  63. 63 https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en
  64. 64 https://itunes.apple.com/us/app/visionsim-by-braille-institute/id525114829?mt=8
  65. 65 https://play.google.com/store/apps/details?id=com.BrailleIns.VisionSim&hl=en
  66. 66 https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=en&gl=US
  67. 67 http://accessgarage.wordpress.com/2013/02/09/458/
  68. 68 https://www.nei.nih.gov/healthyeyes/aging_eye.asp
  69. 69 http://www.who.int/mediacentre/factsheets/fs352/en/
  70. 70 http://www.mayoclinic.org/diseases-conditions/presbyopia/basics/causes/con-20032261
  71. 71 http://www.un.org/esa/population/publications/worldageing19502050/
  72. 72 http://www.lowvisionsimulationkit.com
  73. 73 http://www.lowvisionsimulators.com/find-the-right-low-vision-simulator

The post Design Accessibly, See Differently: Color Contrast Tips And Tools appeared first on Smashing Magazine.

Hybrid Mobile Apps: Providing A Native Experience With Web Technologies

Tue, 10/21/2014 - 09:00

According to a recent report1, HTML is the most widely used language for mobile app developers. The main reasons among developers for selecting web technologies2 are cross-platform portability of code and the low cost of development. We’ve also heard that hybrid apps tend to be sluggish and poorly designed. Let’s prove whether it’s possible to deliver the native look and feel that we’re used to.

This article provides many hints, code snippets and lessons learned on how to build great hybrid mobile apps. I’ll briefly introduce hybrid mobile app development, including its benefits and drawbacks. Then, I’ll share lessons I’ve learned from over two years of developing Hojoki and CatchApp, both of which run natively on major mobile platforms and were built with HTML, CSS and JavaScript. Finally, we’ll review the most prominent tools to wrap code in a native app.

What Are Hybrid Mobile Apps?

Mobile apps can be generally broken down into native, hybrid and web apps. Going the native route allows you to use all of the capabilities of a device and operating system, with a minimum of performance overhead on a given platform. However, building a web app allows your code to be ported across platforms, which can dramatically reduce development time and cost. Hybrid apps combine the best of both worlds, using a common code base to deploy native-like apps to a wide range of platforms.

There are two approaches to building a hybrid app:

  • WebView app
    The HTML, CSS and JavaScript code base runs in an internal browser (called WebView) that is wrapped in a native app. Some native APIs are exposed to JavaScript through this wrapper. Examples are Adobe PhoneGap3 and Trigger.io4.
  • Compiled hybrid app
    The code is written in one language (such as C# or JavaScript) and gets compiled to native code for each supported platform. The result is a native app for each platform, but less freedom during development. Examples are Xamarin5, Appcelerator Titanium6 and Embarcadero FireMonkey7.

While both approaches are widely used and exist for good reasons, we’ll focus on WebView apps because they enable developers to leverage most of their existing web skills. Let’s look at all of the benefits and drawbacks of hybrid apps compared to both native and mobile web apps.

Benefits
  • Developer can use existing web skills
  • One code base for multiple platforms
  • Reduced development time and cost
  • Easily design for various form factors (including tablets) using responsive web design
  • Access to some device and operating system features
  • Advanced offline capabilities
  • Increased visibility because the app can be distributed natively (via app stores) and to mobile browsers (via search engines)
Drawbacks
  • Performance issues for certain types of apps (ones relying on complex native functionality or heavy transitions, such as 3D games)
  • Increased time and effort required to mimic a native UI and feel
  • Not all device and operating system features supported
  • Risk of being rejected by Apple if app does not feel native enough (for example, a simple website)

These drawbacks are significant and cannot be ignored, and they show that the hybrid approach does not suit all kinds of apps. You’ll need to carefully evaluate your target users, their platforms of choice and the app’s requirements. In the case of many apps, such as content-driven ones, the benefits outweigh the drawbacks. Such apps can typically be found in the “Business and Productivity,” “Enterprise” and “Media” categories in the app store.

Both Hojoki and CatchApp are very content-driven productivity apps, so we initially thought they would be a great match for hybrid development. The first three benefits mentioned above were especially helpful to us in building the mobile app for Hojoki in just four weeks. Obviously, that first version lacked many important things. The following weeks and months were filled with work on optimizing performance, crafting a custom UI for each platform and exploiting the advanced capabilities of different devices. The learning in that time was crucial to making the app look and feel native. I’ll share as many lessons as possible below.

So, how do you achieve a native look and feel? To a mobile web developer, being able to use the features of a device and operating system and being able to package their app for an app store sounds just awesome. However, if users are to believe it is a native app, then it will have to behave and look like one. Accomplishing this remains one of the biggest challenges for hybrid mobile developers.

Make Your Users Feel at Home

A single code base doesn’t mean that the app should look and feel exactly the same on all platforms. Your users will not care at all about the underlying cross-platform technology. They just want the app to behave as expected; they want to feel “at home.” Your first stop should be each platform’s design guidelines:

While these guidelines might not perfectly suit all kinds of apps, they still provide a comprehensive and standard set of interfaces and experiences that users on each platform will know and expect.

DIY vs. UI Frameworks

Implementing all of these components, patterns and animations on your own can be quite a challenge. All kinds of frameworks exist to help you with that, ranging from commercial (Kendo UI11) to open-source ones (Ionic12) and from ones with a common UI (jQuery Mobile13 and Onsen UI14) to many platform-specific UIs (Sencha Touch7615 and ChocolateChip-UI16). Some are really good at providing a pixel-perfect layout, while others are rather sloppy, thus making it easy for the user to identify a web app. However, my impression is that their main drawbacks are performance-related, because most UI frameworks try to be as all-embracing as possible. Judge for yourself by taking a few minutes to try the demos on your own device.

At Hojoki, we try to craft all components on our own using CSS3 and minimal JavaScript. This keeps us in control of performance and reduces overhead. We obviously use small libraries for complicated tasks that someone else has solved just fine.

Custom UI Components

Custom UI components also have many good use cases. Deciding between a platform’s UI and a custom UI will obviously depend on your target audience. If you want to do your own thing, you should have a deep understanding of UX design, because the guidelines linked to above were crafted by experts to meet the particular requirements of their platform’s users.

Whether you stick to a platform’s UI guidelines or do your own thing with custom components, know that there are certain design patterns that most people use every day and love. How are people usually introduced to a new app? Through a slideshow walkthrough or an instructional overlay. How do people navigate? With a tab bar or a sidebar drawer17. How do users quickly load or refresh data? By pulling to refresh. (Native-like scrolling will be covered extensively further below.)

Resources for Mobile UI Design Design A Native-Looking Header Bar

One important part of a UI is the header bar, with its title and navigation elements, most notably the “up” and “back” buttons. To me, many popular frameworks fail to provide a HTML and CSS solution that compares to a native app. Mimicking this part of the UI with a minimal DOM and a few lines of CSS for each platform is actually fairly easy:

<header> <button class="back">Feed</button> <h1>Details</h1> <!-- more actions (e.g. a search button on the right side) --> </header>

Check out the full code of the native-looking header bar for iOS, Android and Windows Phone21 on JSFiddle. This is my result:


Native-looking headers made with HTML5 and CSS.

Using the same DOM across all platforms is generally preferable because it results in cleaner code and, therefore, maximizes maintainability. I’ve found this to be easily possible for many UI components on iOS and Android (including the header bar, tab bar, custom navigation menu, settings page, popover and many more). However, this becomes much harder when adding support for Windows Phone, which comes with some very different design patterns.

Support High-Resolution Screens

Nowadays, smartphones and tablets with high-resolution screens make up the vast majority of mobile devices, making up more than 80% of iOS devices22 and over 70% on Android devices23. To make your images look crisp for everyone, you usually have to deliver twice the dimensions than what is actually shown in your app. Serving properly sized images for all different resolutions is one of the most discussed topics in responsive web design. There are various approaches, each with its benefits and drawbacks related to bandwidth, code maintainability and browser support. Let’s quickly review the most popular ones, in no particular order:

  • server-side resizing and delivering
  • client-side detection and replacement via JavaScript
  • HTML5 picture element
  • HTML5 srcset attribute
  • CSS image-set
  • CSS media queries
  • Resolution-independent images (SVG)

As always, there is no silver bullet for responsive images. It pretty much depends on the type of images and how they are used in the app. For static images (such as the logo and tutorial images), I try to use SVG. They scale perfectly without any extra effort and have great browser support as long as you’re fine with Android 3+24.

When SVG is not an option, the HTML5 picture element and srcset attributes25 are definitely where front-end development is heading. Currently, their main drawback is the very limited browser support and, therefore, their need for polyfills.

In the meantime, CSS background images and media queries26 are the most pragmatic solution:

/* Normal-resolution CSS */ .logo { width: 120px; background: url(logo.png) no-repeat 0 0; } /* HD and Retina CSS */ @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min--moz-device-pixel-ratio: 1.25), only screen and ( -o-min-device-pixel-ratio: 1.25/1), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) { .logo { background: url(logo@2x.png) no-repeat 0 0; background-size: 120px; /* Equal to normal logo width */ } }

However, your app might already contain a lot of content (such as news articles), and adjusting all of the img tags or replacing them with CSS would be exhausting. A server-side solution is the best choice in this case.

Starting last year, more and more Android manufacturers have gone one step further with what is called XXHDPI (or very very high-resolution) screens. Whichever solution above fits your need, keep in mind that you’ll need images that are three times the original dimensions to support Android’s latest flagship devices.

Use System Fonts

A simple yet important way to make users feel at home is to use system fonts.

Native fonts for iOS27, Android28 and Windows Phone29.

These are my recommended font stacks on the major platforms:

/* iOS */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Android */ font-family: 'RobotoRegular', 'Droid Sans', sans-serif; /* Windows Phone */ font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

Furthermore, iOS 7 offers some interesting presets that automatically set the correct font family, font size and line height. It’s as easy as using font: -apple-system-body for normal text and font: -apple-system-headline for headings. This not only simplifies font declarations, but also improves accessibility through “dynamic type30,” Apple’s system-wide font-size setting. You can dig deeper into iOS 7 font presets in a post by Thomas Fuchs31.

An Icon Is Worth A Thousand Words

Iconography is an important part of the user experience on all major mobile platforms. As with fonts, you’re usually best off using icons that your target audience already knows. Recalling what I said about high-resolution screens earlier, make sure that your icons are scaleable. Implementing them as a font via CSS’ @font-face rule is a great way to achieve this, and it comes with wide browser support32. It even allows you to change an icon’s appearance (for example, its color, shadow and transparency) seamlessly via CSS. Here are my recommendations:

  1. Get various platform icon fonts.
    Ionicons33 is our baseline set because it includes nearly everything we need. This includes specific icons for iOS and Android in addition to their general ones. The rest come from specific platform icon fonts for iOS34, Android set 135 and set 236 and Windows Phone37.
  2. Combine them with a icon font generator.
    Using multiple icon fonts is confusing and quickly adds up in size. That is why we use Fontello38 to combine the different sets, adjust key codes and export them for each platform. The result is <span class="icon">s</span>, which looks like a search icon on iOS, Android and Windows Phone. Also, check out the popular alternatives IcoMoon39 and Fontastic40.

On Windows Phone, you can also get away with the native font-family: 'Segoe UI Symbol'41.

Optimize For Performance

Performance is usually considered to be one of the major disadvantages of a hybrid mobile app. This is mostly true if your app has a lot of heavy animations, contains huge scrolling lists and needs to run on old devices. However, if you are all right with supporting only newer platform versions (Android 4+, iOS 7+ and Windows Phone 8+), then you’ll very likely have satisfying results. It’s ultimately a question of how much effort you put into optimizing DOM and CSS selectors, writing performant JavaScript, reducing rendering time and minimizing the number of reflows and repaints. An endless number of articles and tutorials cover mobile web performance. These are some of my favorites:

Beyond that, mobile hardware and rendering engines are improving at a rapid pace, with new devices coming out every other day. Developers can make the performance of a hybrid WebView app difficult to distinguish from that of a fully native app on the iPhone 5 series and on Android phones comparable to Nexus 4 and 5.

Increase Perceived Speed

Building a performant app is one thing, but making it feel fast is a whole other. Whether your app needs some time for a certain task (such as some heavy calculation or client-server communication), presenting instant feedback is crucial to providing a fluid and responsive experience. A common technique is to delay tasks that the user doesn’t need yet, while predicting and preloading the steps the user might take next. A famous example is Instagram, which uploads photos in the background47 while the user is busy adding tags and sharing. Perceived speed can be very different from actual speed, so let’s use it in our favor. Here are some no-brainers.

Remove the Click Delay on Touch Devices

A normal JavaScript click event handler on a touch device comes with a slight delay between the touchstart and the click being fired (usually around 300 milliseconds). This feature is built into the browser to detect whether the user is performing a single- or double-tap. If you don’t need the “double-tap to zoom” feature, you can safely eliminate these 300 milliseconds to get a much more responsive tap behavior. My favorite solution for this is the FastClick48 library. Use it on everything except Internet Explorer:

if ('ontouchstart' in window) { window.addEventListener('load', function() { FastClick.attach(document.body); }, false); }

Internet Explorer 10+ is a bit easier. You just need some CSS:

html { -ms-touch-action: manipulation; /* IE 10 */ touch-action: manipulation; /* IE 11+ */ } Style the Active State

As soon as the user taps an actionable element such as a button or a link, they should immediately get some kind of feedback that the app has detected their action. While the CSS pseudo-class :hover works great for this on the desktop, you need to switch to :active or a JavaScript solution for it to work on mobile. I’ve compared the three approaches to the active state49 on JSFiddle. While they all work one way or another, you judge which is best for you.

Furthermore, remove the default tap highlight while adjusting your active states on mobile. I’d also recommend disabling user selections on actionable elements, because the selection menu would be quite disruptive if the user accidentally taps the button for too long.

iOS and Android:

button { outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

Windows Phone 8+:

<meta name="msapplication-tap-highlight" content="no"> Indicate Loading

Whenever your app is performing an action that will take some time to finish, even just for a second, consider adding a loading indicator. If you don’t, users will think that your app freezes occasionally, or they’ll click around when they shouldn’t, or they might even break things and then blame your app. From what I’ve experienced, animated GIFs are usually a bad idea in mobile browsers. As soon as there is a load on the CPU, the GIF freezes, thus defeating its entire purpose. I prefer Spin.js50 for its configurability and ease of use. Also, check out some other JavaScript solutions51 and CSS loaders52.

Cross-platform tools like PhoneGap and Trigger.io also provide access to native loaders, which is great for showing a full-screen loading animation.

Get the Scrolling Right

Scrolling is one of the most important factors in the user experience of many apps. This is both a curse and a blessing because the success of its implementation will depend heavily on the scrolling niceties that your app relies on and on the mobile operating systems that need to be supported.

Scrollable content and a fixed header and/or footer bar are common to nearly all apps. There are two common approaches to achieving this with CSS:

  1. Enabling scrolling on the body, and applying position: fixed to the header;
  2. Disabling scrolling on the body, and applying overflow: scroll to the content;
  3. Disabling scrolling on the body, and applying JavaScript custom scrolling to the content.

While the first option has some benefits (such as iOS’s native scroll-to-top action and a simple code structure), I highly recommend going with the second option, overflow: scroll. It has fewer rendering issues53 (although still a lot), and browser support is great on modern platforms (Android 4+, iOS 5+ and Windows Phone 8+), with a nice little polyfill for some older ones54. Alternatively, you could replace overflow: scroll with a custom scrolling library (the third option), such as iScroll55. While these JavaScript solutions allow for more flexibility with features (for example, the scroll position during momentum, event handling, customization of effects and scrollbars, etc.), they always penalize performance. This becomes critical when you’re using a lot of DOM nodes and/or CSS3 effects (such as box-shadow, text-shadow, opacity and rgba) in the content area.

Let’s look at some of the basic scrolling features.

Momentum Effect

The touch-friendly momentum effect enables users to quickly scroll through large content areas in an intuitive way. It can be easily activated with some simple CSS on iOS 5+ and in some versions of Chrome for Android. On iOS, this will also enable the content to bounce off the top and bottom edges.

overflow-y: scroll; -webkit-overflow-scrolling: touch; Pull Down to Refresh

Various solution for this are available on the web, such as the one by Damien Antipa5756. While the solutions for iOS and Windows Phone have a similar look and feel, Android recently introduced its own mechanism (see below). We’ve implemented this in CatchApp using some JavaScript and CSS keyframes. (I have yet to wrap it up nicely and put it on GitHub, so stay tuned!)


Pull down to refresh on iOS. (Image credit: Damien Antipa5756)
Pull down to refresh on Android. (Image credit: Android Widget Center58)
Pull down to refresh on Windows Phone. (Image credit: David Washington59) Scroll to Top

Unfortunately, disabling scrolling on the body will also break iOS’ native feature that enables users to quickly get to the top of the page by tapping the status bar. I’ve written a small script that can be added to any element and that takes care of scrolling to the top using JavaScript60, even if the content is currently in momentum. Add it to the header of your mobile website or to the status bar with a native plugin (for example, in PhoneGap).

Many other scrolling features could be implemented on top of the native overflow: scroll, such as snapping to a certain element or just infinite scrolling. If your requirements are more advanced, definitely look at the JavaScript options out there.

Make It Easy To Hit Stuff

When performing a touch action, users will quite often miss their target by a few pixels, especially on small buttons (such as the ones in iOS’ top bar). Developers can assist users while keeping the design elegant by enabling an invisible touch area around small targets:

<button> <div class="innerButton">Click me!</div> </button>

You’ll have to put the event handler on the button element, while restricting the styles to div.innerButton. Check out the full example, including CSS61, on JSFiddle.

Using Touch Gestures

A smartphone is all about touching and gestures. We swipe, pinch, zoom, drag and long-tap all the time when interacting with touch devices. So, why not offer users the same means of controlling your hybrid app? QuoJS62 and Hammer.js63 are well-known libraries for supporting all kinds of gestures. If you’d like more choice, check out Kevin Liew’s comparison of “11 Multi-Touch and Touch Events JavaScript Libraries64.”

Don’t Miss Out on Native Functionality

Building your app with web technology doesn’t necessarily mean that you can’t use native features. In fact, all major cross-platform development tools provide built-in access to the most important functionality. This includes APIs for device data, the file system, the network connection, geolocation, the accelerometer, notifications (including push) and much more.

You can usually even extend a development tool by building custom plugins. At Hojoki, we added many missing features, including reading the user’s setting for push notifications for our app, detecting the user’s time zone, and checking whether a third-party app is installed and launching it. Let’s look at two very simple examples for things that can be realized with native plugins. First, let’s enable JavaScript focus() for input fields on iOS 6+:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 6) { [YourWebView setKeyboardDisplayRequiresUserAction:NO]; }

And here’s the code to copy a given string to the device’s clipboard on iOS:

[[UIPasteboard generalPasteboard] setString:@"Your copied string"]; Always Provide a Way Out

Web developers often overlook how to handle bad situations in a hybrid app (for example, a connection timeout, a bad input, a timing issue, etc.). A hybrid app is fundamentally different from a website, mainly because there is no global refresh button, and an app can easily run in the background for weeks on some mobile operating systems. If the user runs into a dead end, their only option will be to restart the app, which entails force quitting and then restarting. Many people don’t even know how to do that, especially on Android 2.x (where it’s hidden deep in the app’s settings) and on iOS 6 and below (where you have to double-tap the home button, long-press the icon and kill it).

So, ignore the refresh button during development, and handle bad situations as they come up. For all other situations that would have unexpected outcomes, such as ones involving client-server communication, be prepared for things to go wrong, and provide a way out for users. This could be as easy as showing a full-screen error message — “Oops! Something bad happened. Please check your connection and try again” — with a big “Reload” button below.

How To Wrap It

Developing a hybrid mobile app means using the same tools and processes that you would usually use to develop (mobile) websites. Having said that, one thing I really like about the hybrid approach is that you can deploy HTML, CSS and JavaScript code as a mobile web app with relative ease. Make sure to implement fallbacks for native features, or find elegant workarounds if they are not supported at all. Most mobile developers prefer to keep users in a native app, and you could even advertise the app to your mobile website’s users.

65A native WebView wrapper, with an HTML, CSS and JavaScript code base. (View large version66)

What about the native part? Your mobile web app (plain HTML, CSS and JavaScript) will be loaded in a WebView, which is an internal browser engine that renders an app the way a default browser on the device would render it (there might be slight differences — your mileage may vary). Additionally, native “bridges” are used to expose features of the device and operating system through an API to make them accessible with JavaScript. This usually includes access to the device’s camera, address book, geolocation, file system and native events (for example, via one of the hardware buttons on Android), to name just a few features.

A few cross-platform development tools provide that native bridge and simplify the whole process of wrapping it. Let’s dive into some options.

PhoneGap and Apache Cordova

PhoneGap67 is certainly one of the most popular tools for cross-platform development. The name itself is often used synonymously with hybrid mobile app development.

There has been some confusion about its name68 and relation to Apache Cordova69, which is understandable. The latter is a top-level Apache project that was formerly called PhoneGap. It offers a set of device APIs to access native functionality from HTML, CSS and JavaScript code running in a WebView. Now, Adobe PhoneGap is a distribution of Cordova — not unlike the way Chrome uses WebKit as its engine.

Both are open-source and free to use, with support for all major platforms and with an active community developing all kinds of plugins and extensions.

PhoneGap has shaped the hybrid lanscape significantly, and many new tools have emerged that offer additional services or that streamline the development process. They usually add a lot of convenience by enabling you to build an app in the cloud, thereby saving you the effort of locally installing all of the different platform SDKs and tools. Each tool has a different focus, level of platform support and price:

Sencha Touch

Sencha Touch7615 started out as a UI framework for the mobile web and has been around for years. Traditionally, developers have used Sencha to build an app while using another service, like PhoneGap, to deploy it as a hybrid app. Nowadays, Sencha offers this kind of functionality built in for free. Platform support includes iOS and Android (both via Sencha’s own native packager) BlackBerry, Windows 8 and more (via PhoneGap Build).

Trigger.io

At Hojoki, we started using Trigger.io77 two and a half years ago because we were looking for a lightweight alternative to PhoneGap. Even though iOS and Android are its only supported platforms, it offers a good set of native APIs, custom plugins and third-party integration (including Parse push notifications, Flurry analytics and parts of Facebook’s SDK). Trigger.io’s command-line tools allowed us to integrate the app’s packaging into our Grunt78 build process, which is great if you love automation.

One of its key features is Reload9179, which enables developers to push HTML, CSS and JavaScript updates to an app on the fly. Unlike PhoneGap Build’s Hydration80, Reload is specifically designed for development and production apps. This makes it possible to legally bypass Apple’s submission process to push bug fixes and iterate quickly with A/B testing.

Once the 14-day trial is up, Trigger.io’s steep pricing81 is probably the biggest downside for many developers.

With MoSync82 having gone offline a couple of days ago, Trigger.io seems to be the only remaining tool that is not associated with PhoneGap.

Test on Real Devices

Building a mobile app with web technologies obviously tempts us to do most of our testing in a web browser. This might be fine when developing non-native features, but definitely avoid it when releasing. Test with as many manufacturers, platforms and form factors as possible before submitting the app. Android’s fragmentation brings endless possibilities of differences in browser rendering, unsupported features and manufacturer modifications. While iOS does much better with rendering differences, Apple has a growing number of devices with varying sizes, resolutions and pixel densities. Check out “Prioritizing Devices: Testing and Responsive Web Design83” to learn more.

When Facebook famously ditched most of its HTML5 and went native in 2012, it cited missing debugging tools and developer APIs84 as one of its main reasons. LinkedIn drew the same conclusions85 half a year later, stating that HTML5 itself is ready, but basic tools and the ecosystem don’t support it yet. From what I’m seeing, the situation is getting better, with remote debugging in WebView on Android 4.4+ and an increasing number of development tools on all platforms:

Start Thinking in Terms of Hard Releases

When building an app for web browsers, deploying a hot fix to users is a simple step, which means that testing can lose some of its importance. This obviously needs to be reconsidered when you’re releasing an app through an app store. Think of it like software development in the ’90s: You’re now living in the world of hard releases.

So, why is this bad? First, the submission process could easily take a week or two (Hello, Apple!). Secondly, even if your hot fix is released quickly, that doesn’t guarantee that users will update the app any time soon. Here are my suggestions:

  1. Make testing a high priority.
  2. Have some kind of “force update” logic to deprecate old client versions.
  3. Use mechanisms like Trigger.io’s Reload9179 to fix code on the fly.
  4. Apply for an expedited app review92 (Apple only) if you need to be fast.
Get It in the Stores

The tools mentioned above spit out a binary for each platform, which can then be submitted to the relevant store. From this point on, the process is exactly the same as publishing a “normal” native app. Some of the tools we’ve looked at might even have better documentation for this. Nevertheless, here are the official guides:

Conclusion

Now that our hybrid mobile apps have been in Apple’s App Store and in Google Play for two years, I’d like to recapitulate some of the benefits and drawbacks mentioned at the beginning of this article.

For us, a web startup company with very limited resources and no native iOS or Android experience, building an app for multiple platforms in just a few weeks would have been impossible. Choosing the hybrid path enabled us to reuse a lot of code from the web app and to iterate quickly based on user feedback. We’ve even managed to publish native apps for Windows 8 for the desktop and Microsoft Surface as well as Mac OS X with exactly the same code base. The effort of moving to another platform will depend largely on the capabilities of the given browser and device and on the level of your need for native functionality. We needed push notifications, in-app purchases and access to the user’s contacts, among other things. Depending on your needs, a lot of native functionality could make you heavily dependent on the native wrapping tool that you choose.

Finally, let’s see whether hybrid apps really can deliver a native look and feel. Below is a compilation of user reviews from the app stores. Both positive and negative comments are included, but many of the negative reviews are for early releases, which had the same UI for all platforms and was comparatively slow in performance.

★ Great idea, but not a good app. The app runs extremely slow on my Samsung Galaxy Ace and Tab. The app also looks and controls like an iPhone app. This is confusing when you have never had an iPhone.

★★ Another reason apps should not use WebViews for UI.

★★ Service great but WebView app sucks.

★★★ It’s the right app in concept, but it really is too laggy to be practically used. And I’m using Jellybean so there is no excuse.

★★★ It lags a lot and the UI is not beautiful.

★★★ Good but very very slow.

★★★★ This app is very handy, but is a little slow to boot up.

★★★★★ This is working really hard well since the update. It’s a great app to begin with and now it’s working smoother and faster than before.

★★★★★ Extremely smooth and effective.

★★★★★ The app work flawlessly…

★★★★★ Beautiful designed app! Love the interface and the great overview of all your tools! Good job! Keep shippin!

★★★★★ This is an absolutely beautiful aggregate that runs buttery smooth, even on a 3GS. Recommend to anyone doing any sort of project.

We’re definitely moving away from platform-specific app development and towards the many new technologies that are emerging. Larry Page said this97 when asked at Google I/O last year about the future of the web:

In the very long term, I don’t think you should have to think about, as a developer, am I developing for this platform or another, or something like that. I think you should be able to work at a much higher level, and software you write should run everywhere, easily.

The (mobile) web is a major success story in this regard. Being able to use this platform and still be able to distribute an app in all stores is a huge step forward. It will be interesting to see how this all plays out. Whatever happens, using a technology that over a third of the world’s population98 (over two thirds in Europe and the US) relies on probably won’t be a bad choice.

(da, al, ml)

Footnotes
  1. 1 http://www.visionmobile.com/product/developer-economics-q3-2014/
  2. 2 http://www.visionmobile.com/product/developer-economics-2013-the-tools-report/
  3. 3 http://www.phonegap.com
  4. 4 http://www.trigger.io
  5. 5 https://xamarin.com/
  6. 6 http://www.appcelerator.com/titanium/
  7. 7 http://www.embarcadero.com/products/rad-studio/fmx
  8. 8 https://developer.apple.com/library/ios/navigation/
  9. 9 http://developer.android.com/design/index.html
  10. 10 https://dev.windowsphone.com/design
  11. 11 http://www.telerik.com/kendo-ui
  12. 12 http://ionicframework.com/
  13. 13 http://jquerymobile.com/
  14. 14 http://onsenui.io/
  15. 15 http://www.sencha.com/products/touch/
  16. 16 http://chocolatechip-ui.com/
  17. 17 https://github.com/jakiestfu/Snap.js
  18. 18 http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/
  19. 19 http://c2prods.com/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/
  20. 20 http://de.slideshare.net/yaelsahar/tapping-into-mobile-ui-with-html5
  21. 21 http://jsfiddle.net/prud/dnebx02p/
  22. 22 http://david-smith.org/iosversionstats/#retina
  23. 23 http://developer.android.com/about/dashboards/index.html#Screens
  24. 24 http://caniuse.com/#feat=svg
  25. 25 http://responsiveimages.org/
  26. 26 http://www.uifuel.com/hd-retina-display-media-queries/
  27. 27 http://iosfonts.com/
  28. 28 http://developer.android.com/design/style/typography.html
  29. 29 http://msdn.microsoft.com/library/windows/apps/hh700394.aspx#ux_font_choice
  30. 30 http://support.apple.com/kb/HT5956
  31. 31 http://mir.aculo.us/2013/09/16/how-to-create-a-web-app-that-looks-like-a-ios7-native-app-part-1/
  32. 32 http://caniuse.com/#feat=fontface
  33. 33 http://ionicons.com/
  34. 34 http://ios7-icon-font-demo.herokuapp.com/
  35. 35 http://www.spiderflyapps.com/downloads/android-developer-icons-the-font/
  36. 36 https://github.com/Turbo87/Android-Action-Bar-Icon-Pack-Font
  37. 37 http://modernuiicons.com/
  38. 38 http://fontello.com/
  39. 39 https://icomoon.io/app
  40. 40 http://fontastic.me/
  41. 41 http://msdn.microsoft.com/library/windows/apps/jj841126.aspx
  42. 42 http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
  43. 43 http://estelle.github.io/mobileperf/
  44. 44 http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
  45. 45 https://developers.google.com/speed/articles/reflow
  46. 46 http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/
  47. 47 http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/
  48. 48 https://github.com/ftlabs/fastclick
  49. 49 http://jsfiddle.net/prud/x9y6cfhg/
  50. 50 http://fgnass.github.io/spin.js/
  51. 51 http://www.queness.com/post/9150/9-javascript-and-animated-gif-loading-animation-solutions
  52. 52 http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/
  53. 53 http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
  54. 54 https://github.com/filamentgroup/Overthrow#browser-support
  55. 55 http://iscrolljs.com/
  56. 56 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
  57. 57 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
  58. 58 http://androidwidgetcenter.com/android-tips/how-to-refresh-gmail-on-android/
  59. 59 http://dwcares.com/pull-to-refresh-2/
  60. 60 https://github.com/prud/ios-overflow-scroll-to-top
  61. 61 http://jsfiddle.net/prud/r7kqr1a3/
  62. 62 http://quojs.tapquo.com/
  63. 63 http://hammerjs.github.io/
  64. 64 http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries
  65. 65 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg
  66. 66 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg
  67. 67 http://phonegap.com/
  68. 68 http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/
  69. 69 http://cordova.io
  70. 70 https://build.phonegap.com/
  71. 71 http://www.telerik.com/appbuilder
  72. 72 http://www.appgyver.com/
  73. 73 http://appery.io/
  74. 74 http://monaca.mobi
  75. 75 https://software.intel.com/html5/tools
  76. 76 http://www.sencha.com/products/touch/
  77. 77 https://trigger.io
  78. 78 http://gruntjs.com/
  79. 79 https://trigger.io/reload/
  80. 80 http://docs.build.phonegap.com/en_US/tools_hydration.md.html
  81. 81 https://trigger.io/pricing/
  82. 82 http://www.mosync.com/
  83. 83 http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/
  84. 84 http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html
  85. 85 http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/
  86. 86 https://developer.apple.com/safari/tools/
  87. 87 https://developer.chrome.com/devtools/docs/remote-debugging
  88. 88 http://msdn.microsoft.com/en-us/library/windows/apps/hh441472.aspx
  89. 89 http://people.apache.org/~pmuellr/weinre/
  90. 90 http://html.adobe.com/edge/inspect/
  91. 91 https://trigger.io/reload/
  92. 92 https://developer.apple.com/appstore/contact/appreviewteam/index.html
  93. 93 https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html
  94. 94 http://developer.android.com/distribute/googleplay/start.html
  95. 95 http://developer.android.com/distribute/tools/launch-checklist.html
  96. 96 http://msdn.microsoft.com/library/windows/apps/jj206736.aspx
  97. 97 http://youtu.be/9pmPa_KxsAM?t=2h56m6s
  98. 98 http://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users

The post Hybrid Mobile Apps: Providing A Native Experience With Web Technologies appeared first on Smashing Magazine.

Improving Your Information Architecture With Card Sorting: A Beginner’s Guide

Mon, 10/20/2014 - 13:29

Information architecture (IA) is one of those buzzwords you’ve probably heard before. It refers to the organization of the information on your website and how it all fits together. When planning your IA, involve users of your website in the process as soon as you can.

In this article, we’ll discuss card sorting, a tried and true technique for doing just that. We’ll go through some practical tips for running a card-sorting session, and also cover some examples.

What Is Information Architecture?

One of the great things about modern web design is the way it considers users’ needs from the start. Successful projects are successful often because the owners commit to understanding users, their backgrounds and their goals as early as possible. Like anything else in this game, though, a successful project takes work and planning.

1Good IA helps to make a project successful. It makes content easy to find on a complex website. This is also helped by effective navigation; however, there is some confusion about the difference between the two. What is the difference, anyway? (Image source2) Good Navigation Starts With Good IA

IA refers to the structure of information on a website, and it is depicted with site maps, diagrams and spreadsheets. Navigation refers to elements of an interface that people use to make their way through that structure — menus, breadcrumbs, links — and it is depicted in wireframes or prototypes. Therefore, improving IA starts with analyzing the website’s content and structure first — navigation comes after.

As with many website improvements, it helps to use techniques that involve users. Card sorting is one such technique that has been used for many years due to its reliability and effectiveness. To start with, we’ll examine the causes of poorly organized information — prevention is always better than a cure! We’ll then cover some practical tips for running your own card-sorting sessions and consider how they can improve the IA in your own projects.

Bad IA Is Everywhere

Bad organization can happen anywhere. When was the last time you spent ages looking for something within a complex system and couldn’t find it? A typical example is trying to find something at a large supermarket. Most people could easily find household staples in the frozen goods, dairy or fresh produce section. But which section would you visit to find more obscure products? Where would you find gluten-free bread, your favorite imported brand of hot sauce or that artisanal handmade bean dip you tried at the party last weekend?

Where’s the Hot Sauce?

I sometimes struggle when looking for products at my supermarket, which increases my frustration. I usually end up asking a store employee where to find the item, assuming I haven’t left the store already. The same is true of the web, except that users are even less patient. If users can’t find what they want in seconds, by either browsing or searching, they’re unlikely to stick around. As a result, websites (and supermarkets) benefit greatly from an intuitive structure and organization. Unfortunately, some fail to address these issues properly, leading to lost sales as customers grow frustrated and leave.

How Bad IA Happens

It’s not difficult to end up with a badly organized website, despite one’s best intentions. But how does a website end up like this in the first place?

One of the most common reasons is that the IA is created from the business structure of the organization, rather than from users’ needs. This is the default option for many clients. More common still is when the information is organized according to the preferences and whims of senior members in the company. This is often due to the influence of the HIPPO3 (the highest paid person’s opinion), usually made by an assertive individual who often lacks a grasp of what makes a good website.

The Importance of Content Strategy

For larger websites, the issue is often the lack of a clear content strategy. Managing content is crucial for websites that are large or frequently updated. Content strategy covers processes like:

  • who updates the website and how often,
  • the system for managing old or out-of-date content,
  • maintaining the taxonomies for content on the website (tags, types, categories, labels).

As web professionals, we take pride in our work and planning abilities. Being confronted by an overbearing HIPPO and archaic content strategies is frustrating. However, both of these problems have a common solution. User-centered techniques such as card sorting are powerful because they enable you to be much more scientific in diagnosing and fixing website problems. Later on, we’ll look at how card sorting and content strategy work hand in hand.

How Card Sorting Helps

So, how do we get users involved in organizing the information on our website? Ideally, we want a solution that’s cheap, quick and useful. Thankfully, card sorting is all three of these. The process is much like it sounds. You write down all of the discrete elements that you wish to organize onto cards, and then ask participants to collect them into groups that make sense to them. But is that all there is to it? When can it be used, and what should the outcome be?

When to Use It?

The process of organizing content is fraught with questions. Should it be grouped by type or by subject? Which category does this FAQ question belong to? Card sorting answers these types of questions and is useful in many situations. Some specific examples include:

  • classifying the products in an e-commerce store,
  • organizing questions in an FAQ section,
  • untangling a complex site map.

One of the great things about card sorting is that it needn’t be confined to client projects or even websites. After having used it for clients, we saw its value as a general purpose tool. We have started using it in our own internal meetings to incorporate feedback from our team about how to organize a particular business process or how to structure an upcoming presentation.

Ultimately, the goal of any card sort is to improve the labelling, grouping and organization of information. However, it is best suited to organizing content, and it won’t fix everything on its own. If your website is very task-focused (if it’s an airline-booking website, for example), then card sorting on its own will provide limited benefit. Best to direct your energies towards usability testing, especially if your time or budget is tight.

4
Card sorting can be useful in your own internal meetings when you need to organize something. It’s a great way to incorporate feedback from your team. (View large version5) Open or Closed?

Card sorting sessions can be classified as one of two types — open or closed. Open card sorting is the more flexible option of the two. Here, users are free to organize the cards you supply into groups that make sense to them, and then come up with their own names for these groups. They are also free to rename cards or make their own suggestions for new cards if they wish.

This type is best when you want to understand how users would group your content. Gathering their ideas and suggestions for names and labels goes a long way to making your website more intuitive.

The alternative method, closed card sorting, is where the categories or labels are fixed. This is useful when you want to understand how users fit content into an existing structure. It’s also used when new content needs to be added to a website.

As an example, consider an e-commerce website and the top-level categories they might have for their products, such as technology, home and garden, and sports and leisure. Now suppose that the store has started stocking a new range of products that have just been launched. Which top-level category on the website should these products be added to? Involving users in a closed card sort could help you to arrive at an answer.

Sometimes you can mix the two techniques. Run an open card sort with one group of users to define the top-level categories. Then run a closed card sort using these new categories, and see how easy it is for users to fit existing content into them.

This Time, It’s Personal

Traditionally, card sorting is as low-tech as it gets, requiring no advanced technology or software. You simply write all of the items on pieces of paper or cards, spread them out on a table, and let your users have their way with them. This method is the most widely used because it’s cheap, quick and intuitive. Being in the same room as your users means you’ll be on hand to guide them through the process.

6OptimalSort is an online tool for card sorting. (Image source7) (View large version8)

The focus of this article is offline sessions, but online sorting tools, such as OptimalSort309 and ConceptCodify2910, present some key advantages. Recruiting participants is easier, which makes it easier to scale up. Many feature advanced reporting tools to identify correlations and patterns, which can take a lot of time when done manually. Free tools such as Trello11 also work well for card sorting, but you lose the ability to generate reports.

The disadvantages of online services are that they are often a lot more expensive and you lose that personal touch. You’ll gain unique insight by observing people’s behavior and body language, which online sessions can’t capture.

Step By Step 1. Prepare

The first task in running an offline session is to prepare your cards. Create a document that lists all of the items you are testing, and give each one a number — spreadsheets are ideal for this. These items could be pages in a site map, product categories or labels in a taxonomy. Each item in this list then gets written on a single card, with the corresponding number written on the reverse. This numbering will help if you want to run more advanced analysis once the sessions are complete.

For the cards themselves, use actual cards instead of paper, which can get lost, worn out or torn easily. Also, don’t test too many things at once. From experience, I can say that no more than 50 to 70 items per session is about right. If you’re trying to organize a massive system, break it up into chunks, and then run sessions for each chunk.

12
This is pretty much all you need. And a table. (Image source13) (View large version14)

Choosing what to write on the cards can be challenging. Ideally, the labels should be short enough that they can be read quickly, but long enough to make sense and for participants to understand what is being represented. Short titles usually make sense only in the context of the group they belong to. Therefore, summarizing the content as briefly as possible could help, rather than simply using a title.

For example, a label like “More information about our phones” would be preferable to just “More information.” The second item would make sense within an existing parent group named “Our phones,” but on its own it doesn’t make much sense.

In summary:

  • Use a spreadsheet when preparing your cards.
  • Get cards that are durable.
  • Find a balance for labels between simple and intuitive.
2. Walk Before You Can Run

If this is your first time using this technique, use it in a smaller project if you can. Organizing and analyzing the results will be easier, and it will be an opportunity to fine-tune your technique for next time. One decision you’ll need to make early on is whether to run group or individual sessions. The answer usually depends on the complexity of the system, as well as your time and budget. If you’re just starting out, get your feet wet with individual sessions first — you can always scale up later if you need to.

When you’re organizing a lot of content, groups of three users will reach consensus faster. However, they will need more moderation, and they could cost you more time and money. You also run the risk of dealing with aggressive HIPPOs, which can skew the results.

How many users should you include in a session? For the data to be useful, you will need more users than for a typical usability test. Jakob Nielsen recommends about 15 users15 to arrive at statistically useful results. Be wary of including more and more users in your tests, however, because the returns diminish as you go higher.

In summary:

  • If this is your first go with card sorting, try it on a smaller project first.
  • Groups reach consensus faster.
  • Individual sessions are easier to moderate.
  • Get around 15 participants to achieve useful results.
3. Find Participants

The next step is to find participants. For best results, find actual users of the website, especially if it’s a niche or specialized system. If you’re trying to improve the organization of a student intranet, for example, find students. For something more general, like a large e-commerce website, find users with a broad range of demographic indicators, such as age, income or technical ability.

If possible, involve your client in finding users. The client could even provide them directly — say, if you’re redesigning a staff intranet. Offering a small financial incentive, like a gift voucher, also helps to make sure they turn up.

In summary:

  • For niche websites or intranets, find existing users.
  • For more general websites, find users from varied demographics.
  • Clients are often helpful in finding participants.
4. Put It All Together

The final step in preparation is to get the meeting room ready. Get a large table or notice board — the bigger the better. You’ll also need some kind of recording system in place. This could be anything from a camcorder to a smartphone, as long as it enables you to play back the audio and video from the session. Make sure enough drinks and refreshments are on hand, too.

Once you’ve prepared the cards and your users have arrived, it’s time to run the sessions! Provide clear instructions, and let the users know you will be recording their sessions for later review. Explain that you want them to organize the cards into groups that make sense to them and that there is no right or wrong answer. If you’re running an open card sort, get some blank cards for them to write their own names once the initial organization stage is over.

While you’re running the sessions, you might need to act as a moderator. Be on hand if they get stuck (there will likely be a lot of “ums” and “ahs”), but explain that this isn’t a problem. In fact, knowing where they are getting stuck is useful because it indicates a problem with labelling. If they find some cards difficult to classify at all, then leave them off to one side and note what they are. Also, be aware that the demands on you as a moderator will increase in group settings.

In summary:

  • Record each session and take notes.
  • There is no right or wrong answer.
  • The demands on you as a moderator will increase with more participants.
5. Wrap Up

Once they have gotten as far as they can, feel free to ask some questions if you have time. You could ask them to explain their choices in more detail, what made them hesitate about this particular card, and so on.

Finally, record the arrangement they’ve made. The easiest way to do this is simply by taking a photo, but in a small room it can be hard to make sure that all of the cards are in the shot. Taking a photo isn’t always feasible, so if you have numbered the cards, then you can note which numbers were grouped together. This will also help you when you do a more detailed statistical analysis of the groupings, which is out of scope of this article.

Once that’s done, write the participant’s name on your notes and photos. To reduce any potential bias, shuffle the cards for the next user, and then invite them in.

In summary:

  • Taking photos is a quick way to record the arrangements.
  • Ask questions if you have time.
  • Shuffle the cards before each session to reduce bias.
Further Tips
  • Offering a small incentive is a good way to encourage participation.
  • When choosing what to sort, try to choose content from similar levels (i.e. category pages or individual help topics). Mixing child and parent categories is confusing.
  • Provide clear instructions. Have an idea of what you want to say before you start.
  • Provide blank cards and a marker pen for new suggestions — essential for open card sorting.
  • Try not to interrupt participants unless they ask for help.
  • It’s OK if participants can’t group everything. This is useful information.
  • Set a time limit for each session, which will make scheduling much easier.
  • In individual sessions, ensure that no one else is present. This would be distracting.
  • Always record the sessions, and take notes!
Interpreting The Results

Congratulations! You’ve just run your first card-sorting sessions, and your notebook is full of fresh insights. The next step is to interpret the results. Because this is probably your first card-sorting session, you won’t have mountains of results to sort.

For each participant, document two sets of observations for each session. The first step is to create a new document, and then transfer any notes that you made during that session. These should be qualitative observations, such as any new names that were suggested and whether the person hesitated on a particular card.

Next, note that participant’s groupings. You could simply arrange the groupings in a bulleted list in your document or show the groupings in a spreadsheet. A spreadsheet is ideal if you want to perform some advanced statistical analysis later. Various methods and pieces of software can do this for you, and the specifics of this could fill another article by themselves. The important thing is to depict the hierarchy, the parent-child relationships, that each participant created.

What to Look For

Once this is complete, it’s time for analysis. This is as much art as science. The goal is to identify trends that correlate across different sessions, and to answer some of the following questions:

  • Which items appeared together most often?
  • Which items did participants struggle to classify?
  • What new suggestions or labels were made?
  • Were any items put in more than one grouping?
  • Were any other items of interest brought up during the sessions?

If many users organized the cards in a similar way, then the job is fairly straightforward. It’s a matter of applying that same organization to your content. If you have time, then follow up with further user testing to confirm that the new structure is superior to the old one.

For IAs that are complex, users often come up with wildly different structures. You might need to involve a larger group until broad trends emerge. This is the hard part, and it might take a couple of passes to sift through the chaff and get to the good stuff. After running a few sessions, you’ll get the hang of it.

Online tools are a great help in these situations because they make statistical analysis much easier. Advanced techniques of analysis include creating dendrograms. These are tree-like diagrams that show the grouping of information within hierarchies and show how closely items are related. Some online services provide tools for making these, but they’re quite onerous and out of scope for this article.

16
Dendrograms represent visual groupings of information, but they are tricky to create without specialized software. (Image source17) (View large version18) Example From A Real-World Project Background

Recently, the team at Decibel Digital19 worked on the redesign of a major UK animal charity website. The existing website had a section simply named “A–Z,” which contained hundreds of pages. A lot of the pages were genuinely useful and included varied content such as news, help, videos and downloads. The problem was that there was little to no structure. Everything was simply mixed together and then organized alphabetically. It was the largest section of the website by far, so locating what you needed without relying on search was incredibly hard.

Upon speaking with the digital team, we realized that part of the problem was a lack of oversight. Anyone in the company was able to upload new content to this section, and they would often upload duplicate content with a slightly different name. Over many years, the content in this section grew into a chaotic mess, like an asteroid belt — and just as difficult to navigate.

Running a Content Audit

Getting into the habit of auditing content before redesigning a website is a good thing. We gathered all of the website’s pages and their URLs in a spreadsheet, along with a short description of the content — text, images, video, articles and so on. These URLs can be exported from an existing CMS, but we used a tool named Screaming Frog20.

21
SEO Spider is a nifty little utility that crawls a website and lists all of its pages and elements. You can use this list to perform a content audit. (View large version22)

Once the spreadsheet was prepared, the next step was to evaluate the content. We used a method called a ROT analysis. We checked each piece of content using the following criteria:

  • R: Is the content redundant?
  • O: Is it outdated?
  • T: Is it trivial?

Working through the website’s content like this can seem laborious, but it was actually very therapeutic. The client felt relieved once they started unravelling the content monster that their old website had spawned, which made everyone feel better about the project. Using this ROT analysis made it faster to reach consensus on choosing pages to remove or archive. Pretty soon, the content was whittled down to manageable levels. The next step was to figure out how to organize this content. Enter card sorting!

23
A content audit is way more fun than a tax audit. (View large version24) Running a Card-Sorting Session

Following on our content audit, we all felt that the existing A–Z section wasn’t really fit for the purpose, despite a lot of the content being useful and valuable. We decided to run a card-sorting session to organize the content in a way that would inform the new website’s navigation. The goal was to develop a structure that made the content browser-friendly and easily findable without the user having to rely on search.

What to Test?

The website still had a lot of pages, so we had to decide which to include in the sessions. Having too many cards to sort becomes laborious and difficult, so we decided to include only first- and second-level pages to keep things manageable. We also didn’t include utility pages, such as “Contact Us,” “Privacy Policy” and the like, which are commonly found on many other websites. Once this was done, we had about 50 pages left, which we felt was ideal to begin the sessions.

Finding Users

The next step was to find users to test, for which we enlisted the help of the client. The users of the website tended to skew to an older female demographic, so having the client’s input here was very useful. Some of the users we tested had already engaged with the client in offline marketing activity and were excited to help!

Open vs. Closed

We decided to run an open card sort because the content from the existing A–Z section was diverse, comprising news, videos, blog posts, help articles and advice. We wanted to rely on the users’ input to create labels for these content types that made sense to them. As a result, we supplied plenty of blank cards and pens for them to write their own suggestions.

During each session, we took plenty of notes, particularly about the items that users found difficult to sort and any suggestions they made for new labels that we hadn’t considered. We also recorded each session as a backup, so that we could go over the recordings later to observe anything we missed.

What We Found

At the conclusion of the sessions, we took photos of the groupings and updated our spreadsheets. We looked for quantitative data — were there any trends? Did multiple users make similar suggestions for new labels? Did any labels consistently cause users to struggle? We looked at qualitative data, too: specific comments that users made or what they said out loud as they struggled to categorize a particular card.

25The results from your card-sorting sessions might surprise you. (View large version26)

Being a charity, the client relies a lot on donations and support from the public, so getting the labels for these sections right was important. We found some interesting points:

  • The website offered annual paid memberships as a means of supporting the charity, as well as the ability to register a free account on the website. These were labelled as “Register an account” and “Become a member”; however, many users were confused by the difference. We ended up changing the wording of the membership call to action to eliminate the confusion.
  • We had suggested the name “Knowledge Centre” as a label for the help content, but many users suggested alternatives. We ended up using “Help & Advice” on the website instead.
  • The charity ran monthly “Appeals” as another means of getting donations, and it also campaigned on many issues that were listed in “Campaigns.” Lacking any context, though, every user we tested struggled to differentiate these cards. We ended up incorporating the “Campaigns” section into another area of the website.
  • To indicate a desire to support, nearly every user suggested the term “Get Involved” as a major category label. We noticed this convention on other charity websites, too.

After all this was done, we presented our findings in a report. We decided not to include masses of quantitative data. While it was useful to us internally, we felt the client would be unfamiliar with the quantitative data and wouldn’t know how to interpret it without sufficient explanation.

Instead, we presented our key findings (like those listed above) in plain English, and we classified our findings as high, medium and low priority. We also included some recommendations on how to resolve the issues we found. This made it much easier for the client to identify “quick wins” with their content’s structure, and it made it easier for us to implement the required improvements.

27
The client doesn’t always need to see the messy details. Putting your key findings into a clear report is often preferable. (View large version28) Final Thoughts

Card sorting is a favored technique because it’s cheap, reliable and easy to set up. It’s a great way to become familiar with concepts such as information architecture and user-centred design. Remember that it’s not a silver bullet, and it won’t fix all of the problems on an existing website. A website might be performing poorly or be hard to use for many reasons, and improving the IA might address only some of them. However, when used in tandem with other user-centered design techniques, it can go a long way to starting off a project or redesign on the right foot.

Hopefully, you have enjoyed learning about card sorting. When implemented well, it results in a product that is intuitive and easy to navigate. If you’ve made it a part of your own process already or you have anything to ask or share, please join the discussion in the comments section.

Other Resources

(il, al)

Footnotes
  1. 1 https://www.flickr.com/photos/10ch/3347658610
  2. 2 https://www.flickr.com/photos/10ch/3347658610
  3. 3 http://www.askahippo.com/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-img-cardsortinternal-lrg-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-img-cardsortinternal-lrg-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/4-img-optimalsort-lrg-opt.jpg
  7. 7 http://www.optimalsort.com
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/4-img-optimalsort-lrg-opt.jpg
  9. 9 http://www.optimalworkshop.com/optimalsort.htm
  10. 10 http://conceptcodify.com/
  11. 11 https://trello.com/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/09/5-img-cards-lrg-opt.jpg
  13. 13 http://www.shutterstock.com
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/5-img-cards-lrg-opt.jpg
  15. 15 http://www.nngroup.com/articles/card-sorting-how-many-users-to-test/
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/09/6-img-dendrogram-lrg-opt.jpg
  17. 17 http://www.optimalworkshop.com/
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/09/6-img-dendrogram-lrg-opt.jpg
  19. 19 https://www.decibeldigital.com/
  20. 20 http://www.screamingfrog.co.uk/seo-spider/
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/09/7-img-seospider-lrg-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/09/7-img-seospider-lrg-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/09/8-img-audit-lrg-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/09/8-img-audit-lrg-opt.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/09/9-img-cardsorting-lrg-opt.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/09/9-img-cardsorting-lrg-opt.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-img-report-lrg-opt.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-img-report-lrg-opt.jpg
  29. 29 http://conceptcodify.com/
  30. 30 http://www.optimalworkshop.com/optimalsort.htm
  31. 31 http://www.nngroup.com/articles/ia-vs-navigation/
  32. 32 http://shop.oreilly.com/product/9780596527341.do

The post Improving Your Information Architecture With Card Sorting: A Beginner’s Guide appeared first on Smashing Magazine.

Freebie: Touristic Icons (100 Icons, PNG, SVG)

Fri, 10/17/2014 - 14:10

Icons are a lot like real monuments — they can both be easily recognized. Today’s icon set consists of a set of vector icons that represent monuments across the globe, so they can be literally used anywhere. This colorful set was carefully designed by Freepik131 and is completely free to use for commercial as well as your personal projects, including software, online services, templates and themes.

This icon set is licensed under a Creative Commons Attribution 3.0 Unported2. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is prohibited. Please always provide credits to the creators and link to the article in which this freebie was released if you would like to spread the word.

3A few monuments that can be found across Europe. (View large version4) 5From Turkey to the Philippines, including other countries in Asia. (View large version6) 7Well-known monuments across North and South America. (View large version8) 9And even more monuments across Europe. (View large version10) Close-up view: A great architectural work of art, the Sydney Opera House. Close-up view: The well-known white marble mausoleum, the Taj Mahal. Close-up view: The longest inhabited bridge in Europe, the London Bridge. Download The Icon Set For Free Insights From The Designers:

“These icons are trendy and present a good number of reference sites in regards to graphic design. Due to the fact that designers and developers have increasingly become quite demanding when choosing icons, we’ve chosen this line style to capture the elegance and cleanliness. The fluorescent colors are also in line with the trend and, in this case, are the best way to highlight line icons on black and white.

We created this icon set with a modern and minimalist style that contrasts with the traditional character of the photographs in black and white. They can be used to create logos to adorn websites, travel guides, and even video motion graphics. We’ve prepared them in vector format so that they can be used in any type of medium. You’re welcome! ;)”

Thank you to the creative minds behind Freepik131 — we sincerely appreciate your time and efforts! Keep up the brilliant work!

(il)

Footnotes
  1. 1 http://www.freepik.com/
  2. 2 http://creativecommons.org/licenses/by/3.0/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-1.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-1.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-2.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-2.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-3.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-3.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-4.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/10/preview-large-4.jpg
  11. 11 http://provide.smashingmagazine.com/smashing-freebie-touristic-icon-set.zip
  12. 12 http://www.freepik.com/
  13. 13 http://www.freepik.com/

The post Freebie: Touristic Icons (100 Icons, PNG, SVG) appeared first on Smashing Magazine.

Be A Better Designer By Eating An Elephant

Fri, 10/17/2014 - 11:12

I can’t imagine any other industry in which so much change happens so quickly. If you stop paying attention for a week, it can feel like you’ve not been listening for a year. There’s so much to learn.

Falling behind is easy, too. We might be in the middle of a major project, so we put off learning about this newfangled thing called Sass or Node.js or even quickly experimenting with the new Bootstrap or Foundation that everyone is raving about. Before we know it, we have these elephants of missing knowledge wandering around our minds, reminding us of what we should know and do but haven’t found the time for.

Even just looking at beautiful work and seeing what new technique we could use ourselves can seem like too big a task when we’re swamped with projects. So, we tell ourselves we’ll come back to it later. But later never shows up. The guilt definitely does, but not that elusive deadline of later.

We feel guilty because we know something out there could help us become a better designer or developer and we’re not paying attention to it. Luckily, we can change this and start to catch up on what we’ve been missing out on.

Eating Elephants To Get Things Done

I always liked the productivity quip about how to start and finish a huge project: You do it the same way you eat an elephant, one bite at a time.

I’m not suggesting we go out and eat endangered animals, but what if we did just one small thing a day to expand our knowledge and skill set — and not just for a week or only on weekends, but every day, for 30 days straight? Would we catch up on that knowledge and experience we’re missing?

This challenge of stacking knowledge daily will enable you not only to learn 30 things, but to learn 30 things that will increase in complexity and fit together as a whole new branch of working knowledge for you.

1I’m sure you remember this kind of graph from finance class in high school when you would discuss compound interest. Knowledge is no different: A little bit every day adds up quickly. Actively stacking up your knowledge daily will help you stay on the red path. (View large version2)

How does that sound? Want to give it a go? It’s only 30 days, and it could alter the path of your career, even if slightly.

Pick A Challenge

Pick the right challenge, something that will keep you curious and excited for 30 days, something you’d be happy to chew on slowly. But the challenge should be able to be comfortably broken down into easy pieces, small bites.

Suppose you’re a web designer who wants to learn the CSS processor Sass. No shame in that; I’ll bet, like me, you’ve been very busy. But the prospect of learning Sass is kind of huge, isn’t it? What if we did it in the same way that we’d metaphorically eat an elephant?

Your day-one task might be to learn how to install Ruby and Sass locally. You can’t just be reading, though. That’s not learning — that’s memorizing. You have to do it as you go, downloading the installation files or loading the terminal.

Day two might be learning about and actually writing variables. Day three might be nesting. Days four through six might be setting up your files as partials. And then importing. And then mixins. Then, day seven could be inheritance. You might find that, once you’ve planned these days out, you have enough work for only 15 days, so maybe you’ll jump into learning Bourbon, Foundation or Bootstrap?

That all sounds like a lot to take on, especially if the names all sound intimidating. Biting them off one at a time would make things a lot easier. Downloading and installing a file might not seem like much, but tack that on to learning the basics over the next few days and you’ve started to develop a new skill.

But this isn’t about being perfect. You don’t need to build a beautiful website, or even a functional one. You just have to learn a collection of techniques and stay on track. To do so, to maintain focus, you need a plan.

Plan Your Bites And Prepare As Best You Can

You know what they say about the best laid plans of mice and men. So, avoid setting specific daily goals. Stumbling on day one would put you a day behind from the very start. A lacklustre performance for the following 29 days would then be almost certain. Rather than planning based on days, I’d suggest mapping your progress, which is really just a fancy way of saying “write a checklist” or even “keep a bucket.”

A Sass-loving designer would benefit from having an ordered list of, say, 45 to 60 things to learn and do. Some days, they’ll wake up and not get as much done as they’d like. Other days, they’ll work hard and everything will flow, and they’ll get two days’ worth of work done.

The other option is what I call a bucket. The bucket for my latest challenge was one of those nasty yellow “internal mail” envelopes, filled with topics I could write about. No need to be fancy about it: A list cut up into strips and then put into an envelope is all you need.

3Having a map to work to in these situations, an ordered list, will make the process easier. You will simply have no concern about slipping ahead or falling behind. (Image source4)

But why 45 to 60 topics and tasks if it’s a 30-day challenge? The bucket method makes things truly random, right up to the last day. Well, depending on the challenge, randomness might be exactly what you need. It worked well for me when doing my writing challenge.

Or, if you’re working with the map, it means you’ll focus more on the journey than on the destination. You’ll know well that you’re not going to finish everything in the 30 days, so you’re more likely to focus on what needs to get done day to day. You’ll also have leftovers, which will be perfect to keep you busy learning once the 30 days are up.

But where to find these small tasks? That depends entirely on the challenge you’re undertaking. Don’t overthink at this stage. You could spend far too much time worrying about learning the right thing that you’ll end up not learning anything at all.

For our Sass student, it could be as easy as going through introductory articles, both official ones and on blogs, or a series of classes on YouTube, or something structured like Lynda5 or curated like Gibbon6, Oozled7 or HackDesign8.

Set Time Goals, Limitations And Accountability

In The Creative Habit, Twyla Tharp talks about her morning gym routine. Her goal each morning isn’t to make it to the gym, but simply to get into a taxi. Once she’s done that, all she has to do to reach her morning goal is tell the driver to head towards the gym. Once there, she’ll exercise. What else is there to do? But her winning moment is getting into the taxi.

It seems to run counter to what was mentioned above about not setting goals for tasks, however, goals for start and finish times set us up for success. The real “work” is often simply showing up.

During my last challenge, dragging my foggy head from a warm and loving bed to my cold, sunless office proved to be a bigger challenge than I had anticipated. While the writing eventually became a natural part of my morning, getting to the desk did not.

Focusing on the seemingly insignificant goal of waking up and stumbling a few feet so that I could start typing meant that I had approached my task that day with a fresh accomplishment resting comfortably in memory.

Pressure is relieved before an initial effort is made, and with that first win comes the momentum to keep going. In these kinds of time goals you’ll find limitations and accountability. If you’re goal is to do two hours of work between 5:00 and 7:00 am, then your limit is 7:00.

Having a frequent finish time means that you’ll know how to ration out your effort, and your mind will appreciate the daily rest point that finishing provides. Once this kind of routine is established, you’ll be surprised by how easily you find the energy to keep working, often longer than you thought you would be able to, right up to the last minute.

Friends and followers will come to expect an outcome at the same time daily. Tweeting is simple, but throwing out a tweet at the same time every day sets up expectations for others. Getting a response, even if barely an occasional one, can keep you motivated for days.


In his quick talk at TED, Google’s Matt Cutts gives his take on how to learn or do something you’ve always wanted to in 30 days.

Go!

You’re excited. You have your plan of attack; you have your small goals; and you’re ready to get to work and start chewing. Day one arrives and perhaps you wake before dawn, or you’re up when only the owls are about. Either way, you’re ready to work. On that first day and the few that follow, excitement isn’t hard to find. But with it comes a coating of struggle.

A part of you will ask why you’re bothering. You’ll wonder what benefit could possibly be derived from this silly little game you’re playing. Ignore such miserable thoughts. They’ll probably arrive whether you like it or not. And for the first few days you’ll find yourself frequently battling your internal resistance. This scares many, but it’s natural.

Chances are you’re doing something challenging, something you’ve never done before, in parts so small that they won’t seem to matter. The lizard in your brain will tell you that surfing TV or the Internet would be easier. But that will go away. For me, it always goes around day 10. I hope it’s sooner for you, but by day 10 I find that things have become incredibly automatic and the resistance has almost completely disappeared.

However, not long after this, things get too easy. You might even end up setting your own little time traps. For my latest writing challenge, I gave myself up to two hours to do the work, but near day 20 I realized that I could write a piece in less than a quarter of that, and so I would leave it until that was all the time I had left. I’d still wake up on time at be at my desk, but I would mindlessly surf and read. What a wonderful signifier of development leftover time is, but one that I embraced poorly.

Time would be much better spent being reinvested in skill development. You could get dramatic returns by pouring this time into increasingly difficult tasks, and your framework of knowledge would be the richer for it. I’d suggest aiming for discomfort instead of finishing quickly.

In a 30-day challenge, defining your daily problems is up to you, so make sure to revise your plan every day. Look at the task you did that day and adjust for the following days. Was it too hard? Then maybe simplify tomorrow’s expectations. Was it too easy? Spice it up somehow. Write more words, write more code, further develop a design.

You don’t develop when you practice what you’re already good at. Aim to finish with excitement, but not exhaustion.

It’s 30 Days Of Achievement, Not Just Knowledge

You’ve spent 30 days working on a challenge, but not so that the skills you develop become automatic, but to show yourself what you can achieve in a tiny window. You’ve found an hour or two a day and have probably lost nothing because of it. Just keep going.

From day 31, don’t think of what you’re doing as a challenge. It’s simply how you work. It’s how you plan your time, and it’s how you grow your knowledge. Don’t make the mistake I’ve made too many times and expect that once the 30 days are out the door, perfect autonomy will walk into the room.

Before you hit day 31, plan out what you’ll do next. Continue following the map or emptying the bucket, but top it up with another 30 or 50 items, and just keep working. Review frequently, as you would during the 30 days, keep your schedule, and ensure that you’re enjoying the right kind of challenge.

Perhaps this is the biggest gift of the 30 days: not the skills you acquire or any habit you set out to establish, but rather the realization that you can find the time, that you can learn something every day, and that planning your education is important.


A few years ago, Karen X. Cheng posted a time-lapse video of herself learning to dance, a wonderful reminder of how far you can go with daily effort. She went on to cofound Giveit1009, a website that lets you follow others as they go through their own daily development, as well as keep track of your own challenge.

Conclusion

Learning something daily is not hard. Some amazing websites will help you do it; they’ll give you some random, small, independent piece of knowledge that’s great to talk about over coffee but that won’t stack. And that is what’s valuable: stackable knowledge. You can start stacking with such a small number of days — just 30 of them.

30 days. That’s all it takes to learn a skill that could change your career.

You might be able to develop your skills to keep up with, and then break ahead of, the pack. You might be able to charge more because you can offer more or offer better. You could learn to better tell the stories of your clients, to produce work that is more sustainable or even delightful. With time, you could become an authority to whom others in your field, both students and professionals, call on for help in becoming more skilled and knowledgeable themselves. Instead of simply meeting standards and expectations, you could be setting them.

10In all of these are opportunities for happiness, both professional and personal. (Image source11)

You could challenge yourself in ways you can’t imagine, pushing the edge of your knowledge and experience, finding new avenues previously hidden. Your work could becoming increasingly meaningful because of it, as every month or year finds you working at increasingly complex and sophisticated problems. You could, in ways both small and large, shape an industry that I’m willing to bet you love. All that, just because you worked on it an hour or two a day, one bite at a time.

The process is so simple. This is all you’re doing:

  1. Pick a topic.
  2. Break it down into parts.
  3. Map out or randomize those parts.
  4. Show up daily, at the same time, and get to work.
  5. Review progress, and make sure you’re being challenged just enough, adjusting as you go.
  6. Do it for 30 days.

Easy, isn’t it?

That’s how you take your daily bite. Soon, you’ll realize you’ve consumed an elephant-sized body of knowledge. You just have to show up and take action. Most of the people who read this article and like what they’ve learned will forget it all within a couple of hours or days. Or even minutes.

But not you. You’re going to work, and when you do, when you do this silly little challenge thing for 30 days, you’ll find yourself ahead of most of the people you know. Do it for 60 or 90 days or every single day for the rest of your career and you’ll be in a league of your own.

Pick your topic. Take action.

What’s Your Challenge?

What’s that thing you’ve been wanting to achieve? What’s that thing you’ve been wanting to learn?

  • Always wanted to learn how to design your own font? Try a letter a day. Start small by copying a font you love.
  • Need more experience with branding? Design one logo per day, or one brand per month. The first day could be research, the second could be brainstorming, the third sketching, all the way through to a polished style guide.
  • Want to learn photography? What if you started by learning what a single setting on the camera does? Then, work your way through to composition, style and post-production?
  • Want to learn to write? Grab any number of amazing books on writing, and read one rule or lesson per day. Then, write as many examples using that lesson as you can in an hour.
  • Want to learn a programming language? Learn and practice one command per day, with the aim of building a small working prototype.

Let us know what you’ve chosen in the comments. It might keep you on point and, even cooler, might inspire others to join you on the path.

Whatever you decide to do, don’t put it off. Start next Monday. Don’t wait a month or three or start first thing next year. Start next week, maybe the week after if you have to work on your list of tasks. Just start. As soon as you can.

Resources
  • Get one of those compound interest and investment charts that shows how just a small bit every day adds up.
  • Five Years of 100 Days12,” Michael Beirut
    Design legend Michael Beirut gives his students at Yale a 100-day design challenge. The results range from brilliant to hilarious. One of my favorites is Ely Kim’s “Boombox”13 dance challenge.
  • 100/100/10014, Zak Klauck
    Klauck undertook this challenge as part of Michael Beirut’s course at Yale. He designed a poster a day based on a short phrase or word, in only one minute.
  • Design Something Every Day!15,” Jad Limcaco, Smashing Magazine
    In 2009, Limcaco interviewed a few designers and illustrators who were doing year-long challenges to make something every day.

A lot of learning and inspiration can be found in what’s been written about design and development sprints in the last couple of years:

(al, il)

Footnotes
  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/30-day-gradient-large-opt.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/30-day-gradient-large-opt.jpg
  3. 3 https://www.flickr.com/photos/90675395@N00/4327328037/
  4. 4 https://www.flickr.com/photos/90675395@N00/4327328037/
  5. 5 http://www.lynda.com
  6. 6 http://www.gibbon.co
  7. 7 http://oozled.com/
  8. 8 https://hackdesign.org/lessons
  9. 9 http://www.giveit100.com
  10. 10 http://www.flickr.com/photos/tza/3214197147/
  11. 11 http://www.flickr.com/photos/tza/3214197147/
  12. 12 http://designobserver.com/feature/five-years-of-100-days/24678
  13. 13 https://www.youtube.com/watch?v=d2DLNLTTjvM
  14. 14 http://100100100.org/
  15. 15 http://www.smashingmagazine.com/2009/12/22/design-something-every-day/
  16. 16 http://www.smashingmagazine.com/2014/08/20/getting-started-with-design-sprints/
  17. 17 http://www.gv.com/lib/the-product-design-sprint-a-five-day-recipe-for-startups
  18. 18 http://googledevelopers.blogspot.com.au/2014/07/design-sprints-for-developers.html
  19. 19 http://robots.thoughtbot.com/the-product-design-sprint

The post Be A Better Designer By Eating An Elephant appeared first on Smashing Magazine.

CSS-Only Solution For UI Tracking

Thu, 10/16/2014 - 11:55

The web is growing up. We are building applications that work entirely in the browser. They are responsive; they have tons of features and work under many devices. We enjoy providing high-quality code that is well structured and tested.

But what matters in the end is the impact for clients. Are they getting more products sold or are there more visitors for their campaign sites? The final results usually show if our project is successful. And we rely on statistics as a measuring tool. We all use instruments like Google Analytics1. It is a powerful way to collect data. In this article, we will see a CSS-only approach for tracking UI interactions using Google Analytics.

2The Problem

We developed an application that had to work on various devices. We were not able to test on most of them and decided that we had to make everything simple. So simple that there wasn’t a chance to produce buggy code. The design was clean, minimalistic, and there wasn’t any complex business logic.

It was a website displaying information about one of the client’s products. One of our tasks was to track user visits and interactions. For most cases, we used Google Analytics. All we had to do was to place code like the example below at the bottom of the pages:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '......', '......'); ga('send', 'pageview');

This snippet was enough for tracking page views, traffic, sessions, etc. Moreover, we placed JavaScript where the user interacts with the page. For example, clicking on a link, filling an input field, or checking option boxes.

ga('send', 'event', 'ui-interaction', 'click', 'link clicked', 1);

The guys from Google handled these events nicely, and we were able to see them in our account. However, at some point the client reported that there were devices that have bad or no JavaScript support. They represented roughly 2% of all the devices that visited the site. We started searching for a solution that did not involve JavaScript. We were ready to admit that we could not collect statistics under these circumstances.

It was not that bad, but the client shared another issue. Our little application was going to be part of a private network. The computers there had JavaScript turned off for security reasons. Also, this private network was important for the client. So, he insisted that we still get stats in those cases. We had to provide a proper solution, but the problem was that we had only CSS and HTML available as tools.

3The Solution

While searching for a solution, I was monitoring the Network tab in Chrome’s developer tools when I noticed the following:

4(View large version5)

In the beginning, I thought that there was nothing unusual. Google Analytics’s code made few HTTP requests for its tracking processes. However, the fourth column shows the Content-type header of the response. It is an image. Not JSON or HTML, but an image. Then I started reading the documentation and landed on this Tracking Code Overview6. The most interesting part was:

When all this information is collected, it is sent to the Analytics servers in the form of a long list of parameters attached to a single-pixel GIF image request.

So, Google indeed made the HTTP request but not the trivial Ajax call. It simply appends all the parameters to an image’s URL. After that it performs a request for a GIF file. There is even a name for such requests: beacon7. I wondered why GA uses this approach. Then I realized that there are some benefits:

  • It is simple. We initialize a new Image object and apply a value to its src attribute: new Image().src = '/stats.gif?' + parameters
  • It works everywhere. There is no need to add workarounds for different browsers as we do for Ajax requests.
  • Tiny response. As Stoyan Stefanov said8, the 1×1px GIF image could be only 42 bytes.

I made few clicks and sent events to Google Analytics. Knowing the request parameters, I was able to construct my own image URLs. The only thing to do in the end was to load an image on the page. And yes, this was possible with pure CSS.

background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');

Setting the background-image CSS property forces the browser to load an image. Finally, we successfully used this technique to track user actions.

9Tracking User Actions

There are several ways to change styles based on user input. The first thing we thought about was the :active pseudo class. This class matches when an element is activated by the user. It is the time between the moment the user presses the mouse button and releases it. In our case, this was perfect for tracking clicks:

input[type="button"]:active { background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...'); }

Another useful pseudo class is :focus. We recorded how many times users started typing in the contact form. It was interesting to find out that in about 10% of cases users did not actually submit the form.

input[name="message"]:focus { background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...'); }

On one page, we had a step-by-step questionnaire. At the end, the user was asked to agree with some terms and conditions. Some of the visitors did not complete that last step. In the first version of the site, we were not able to determine what these users had selected in the questionnaire because the results would have been sent after completion. However, because all the steps were just radio buttons, we used the :checked pseudo class and successfully tracked the selections:

input[value="female"]:checked { background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...'); }

One of the most important statistics we had to deliver was about the diversity of screen resolutions. Thanks to media queries this was possible:

@media all and (max-width: 640px) { body { background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...'); } }

In fact, there are quite a few logical operators10 that we can use. We can track screens with a specific aspect ratio; devices in landscape orientation; or those with a resolution of 300dpi.

11Drawbacks

The problem with this kind of CSS UI tracking is that we get only the first occurrence of the event. For example, take the :active pseudo class example. The request for the background image is fired only once. If we need to capture every click then, we have to change the URL, which is not possible without JavaScript.

We used the background-image property to make the HTTP requests. However, sometimes we might need to set a real image as a background because of the application’s design. In such cases we could use the content property. It is usually used for adding text or icons but the property also accepts an image. For example:

input[value="female"]:checked { content: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...'); }

Because we are requesting an image, we should make sure that the browser is not caching the file. The statistics server should process the request each time. We could achieve this by providing the correct headers. Check out the image below. It shows the response headers sent by Google:

12(View large version13)

Sending the following headers guarantees that the browser will not cache the image:

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0

In some cases, we may decide to write our own statistics server. This is an important note that we must consider during development. Here is a simple Node.js-based implementation. We used that for testing purposes:

var fs = require('fs'), http = require('http'), url = require('url'), img = fs.readFileSync(__dirname + '/stat.png'), stats = {}; var collectStats = function(type) { console.log('collectStats type=' + type); if(!stats[type]) stats[type] = 0; stats[type]++; } http.createServer(function(req, res){ var request = url.parse(req.url, true); var action = request.pathname; if (action == '/stat.png') { collectStats(request.query.type); res.writeHead(200, {'Content-Type': 'image/gif', 'Cache-Control': 'no-cache' }); res.end(img, 'binary'); } else { res.writeHead(200, {'Content-Type': 'text/html' }); res.end('Stats server:<pre>' + JSON.stringify(stats) + '</pre>\n'); } }).listen(8000, '127.0.0.1'); console.log('Server is running at http://127.0.0.1:8000');

If we save the code to a file called server.js and execute node server.js we will get a server listening on port 8000. There are two possible URLs for querying:

* http://127.0.0.1:8000/ - shows the collected statistics * http://127.0.0.1:8000/stat.png?type=something - collecting statistics.

By requesting the PNG in the second URL, we are incrementing values. The following piece of code shows the HTML and CSS that we have to place in the browser:

<input type="button" value="click me"/> input[type="button"]:active { background-image: url('http://127.0.0.1:8000/stat.png?type=form-submitted'); }

Finally, as a last drawback we have to mention that some antivirus software or browser settings may remove 1×1px beacons. So we have to be careful when choosing this technique and make sure that we provide workarounds.

14Summary

CSS is usually considered a language for applying styles to webpages. However, in this article we saw that it is more than that. It is also a handy tool for collecting statistics.

(ds, il, og)

Footnotes
  1. 1 http://www.google.com/analytics/
  2. 2 #the-problem
  3. 3 #the-solution
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/10/1-google-analytics-large-preview-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/10/1-google-analytics-large-preview-opt.png
  6. 6 https://developers.google.com/analytics/resources/concepts/gaConceptsTrackingOverview
  7. 7 http://www.phpied.com/beacon-performance/
  8. 8 http://www.phpied.com/beacon-performance/
  9. 9 #the-tracking
  10. 10 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
  11. 11 #drawbacks
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/2-google-analytics-large-preview-opt.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/2-google-analytics-large-preview-opt.png
  14. 14 #summary

The post CSS-Only Solution For UI Tracking appeared first on Smashing Magazine.

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

Wed, 10/15/2014 - 09:00

The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness.

We needed only one set of assets for the original iPhone up to iPhone 3GS. And when iPhone 4 came out with the Retina display, we also needed 2x assets — images twice as detailed. Now, with the display of the 6 Plus being even more detailed than that of the iPhone 4, we will also need to provide 3x assets. The numbers 1x, 2x and 3x are also called “scale factors.”

Of course, Android developers have always had to deal with many different sets of assets. Still, designers are finding themselves questioning their production workflow. In this article, we’ll focus on iOS, but you could easily extend this approach to Android and the web. We won’t try to provide a silver bullet, and perhaps other ways might seem easier at first, but this article lays out a solid workflow that scales up for big projects.

First off, your icon sets should be vector-based. The approach described in this article focuses on generating multiple asset versions from a single vector shape in a Photoshop document that contains all of your icons.

A unified icon document has the advantage of keeping everything together in one file, allowing you to see how well your icons and assets harmonize.

If you’re designing for iOS 7 and above, then you might think that 1x versions aren’t needed anymore. However, you’ll still need them for devices such as the original iPad Mini, the iPad 2 and potentially Android and the web.

Set Up Photoshop

First, I’ll show you how I set up Photoshop. If you know what you’re doing, you can use other settings. But for those curious about how I like to work, this is it:

  1. Disable eye candy like “Animated Zoom” and “Flick Panning.”
  2. Disable “Snap Vector Tools and Transforms to Pixel Grid.”

The first point is a matter of personal taste, but not following the second point can get in your way when you’re trying to be precise with the Direct Selection tool.

1These selections will help you working precise with the Direct Selection tool. (View large version2)

Then, I’ll configure the Move tool (V) to select layers. You don’t need to check “Auto-Select” because you can select a layer automatically by pressing the Command key while clicking. Disabling this option protects you from moving layers unintentionally.

3Configure the Move tool (V) to select layers. (View large version4) Feel Free

First and foremost, I believe that design and production are two separate phases. When your creativity is flowing, you shouldn’t worry much about production constraints.

Design at your favorite resolution (perhaps 2x), and lay out using the dimensions of a device you’re familiar with. But definitely use a real device, and use apps like Skala Preview and xScope to mirror the design live on your device. You should not be working with apps unless you are constantly checking the design on a real device.

Tidy Up Those Vectors

As noted, I’ll assume that you’re designing your icons in Illustrator. Before copying them to Photoshop, you’ll need to tidy them up. Use Pathfinder to add and subtract paths until you have a single shape.

5If you design your icons in Illustrator, you need to tidy them up before copying them to Photoshop. (View large version6)

On the left above is a complex icon made up of multiple shapes, including a white shape to simulate transparency. For the icon on the right, I subtracted the white rectangle from the black one behind it. Do this by selecting the two rectangles and pressing the “Minus Front” button in the Pathfinder panel. Then, select all shapes and click “Unite” to combine them into one.

Now, copy the path to Photoshop, and paste it as a shape layer.

Paste your path as a shape layer.

If your shape ends up a mess, that means you didn’t tidy the vector graphic properly.

Align Forces

When you paste the icon in Photoshop, it might look something like this:

7When you paste the icon in Photoshop you will probably see those gray pixels around the shape. (View large version8)

When you zoom in close on the icon, you will probably see those gray pixels around the shape. Those “partial pixels” occur if a shape does not fill an entire pixel. We don’t want any of those.

We want to start working from a 1x version of the icon because, when tidied up properly, you will be able to scale this version up to 2x and 3x without any problems. If you did the original design in 2x, then you’ll need to scale the shape down to 50%.

Now it’s time to align the horizontal and vertical lines to the next full pixel. It’s OK if curves and diagonal lines don’t fill up entire pixels.

Use Photoshop’s Direct Selection tool to mark a group of misaligned anchor points, and use the arrow keys to move these points between two pixels.

Note: The closer you are zoomed in (use Option + Shift + mouse wheel), the more precisely you will be able to move the anchor points.

The anchor points of the bottom and the right side are now aligned to the pixel grid. All partial pixels are gone. Do A Check-Up

Now, make sure all anchor points are on the grid by scaling your 1x version up to 500%. If you see partial pixels, then align them as described above. If everything checks out, then scale the shape down to 20%.

Remember: From now on, you should always scale proportionally from the upper-left corner, and always make sure that the X and Y values are round numbers.

9If you see partial pixels, then align them as described above. (View large version10) Scale It

Let’s see how different resolutions of our icon work out. Select the 1x version (V, then Command + mouse click), and duplicate the icon (Option + click and drag) to a position next to the 1x version.

Scale the duplicated icon up to 200% proportionally from the upper-left corner. The 2x version should show no new partial pixels. It should only be bigger.

To keep things simple, we will assume you are happy with the 1x and 2x versions and that you now want to see the 3x one.

Duplicate the 2x version (Option + click and drag), move it off to the side, and then scale it up by 150%. (So, 200% × 150% = 300%)

Later in this article, I’ll tell you what to do if you are not happy with the results. But if you are happy with the 2x and 3x versions, then you know now that 2x and 3x versions can be generated from the 1x version without any problems.

Go ahead and delete the 2x and 3x versions — we will be generating them automatically.

Generate And Enjoy

Photoshop has a built-in tool called “Generator” that automatically renders a shape layer to multiple image versions. To do that, we have to create a layer group and give it a special name: the file name and scale factor for each version.

In this case, it should look like this: cover.png, 200% cover@2x.png, 300% cover@3x.png

The commas separate the versions, and the percentage tells Photoshop the amount of scaling.

11The commas separate the versions, and the percentage tells Photoshop the amount of scaling. (View large version12)

Now, activate Generator.

13Activate Generator. (View large version14)

Generator will create a folder next to your PSD file and will automatically save PNG files to it when you save the Photoshop document.

15Generator will automatically save PNG files when you save the Photoshop document. (View large version16)

To add a new scale factor at a later point in time, you simply have to alter the layer’s file name.

Get Creative For Different Resolutions

Modifying artwork for different scaling factors is a common practice because you can show more detail in a 2x graphic than you can in a 1x version.

In the following example, the 1x version of the icon contains just a single eighth note, whereas the 2x version contains a beamed note.

17Create different icons for different resolutions. (View large version18)

Obviously, you wouldn’t delete the 2x version because it is different from the 1x. Create an extra group for the 2x version, and give it a layer name that is compatible with Generator. Because you’ve already scaled the 2x version in Photoshop, don’t add “200%.”

To end up with a 3x version after working in 2x, you’ll have to scale by 150%. So, you would add this number to the 3x file name.

19To end up with a 3x version after working in 2x, you’ll have to scale by 150%. (View large version20) Size Matters

Making the 2x versions of your assets exactly two times larger than the 1x assets is absolutely critical. Sometimes this is harder to do than you think. Consider this keyboard:

21Making the 2x versions of your assets is sometimes harder to do than you think. (View large version22)

For the 1x version (the smaller keyboard on the left), I decided that 1-pixel-wide black keys were to thin, so I used 2 pixels.

When you scale that version up (marked in pink in the keyboard on the right), you end up with black keys that are 4 pixels wide, which looks a little too wide.

But with 3-pixel-wide keys, the distance between all of the keys changes. To keep everything symmetrical, we need to make the keyboard 1 pixel shorter. And because we can’t scale 3 pixels by 1.5 without ending up with fuzzy graphics, we also need a special 3x version.

To fix the export size of our 2x asset, we can add a layer mask. Generator will always use the dimensions of a layer mask if one is present.

23To fix the export size of our 2x asset, we can add a layer mask. (View large version24) 25Generator will always use the dimensions of a layer mask if one is present. (View large version26) Summary

Hopefully, the methods described here will simplify your workflow. As you can see, creating pixel-perfect assets for different screen sizes and densities isn’t such a chore when you use vector graphics to your advantage and let Photoshop do the grunt work.

Downsides of This Approach
  • Assets are stored at 1x in the Photoshop file.
Upsides of This Approach
  • Create multiple image assets from a single shape layer, potentially saving yourself a lot of time in the future.
  • Icons are all in one document.
  • Generating assets for other scale factors from your PSD becomes easy for other people.
  • Seeing which resolutions of an icon need special attention becomes easy for other designers.

(ml, al)
Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-photoshop-settings-opt.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-photoshop-settings-opt.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-move-tool-opt.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-move-tool-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-pathfinder-opt.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-pathfinder-opt.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-blurry-asset-opt.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-blurry-asset-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-scale-opt.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-scale-opt.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-layer-naming-opt.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-layer-naming-opt.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-asset-generator-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-asset-generator-opt.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-finder-opt.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-finder-opt.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-asset-canvas-opt.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-asset-canvas-opt.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-layer-naming-opt.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-layer-naming-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-keyboard-problem-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/10/14-keyboard-problem-opt.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-vector-mask-opt.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/10/15-vector-mask-opt.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-vector-mask-layer-opt.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-vector-mask-layer-opt.png

The post Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors appeared first on Smashing Magazine.

Taking A Closer Look At Tech Conferences: The Nitty Gritty Details (A Study)

Tue, 10/14/2014 - 13:13

As I was flying back from the Smashing Conference in New York, I wondered whether it was a success. This wasn’t an original thought. We are always wondering what makes a conference good and what elements will make industry workers stay away.

Good and bad are such subjective terms, though, with almost as many expectations as there are attendees. We decided that just looking at the numbers instead might be a good idea. This article will not present best practices for planning a conference1, but rather will look at how it’s actually done most of the time. While this is not a guide to putting together the perfect conference, it gives a good overview of what seems to work and which elements are so unpredictable that they do not serve as reliable guidelines.

The Aspects Considered

I analyzed the statistics of about 85 different conferences. I looked all over the world, looking at everything from big well-known events to small non-profit community meetings. I chose conferences that have been around for years and that have features that set them apart from other events.

Some of the data is straightforward, such as dates, number of speakers, tracks and workshops. Other aspects yielded much more varied and specific data (such as themes and technical considerations). So, I’ll present some fairly solid figures about some aspects, and convey just a sense of the variability of others. You can find the results in this PDF2.

The Questions
  1. How many speakers were invited to the conference?
  2. How many days did the conference last?
  3. How many tracks were offered?
  4. How many workshops were linked to the conference?
  5. How long did individual sessions last?
  6. How long were the workshops?
  7. How much did the conference cost?
  8. How much did the workshops cost?
  9. How many people attended?
  10. What were the technical details? (Was there Wi-Fi? Were videos made available?)
  11. In which month did the conference take place?
  12. Was the theme a popular one?
  13. Which country hosted the conference?
  14. In what kind of venue did it take place?
  15. How high was the percentage of male/female speakers?

First, a few things regarding the statistics. I will compare both the average and the median, because the discrepancies are at times pronounced. The median lists all values of the data set and picks the middle value. It’s therefore not influenced by extreme values, and gives better information about the real data distribution. The average value is the sum of the sample data divided through the number of values. It’s influenced by extreme values and therefore gives only information about the data distribution in theory. The difference will become clear by directly comparing the figures.

Conference Size

Anyone who is interested in organizing a conference or just attending one will notice that conferences are run in two very different styles. This has a huge impact on scale (number of speakers, choice of tracks, length of conference).

Some conferences, such as TYPO3 Conference 2013163, with its 65 speakers and multiple tracks, aim for large audiences and maximum information propagation. Others, such as the Smashing Conference4, have only around 18 speakers and a single track and set out to create a community experience. Two styles, two different goals.

The data shows a clear tendency towards smaller conferences, most likely for the simple reason that organizing a big conference is much more costly and restrictive in some ways than a smaller one.

  • Median number of speakers per conference: 19
    This median indicates that more than half of the conferences analyzed were fairly compact community events.
  • Average number of conference speakers: 31
    This shows by how much the average is skewed by the few very large events when compared with the median.
  • Median number of tracks: 1
    This is a fairly logical progression from the median number of speakers. Small conferences tend to stick with single tracks.
  • Average number of tracks: 1.9
    This average implies that two tracks are the norm. While the difference between one and two tracks seems negligible, it is anything but. A single-track event demands fewer compromises than multi-track events from both attendees and organizers. Attendees don’t have to worry about overlapping topics, speakers and interests, while organizers can set up the event days exactly as they want. On the other hand, multi-track events give attendees much more flexibility and a wider range of networking opportunities.
  • Median number of conference days (workshop days included): 3
  • Average number of conference days (workshop days included): 2.7
    Conferences rarely last longer than four days. The lower average reflects the lower number of conferences that are longer than the median.

There is a clear tendency towards smaller conferences. Back To School

This indirectly brings us to the topic of workshops. Most events offer a certain number of workshops, usually around the conference days. Only 9% of conferences do not feature any workshops. Combining standard talks and workshops makes a great deal of sense for both organizers and attendees (and their employers!). The combination reduces yearly travel time to training events for attendees, and it spares employers’ pursestrings from the added travel expenses of repeated training excursions.

Conferences that do feature workshops around the event average five full-day workshops; the median, however, drops down to three full-day workshops. This number is not completely arbitrary. Organizers should plan according to the number of attendees expected, keeping in mind that not all of them will attend the workshops. It comes down to the desirability of the workshops, which is a difficult variable to accurately evaluate. The theme, speaker and geography come into play, in ways that are not always easy to discern.

Finally, not to be forgotten are two-hour half-day workshops and “lightning talks.” These are fairly popular, especially at big conferences. Some small conferences also prefer to feature a lot of half-day workshops, instead of highly visible full-day ones. Altogether, 13% of conferences feature short workshops, either next to the full-day ones or exclusively.

The Cost Of Learning

Evaluating conference and workshop prices is quite tricky because the spectrum is quite wide and is determined by different variables, including sponsorship deals and regional standards. A detailed analysis of the motivations behind setting a certain price for an event is beyond the scope of this article. Keep in mind that the numbers below are merely an approximation because I couldn’t find data for all of the conferences that I reviewed. Additionally, several conferences have a one-price-fits-all approach, including workshops in the conference price.

The average and median costs of workshops are very close, at $311 for the former and $307 for the latter (US dollars). This make perfect sense because the costs of workshops vary only according to the duration of the events. A few outliers are worth mentioning because of the regional considerations. Meta Refresh 20145 in India, for example, offers four half-day workshops at the relatively low price of $49 for both days. Reasons to be Creative6 in the UK comes to $501 to $669 per workshop, which is fairly standard for the UK.

Conferences are less predictable. The average and median are quite close, with the former at around $420 and the latter around $349. This, however, is a skewed representation of conference costs. For one, early-bird prices differ significantly from latecomer rates. Also, included in both figures are all conferences prices, without differentiating between one- and multi-day conferences.


Conferences mostly seem to cost between 300 and 400 USD.

Comparing the prices of conferences and workshops to those of other events in the same country might be more telling. This would give a good indication of whether the prices are reasonable.
We The People

Despite our figures here being very spotty, the average (840) and the median (500) number of attendees differ greatly. I would attribute this discrepancy to missing data. However, despite the spotty data, I suspect that the actual average is very close to the median that I calculated, simply because the majority of conferences reviewed here are small single-track events.

The Technical Side

There is insufficient data to make any definitive conclusions about the technical aspects of conferences. Still, several features seem to recur at almost every conference.

On the websites of the 84 conferences in this study, 14 specifically mention that they offer Wi-Fi access to attendees, and 32 promise to release videos of the talks and workshops on their website or on their YouTube or Vimeo channel.

Interestingly, despite many events offering Wi-Fi access, reliability is usually so difficult — or expensive — to guarantee that some conferences (such as Blend7) state up front that Wi-Fi access is not provided, even going so far as to prohibit devices entirely. The rationale is that the presence of devices and the cost of Wi-Fi detracts from the quality and enjoyment of the talks; some hand out pen and notebooks instead. This approach does have some merit because it frees organizers to focus on curating their themes and speaker.

The Ephemera

Finally, let’s quickly look at some figures that are relevant but difficult to evaluate: conference themes, supporting events, location and gender. These factors are mostly determined according to either convenience or the subjective perspective of the organizers.

Themes

Themes are plentiful in this industry, ranging from UX design and development tools to marketing and commerce. This chart8 shows some of the most common themes, but keep in mind that these fluctuate as our industry rapidly evolves.

Events That Round Out the Conference Experience

These are a staple. For more than 50% of conferences, this means parties. And this is the one area where organizers can get as crazy and imaginative as their budget allows. You’ll find everything from mundane and marginally productive networking parties with drinks to enthusiastically creative affairs (such as Build9’s). Some employers, the ones footing the bill, might find this to be over the top. A more psychological study might examine the value of associating pleasurable social experiences with work, but that is beyond the scope of this article.

After-parties are where — to paraphrase Pat Allen10 — organizers often make mistakes. From experience with organizing them, I know how important it is for the background music not to interfere with the conversations. Organizers should know that venues tend to get this wrong; many venues can’t seem to believe that large congregations of people don’t automatically want to “get down and boogie.” At the first Smashing Conference’s after-party, I found myself running to the DJ every half hour to ask him to turn down the volume, which would mysteriously and gradually return to the same deafening level. I insisted repeatedly that just because some of the attendees were swaying to the music while talking did not mean they were eager for a rave, but neither the venue’s manager nor the DJ seemed to grasp this.

While a few conferences focus mostly on the basic content, most offer additional experiences, most likely reflecting the idealism of their organizers. For many conference enthusiasts — including organizers — a key function of conferences is to unite the web design and development community. This is often reflected in the wording of promotional materials (“Let’s get together in the company of a few friends11”).

Some discussion lately has focused on reevaluating these traditional events, such as after-parties, which some argue betray some insensitivity. For instance, alcohol is, to put it mildly, not everyone’s cup of tea. As Sara Soueidan explains12 in an interview for CSSconf EU, that is a reason why some attendees or speakers do not attend certain events. JSConf US 201413 provides bikes for people who want to explore the area, and it even offers a “Significant Other Track” for the families of attendees. There are definitely alternatives to the traditional approaches that generate a different ambience.

Locations

Below are some figures related to location.

  • 52% of conferences are in Europe, 38% in the Americas, 6% in Asia, 3% in Australia and New Zealand. None are in Africa!
  • 34% are set in the US, more than half in the east (see map).
  • 18% take place in the UK.
  • 14% are set in Germany.
  • Just one is set in Southern Asia (India), and one (not on the list) in Southeast Asia (Philippines).
  • The five biggest conference cities on the list also host the most conferences for their region.
  • Among the five biggest cities are the three cities that host the most conferences (New York, London and Berlin).
  • The fourth most-frequented city, however, is also one of the smallest on the list. With only 156,000 inhabitants, Brighton is only more populous than Faenza, Columbia and Osijek.

The US and EU are the two hottest spots for web conferences.
The size of the city doesn’t seem to be the deciding factor for choice of location, but it is relevant. Gender

I’ll devote a short space to the statistics for the most debated topic of this study, gender. While a gender count among attendees has proven to be impractical, I was able to count — by hand! (never has a more repetitive endeavor been undertaken since Sisyphus’ boulder roll) — the number of male and female speakers at almost all conferences. I found that 22% of speakers were female. Or, to put in in hard numbers, the median number of speakers at the conferences was 19. Of those, 5 were women.

This subject has been heavily discussed in our community recently, with some of the biggest tech firms disclosing their gender-related statistics. According to John Mindiola in an article from 201014, 82.6% of web designers are male. However, while this is the current reality, the issue has reached popular awareness, leading some organizers to actively try to incorporate an equal number of male and female speakers. Such efforts are not only attributable to small conferences either, which can pick their speakers much more carefully; colossal events such as WebTech Conference 201315 and TYPO3 Conference 2013163 are trying to even out the playing field, too (see study PDF).

Gender disparity in the web industry is not a myth. That being said, the percentage of women in content-generating areas is higher than that of men. And while the area of web development boasts a frighteningly antiquated male-dominated environment17, many hope that conferences — being the public face of the industry — will lead by example.

Conclusion

To sum up (pardon the pun), the majority of conferences are small, with around 20 speakers. Most are single-track events, except for those that are 10-plus-track affairs. Many offer workshops to round out the experience. The events usually cost around $500 and offer a slew of fun activities to complement the learning experience, following the proud tradition of “work hard, play hard.”

The full range of the web industry’s work is covered, although the latest advances are getting the most attention, such as the mobile web. Most conferences take place in the EU, but the US hosts the most events of any single country. Finally, the web industry still needs to work on the male-female disparity, which is reflected in the ratio of female-to-male speakers at conferences.

(ml, al)

Front page image credits: Marc Thiele18.

Footnotes
  1. 1 http://www.smashingmagazine.com/2014/08/15/plan-and-run-a-great-conference/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/conferences.pdf
  3. 3 http://t3con13de.typo3.org/
  4. 4 http://smashingconf.com/
  5. 5 https://metarefresh.in/2014/
  6. 6 http://reasons.to/
  7. 7 http://www.blendconf.com
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/10/conferences.pdf
  9. 9 http://2013.buildconf.com/
  10. 10 http://freelancing-gods.com/tags/conference
  11. 11 http://2013.buildconf.com/
  12. 12 http://2014.cssconf.eu/news/meet-the-cssconf-speakers-sara-soueidan
  13. 13 http://2014.jsconf.us/schedule.html
  14. 14 http://www.smashingmagazine.com/2010/11/12/gender-disparities-in-the-design-field/
  15. 15 http://webtechcon.de/2013/
  16. 16 http://t3con13de.typo3.org/
  17. 17 http://archive.aneventapart.com/alasurvey2011/01.html
  18. 18 https://www.flickr.com/photos/marcthiele/14444487112/in/set-72157644792424680

The post Taking A Closer Look At Tech Conferences: The Nitty Gritty Details (A Study) appeared first on Smashing Magazine.

Wayfinding For The Mobile Web

Mon, 10/13/2014 - 13:05

When designing mobile first, navigation takes a back seat to content, and ruthless editing paves the way for more focused experiences. The pursuit of simplicity, combined with the tight spatial constraints of mobile viewports, often leads us to strip away elements in an attempt to minimize the interface. But the space-saving convenience we gain through clever editing and a compact UI can come at the expense of the very navigational aids our users rely on.

To help balance the craving for visual simplicity with the need to keep websites easy to navigate, we can borrow some concepts from the world of wayfinding. This article shows how you can apply these concepts to the mobile web.

The Importance Of Wayfinding

As the name implies, wayfinding is how we make sense of our surroundings and navigate the space around us. We continually rely on cues in our environment to orient ourselves and figure out where we’ve been and where to go next. If you’ve ever flown, recall the experience of stepping off the plane in an unfamiliar airport. It may have gone something like this:

  1. You pause at the gate and glance around to quickly survey your surroundings.
  2. You observe which direction most people seem to be walking in and start heading in that direction.
  3. As you begin walking, your attention darts from one sign to another, scanning for any symbol or text that resembles “baggage claim” or “ground transport” and ignoring anything that doesn’t match either of those.
  4. Once you feel like you’re headed in the right direction, your attention relaxes and you begin to pay attention to any shops or restaurants that you might want to return to the next time you’re at the airport.

The way that people orient themselves in digital spaces is not so different from how they find their way around in the real world. Our ability to focus shifts according to whether we’re on the hunt for information or recreationally browsing. We even experience the same emotion and sense of frustration when we’re lost or struggling to reach our intended destination.

Following are three wayfinding concepts that can be incorporated into mobile and responsive designs to help your visitors navigate with more ease.

  1. Circulation systems
    The infrastructure that allows people to move around within a space
  2. Spatial cues
    The observable qualities of a space that help people make sense of their surroundings
  3. Signage
    Instructional signs, symbols and iconography to guide people
Circulation Systems

When moving through a town, the streets and sidewalks are the pathways we use to get from one point to another. Within a building, we might rely on stairways and corridors to make our way around. A variety of routes often coexist, giving people multiple options for reaching their destination. The network of available pathways forms the circulation system of a space. On the web, circulation systems are shaped by navigational structures. The most familiar one is the hierarchical tree menu, a model synonymous with widescreen desktop design.

Hierarchical Tree

This type of top-down categorical tree is the de facto convention for information-rich websites. Users can access top-level (parent) navigation and local (sibling) content. This is advantageous in that it provides many different routes for users to explore.

1
The hierarchical tree model usually manifests in a horizontal navigation bar, often with a single or multilevel dropdown menu. (View large version2)

This model has the tendency to become link-heavy, making it well suited to large screens but potentially cumbersome when packed into the confines of a small screen. Rather than trying to squish expansive menus onto itty-bitty mobile screens, designers have been exploring the concept of unfolding experiences, a term designer and researcher Rachel Hinman3 uses to describe systems that progressively reveal information to users. As you plan a circulation system for your website, consider how you might be able to incorporate the following “unfolding” patterns:

Nested Doll

Nested doll navigation is a linear menu pattern that is conventional in mobile web apps. Users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map. Funnelling users from broad overview pages to detail pages helps them hone in on what they’re looking for and focus on content within an individual section. This approach is well suited to small screens, but comes at the expense of easy lateral movement across sections.

4With the nested doll navifation, users incrementally tap or swipe to reveal additional menu options as they traverse up and down through the site map. (View large version5) Hub and Spoke

This model utilizes a central screen that acts as the launchpad for exploration. Links point outward to other sections of the website or independent applications, each siloed from the others. To move from one section to another, you must first jump back to the hub. This home-screen approach eliminates the need for global navigation on each page, making it a popular choice for task-based applications that benefit from focus and minimal distraction.

6The hub and spoke utilizes a central screen that acts as the launchpad for exploration. (View large version7) Bento Box

The bento box model is a dashboard-style application that pulls in dynamic components and information. Most interactions occur in the context of a single multi-purpose screen that unfolds to reveal layers of additional information. This is a popular choice for websites on which users interact with data aggregated from a variety sources.

8The bento box model pulls in dynamic components and information. (View large version9) Filtered View

Unlike dashboards, which provide a control center for interacting with a variety of data, filtered view systems deal with a single data set. Information may be explored from multiple perspectives, with a variety of views and sorting options controlled by the user.

10Filtered views are seen in music apps, directories and other interfaces in which people navigate large volumes of data. (View large version11) Combining Systems

Even with nice styling and transitions, the bulkiness of traditional navigation systems can feel kludgy on small touch-enabled screens — especially when compared to the elegant, immersive interactions associated with native applications. Trying to shoehorn an information-rich website into an app-like navigation system might be too constraining, yet adopting a fully hierarchical model might be overkill. Fortunately, the models need not be mutually exclusive.

One of our recent projects involved working with a healthcare organization to centralize their content and online tools under a single website. We initially started down the path of building a hierarchical site map that included a section for all of the members-only content. We also toyed with the idea of introducing an additional menu on the website: the public navigation as well as navigation that appears for logged-in members.

This felt more complex than it needed to be and would have been tricky to organize on small screens. Recognizing that current members have very little need for marketing-heavy public content, we ended up dropping all public menus from the members section. And because members were coming to the website primarily to access a few key applications, they benefited from moving away from a hierarchical content structure and toward a hub-and-spoke model with a home screen that would launch their various online tools.

12Rather than stick with a single information-architecture model and nest members-only content within the overall content hierarchy, we saw that a hub-and-spoke approach to the members center made sense. (View large version13)

This turned out to be a big departure from our original plan to create a global header and footer that spanned the entire website, but it permitted us to design a system that was both lean and simple to navigate. This still left us with the challenge of making the transition between public and members content as seamless as possible. We turned to spatial cues to build continuity across the interface.

Spatial Cues

If circulation systems represent the paths that enable people to get to where they want to go, spatial cues are the recognizable qualities of the space that help them orient themselves and that illuminate available paths. Designers rely on a few powerful spatial cues to help users find their way.

Landmarks

A landmark is any remarkable, unique or memorable object you observe in your surroundings. Some landmarks are visible from a distance and help you figure out where you are based on your position relative to them. For example, Chicago is home to one of the world’s tallest skyscrapers, the Willis Tower. If at any point you become disoriented while exploring the city, you need only scan the skyline and compare your relative position to the tower to get a sense of where you are and which way is which. Other landmarks just line your route, helping you find your way to and back from a particular place. Landmarks help us define and make sense of space. The degree to which we rely on landmarks is evidenced by how we offer directions: “Turn left at the fork in the road,” or “Continue straight three blocks until you reach the Starbucks, and then hang a right.”

In UI design, a landmark is any consistently positioned or notable element that helps visitors orient themselves. Some examples of global elements (i.e. visible throughout a website) are:

  • Logo
    For returning to the home screen easily
  • Primary navigation
    Quick access to primary landing pages, enabling users to pivot and explore other sections.
  • Breadcrumbs
    reinforces current location within the system and acts as a ladder to traverse up the site map
  • Search
    Provides reassurance and an alternate way to seek information when users don’t want to backtrack or continue browsing

Other landmarks might appear only in certain places, helping visitors distinguish where they are within a particular section of the website:

  • Section banners
    Reinforces which section user is in
  • Section navigation
    Access to similarly categorized content
  • Unique templates or components (slideshows, galleries or event calendars)
    Visually identifiable points that users might remember passing and try to return to

This alone is pretty straightforward stuff. It gets interesting when you factor in multiscreen behavior and adaptive design. You see, as website visitors peruse your website, they are constructing a mental map of all the identifiable landmarks they encounter. Data shows that many interactions occur over time and across devices. If the landmarks in your interface appear drastically different from one breakpoint or device to another, then you risk disorienting users. On the other hand, if you intentionally build continuity into the UI, persisting recognizable qualities of those landmarks across all screen sizes, then you’ll foster a more familiar, intuitive experience for returning visitors. You can increase continuity of landmarks in your design by examining how UI elements adapt across breakpoints:

  • Position
    Do they retain their relative page position, or do they jump around?
  • Form
    Do items retain their form or transform into something totally different?
  • Color
    Do foreground and background colors stay the same or switch?
  • Priority
    Do the most prominent page components retain their proportional visual weight across screen sizes, or does the hierarchy change?
  • Visibility
    Are visible things still revealed and hidden objects still concealed?
14
United Pixelworkers’ website has continuity between landmarks across breakpoints. The logo is red in the top left, the navigation is in a black bar along the top, and you can always access the cart from the bright blue button in the top right — no matter which size screen you visit from! (View large version15)

Cleverly adapting the UI to best fit the available screen size or viewport is a worthy goal. Just keep in mind that each adaptation creates a new environment that your users must orient themselves to. While adaptation is a necessity, balance it with an equal focus on continuity.

Edges

Edges demarcate the end of one object or section and the beginning of another. In the world around us, we are surrounded by geographic boundaries, like mountains, shorelines and tree lines, as well as man-made ones designed to compartmentalize our environment, like fences and walls. In UI design, clearly defining the edges of regions and objects can more quickly familiarize users with an interface. Boundaries help to demarcate things on a website, such as chrome from content, primary navigation from secondary navigation, and global tools from page-specific functions. At a micro level, edges help define the boundaries of tap targets and separate individual blocks of content.

16Foursquare’s app (left) packs a lot of tappable items into a small space; clearly defined button boundaries improve scannability and minimize mis-taps. Yummly’s app (right) uses distinct interface edges to define button tap targets and to visually separate the masthead region from the content area and to distinguish between individual recipes. (View large version17)

When designing for wide screens, we can rely on white space and columns to delineate content boundaries. When dealing with narrow viewports, we have less space to compose columns and to utilize white space to effectively differentiate sections of a page. We can reclaim the usable benefits of edges in small-screen scenarios by:

  • providing obvious visual cues to suggest the active tap target area of links and buttons,
  • using shifts in background color or strong borders to distinguish template regions.
18Defining edges by using horizontal dividers or shifts in background color can provide important visual cues to distinguish one region of content from the next (for example, separating main content from related links). (View large version19) Signage

Signs are visual aids that provide instruction to people at decision points within a space. Signs communicate through pictographic or typographic elements. In our interfaces, most non-content elements play the role of signage. Elements such as labels, buttons, pagination, menus and calls to action all act as signs. Because symbols tend to take up less space than written text, they are heavily used in mobile design. Because people process images and text differently, designers need to consider certain factors when deciding how and when to use one or the other. Let’s take a quick look at how to use icons effectively.

Using Icons

Icons can be an effective way to communicate information and highlight navigation options while conserving space within the tight confines of a small screen. Universally recognizable symbols can also overcome language barriers, making an interface more globally accessible.

While icons might appeal to aesthetic sensibilities and provide a great solution for visually organizing your interface, they also have the potential to introduce impediments to usability.

Icons work great when they are familiar and obvious, leaving no room for misinterpretation. But even many of the most commonly used icons have multiple meanings. Consider the following icons, which at first seem innocent. What does each represent?

20Because they often have multiple meanings, even simple icons can be ambiguous. (Image credit: IcoMoon21) (View large version22)
  • Pencil
    Write or edit?
  • Plus
    Add item or expand?
  • Minus
    Remove item or collapse?
  • x
    Close or delete?
  • Magnifying glass
    Zoom or search?
  • Caret
    Play, go or slide right?

As we see, even in simple scenarios, icons can be ambiguous. Meanwhile, the allure of a minimal UI tempts many a designer to use icons to represent far more complex concepts. This again challenges us to weigh the value of saving space against the importance of comprehensibility of the interface. Even if the icons are ultimately decipherable, the act of interpreting them increases the cognitive load on the user. This introduces friction to the decision-making process and could impede navigation.

Text Labels

In contrast to icons, well-written text labels can leave less room for misinterpretation, thus resulting in less cognitive load on the user.

Compare the following two screenshots, both of which pair icons with text. The first example focuses first and foremost on the icons, whereas the second places emphasis on text labels.

23The University of Delaware uses mainly icons (left). Walmart emphasis on text labels. (View large version24)

The abstract nature of the graphics demands a fair amount of interpretation, and the accompanying text is harder to scan, partially because of the grid arrangement and partially because of the type’s size. Keep in mind that, with mobile devices, the text is likely to be viewed at arm’s length and with the person and device possibly in motion. In the second example, labels assume focus. The left alignment of text provides a straight reading line down, making it easier to scan and compare navigation options. Here, icons are used to supplement text. Because we process images quickly, once a user has learned what a symbol means, their future interactions will be expedited through recognition (i.e. associating the image with the link it represents).

The previous example also assumes two things. The first is that the text labels are indeed well written. Unclear text can be just as detrimental to navigation as ambiguous iconography. The second assumption is that the visitor is a first-time user. Once a person has learned the positions and meanings of the icons in the first screenshot, the cognitive load will decrease and the interface will have become familiar and, therefore, easier to use.

This aligns with research conducted by User Interface Engineering25, which found that:

  • text and images work better than just text;
  • text alone works better than images alone;
  • icons are learned, but icon positions are learned faster (so, if your favorite app gets a new icon, you won’t be confused; but if someone jumbled the positions of apps on your phone’s home screen, you’d be driven crazy).
Visibility and Decision-Making

Another conflict between graphics and text arises when you’re determining how to present a list of products. An advantage to displaying images is that they help the user visually differentiate between options. Because product images take up more space than their text counterparts, the number of items visible within the viewport will be reduced. So, which is more important, showing more detail for each option or showing more options in a single view?

When category distinctions are obvious, the addition of visual cues (such as product images) minimally benefits usability. The main objective is to show options and make it easy for the user to scan and compare those options. In these scenarios, titles alone might be the best choice because comparing items is easier to do when you can see all (or most) of your options at once. If visitors must scroll or swipe to see their options, they’ll be forced to rely on memory, comparing what’s currently in view with what was previously in view.

On the other hand, for products that are similar to each other, images would help users to better distinguish between them. In this case, differentiating between items might be more important than comparing items within a single view.

26Using images to display category information takes up more space, resulting in fewer categories fitting in the viewport. Although less visually appealing, a simple text list of categories is easier to scan and select from. When browsing individual products, however, product images and visual detail play an important role in helping users to distinguish items. (View large version27) Paving Your Paths

What’s in and out of view is critical to how people find their way. The answer to “Where can I go from here” is shaped by the routes that the user can easily perceive. The most highly trafficked routes (or the ones you want to drive the most traffic through) should be made most visible. Less-traveled routes can afford to be less overtly marked. Whether a navigation system is the primary or secondary one is an important consideration, and it needs to be prioritized as such in the UI. Does the visual prominence of your navigation map to the navigation’s actual priority?

Route Visibility and Hidden Menus

Many popular mobile navigation conventions involve hiding and showing menus. This technique relies on a menu button (often the infamous hamburger icon) that triggers the appearance of a menu, either by toggling open a panel or pushing in navigation from off canvas. Debate persists about whether the hamburger icon is universally recognized as a symbol to represent a menu. It’s potential ambiguity aside, the debate overlooks a larger concern: Even if people recognize it as a cue to summon a menu, the menu options are initially hidden, and so those routes are obscured.

Users following the scent of information will scan the screen for trigger words: text that maps to the words or phrases in their mind that describe what they’re looking for. On wide screens, when navigation is exposed, those trigger words are visible and increase the likelihood that users will spot them and click through. Assuming that your primary navigation menu has concise, mutually exclusive and familiar labels, by storing them out of view, you are concealing those powerful trigger words and in effect obscuring the primary navigation routes.

28Responsive and mobile navigation patterns that conceal and reveal menu items keep content as the focus of the UI. Just be aware of what trigger words you’re also hiding. (View large version29)

Compare this to the “skip to nav” pattern, in which a menu icon scrolls the user down to a menu anchored at the bottom of the page. In this model, the button still affords quick access to the menu via a tap or click, but those trigger words still exist within the visible canvas. Users who scroll or swipe past the main content will discover in plain view the menu options laden with trigger words.

When evaluating which elements to make visible and which to tuck away, consider the following questions:

  • How are your users seeking information?
    If a large number of your visitors are “known-item seekers,” meaning they arrive with a clear idea of what they are looking for, then they will more likely want to search; so, making the search field visible would be an excellent prompt. If most users will have only a general idea of what they want, then they might be more apt to browse and, therefore, would benefit from exposed trigger words.
  • What are your users looking to do, and how else could they get there?
    Compare what’s visible on screen to key content that your target audience is looking for or tasks they intend to complete. Do the content and links you make visible provide an easy enough path for users to accomplish what they came for? Or must they rely on navigation. If the navigation is a supplemental tool, serving as shortcuts to get around the website, then it might benefit from being tucked handily away. On the other hand, if a menu is the primary (or exclusive) means of navigating the website, then it might need greater visibility (or be visible by default).
  • What is your hidden content competing with?
    On a page with minimal content, clicking on an icon to reveal a list of hidden menu options is a no-brainer. But as more content and links are added to the screen, the menu icon has more to compete with. Compound this with the fact that visible links are filled with information scent (i.e. some graphical or textual cue that suggests what content exists behind the link). Meanwhile, an abstract symbol has relatively poor information scent, hinting only that “more options” can be found behind it.
Conclusion

Despite the incredible difference between the physical and digital worlds, the similarity in how we orient ourselves and decide where to go in both spaces is uncanny. The same cues that architects and urban planners rely on to help us process our location, know where to focus and choose our way could be applied in our day-to-day work on the web. Keep in mind that every person who browses an application is making their way through a space — often an unfamiliar one. As the user embarks on their journey, what types of wayfinding assistance are you providing to guide them?

(da, al, ml)

Footnotes
  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-hierarchical-tree-opt.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-hierarchical-tree-opt.png
  3. 3 http://rachelhinman.com/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-nested-doll-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-nested-doll-opt.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-hub-spoke-opt.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-hub-spoke-opt.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-bento-box-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-bento-box-opt.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-filtered-view-opt.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-filtered-view-opt.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-mixed-ia-models-opt.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-mixed-ia-models-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/08-landmark-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/09/08-landmark-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/09/07-edges-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/09/07-edges-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/09/09-edges-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/09/09-edges-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-icons-opt.png
  21. 21 http://icomoon.io
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-icons-opt.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-text-labels-opt.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-text-labels-opt.png
  25. 25 http://www.uie.com/brainsparks/2009/06/28/old-news-about-icons/
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-lists-opt.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-lists-opt.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/09/13-hidden-menus-opt.jpg
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/09/13-hidden-menus-opt.jpg

The post Wayfinding For The Mobile Web appeared first on Smashing Magazine.

Freebie: Icons Of Autumn (50 Icons, EPS)

Fri, 10/10/2014 - 14:02

There are icons that you can find quite easily, and icons that are difficult to come across. With Icons of Autumn, we are humbled to release a set of 50 free autumn-themed EPS icons illustrated in a lovely sketchy style.

Designed by Nick Botner as line art in Adobe Illustrator, the icons are available in EPS, enabling you to change both the color or the weight of the strokes with ease. However, if you want to make the icons into solid shapes, it shouldn’t take much effort either.

The autumn season has a lot to offer! (View large version31)

This icon set is licensed under a Creative Commons Attribution 3.0 Unported2. You can use the icons in your commercial as well as your personal projects, including software, online services, templates and themes. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is prohibited.

You can change both the color or the weight of any of the icons. One of a kind: the leaf of a maple tree. A preview of some of the icons included in the “Icons Of Autumn” icon set. (View large version31) Download The Icon Set For Free! Insights From The Designer:

“Normally, I shy away from designing seasonal things, but I have a special place in my heart for Autumn. Actually, that’s because I used to live in Florida and always welcomed the “cold”. However, now that I live in the PNW, I guess you could say this might be the last time I love Autumn.

And as far as the set goes, it’s a continuation of icons that I have been slowly creating in this smooth sketch style. Previously I designed a nautical set, a weather set, and a scientific set. Now with Autumn added to the family, I need to think about what comes next.”

Thank you to the creative minds behind @nickbotner6 — we sincerely appreciate your time and efforts! Keep up the brilliant work!

(vf, il)

Footnotes
  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/10/icons-of-autumn-large-preview.png
  2. 2 http://creativecommons.org/licenses/by/3.0/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/10/icons-of-autumn-large-preview.png
  4. 4 http://provide.smashingmagazine.com/smashing-freebie-icons-of-autumn.zip
  5. 5 http://alphateck.com/blog/
  6. 6 https://twitter.com/nickbotner

The post Freebie: Icons Of Autumn (50 Icons, EPS) appeared first on Smashing Magazine.

“Stop Being So Hard On Yourself”: An Interview With Designer And Entrepreneur Cat Noone

Fri, 10/10/2014 - 11:40

More and more designers and developers in our industry are making the leap into becoming entrepreneurs by starting their very own products. One of these aspiring designers is Cat Noone, co-founder of Liberio.

Cat is a young and talented designer and entrepreneur from Brooklyn, New York, now living and working in Berlin. She worked in the field of special education before jumping into a career that she really loves and makes her happy.

Since switching tracks, Cat has worked as a product designer at Prolific Interactive and as design lead at ADP Innovation Labs, and she has freelanced and advised startups. She is the co-creator of Designer Relationships131 and The Gentle Hound2 and works now on her own start-up Liberio3, an eBook creation and self-publishing platform for everyone.

In this interview, Cat shares insights about her personal life and Berlin, talks about her latest project (the startup Liberio) and gives advice to young designers and developers in the industry.

Q: First, tell us a little about yourself, Cat. Where did you grow up, and how did you start designing?

Cat: I grew up in Brooklyn, New York, in a time when kids still played outside and knew that the street lights turning on meant it was time to come inside. It was great and taught me a lot of the common street sense I have today — I’m grateful for it.

I was surrounded by art throughout my entire childhood. My grandfather and aunt were fantastic with doodles, sketches and more. I remember my aunt pulling out this beautiful piece of Belle from Beauty and the Beast that she did in college — I loved it and that kind of sparked the urge to do the same. I still see the details of that piece in my head, and it inspired me to sketch and draw the characters I loved so much, too.

My family knew the love I had, and still have, for art. They fully supported my passion by swarming me with coloring and sketch books, canvas and paints, pastels and more. I always had pencils, crayons, markers and paint nearby, and I also had this awesome art desk where I kept everything. Paintings, sketches and self-made characters filled my books and donned the refrigerator like they were masterpieces, courtesy of my family — I was always so proud of them.

As I got older, the sketchbook was often the only thing I brought to school. I drew my school notes in there, and the information was retained much easier when the notes were doodled, versus writing them so plainly.

Even though I never intended to be a designer when I was younger (I wanted to be a veterinarian), I guess I should have known I would become one. I was always quite particular about the way things should look, work and be constructed. When I was a kid, I had a clear idea in my head of what made sense and what didn’t. However, despite the love I had for design, I was scared to make the jump into designing full-time when the opportunity first came around.

Brooklyn, New York, the city that Cat grew up in.

I wasn’t sure whether or not I would be able to make a living off of it, and I think I would have failed if I had jumped into it at that time. In hindsight, I certainly wasn’t ready. Instead, I thought that a college degree in something else like psychology or education would be safe, so I went into college as a biology major and minored in psychology. I ended up in the special education field before I decided that you just have to be willing to jump sometimes — and I did.

Q: You live in Berlin now. How did you end up there, and what has made you stay?

Cat: Always a story I enjoy telling! I actually ended up here because of my significant other, Benedikt. We met in the United States, but he lived in Berlin. We knew that, eventually, it would come down to “What now? Who moves where?” [laughs]

I had been in the Valley for a bit and needed something different. I needed a break and knew the change of scenery would work out for me. We discussed it at length, each fully willing to support whatever decision we came up with, and finally came to a conclusion: I would come to Berlin, we’d stay out here for a while, travel around Europe, and after some time we would eventually head back to the States together.

From the moment I stepped foot in Berlin, I knew I made the right decision. For being such a major city, it’s so relaxing and beautiful. There are these little pockets within the center of the city that are so suburban-like. On top of that, the difference in culture, language and more is a nice opportunity to learn so much. I love it.

The so-called “Fernsehturm” is one of the most prominent buildings in Berlin, and is visible throughout the central and some suburban districts of the city.

Q: Having spent a while in Berlin, do you think Berlin (and Germany) is an encouraging place for people in our industry?

Cat: I think it’s great for a variety of reasons. It’s not “busy” out here, for one. The city surrounding the scene is much more calming, making it feel less chaotic in an industry that is always on the go. Compared to the other cities I’ve been in, it’s still a baby startup scene. But that’s part of the reason I’m happy to be out here now rather than later. It’s growing and needs to be molded. Building a company that is part of that feels awesome.

When it comes to the Valley, there are a lot of qualities people in the industry are not happy about. I also see and hear of more designers and developers choosing Berlin over San Francisco, which is interesting. So, I think Berlin could learn from what people dislike about other places and can mature and shape itself into what it should and needs to be in order to thrive. It has a lot of potential; some awesome startups are sprouting lately, and I’m excited to see where it goes. I recommend everyone experience a startup scene at the stage Berlin is at now.

Berlin’s calming scene makes it feel less chaotic in an industry that is always on the go.

Q: Coming to a new city, what do you think is the best strategy to build a creative network and to find people to build something?

Cat: Reach out to people, for sure. You have to break out of your comfort zone and just contact people. One thing I enjoy doing is connecting with people who are in my area on Twitter. It’s nice to see what others are working on and what you can learn from them. Much like the Valley, something is always happening, and someone is always willing to link up for a coffee or lunch. Take advantage of that!

It may feel weird at first, reaching out to someone you don’t know, but it’s well worth it.

Q: You also met cofounder Nicolas Zimmer in Berlin. How did you come up with the idea for Liberio?

Cat: Nicolas actually came up with the core idea for Liberio. He grew up in a family that at one point ran a publishing house. So, he experienced firsthand the transition from traditional to digital and the struggle that self-publishers face.

For me, I had personally tried creating an eBook at one point and knew what it was like to design and create a high-quality one. It was not fun. And I could imagine how many others out there are not as tech-savvy but want to share their thoughts, stories and more with the world.

Once Nicolas and I met and sat down to discuss Liberio further, we solidified it, built on the idea and created what you see today.

4Cat uses the iOS Paper app to sketch. (View large version5)

Q: What makes Liberio better than other solutions?

Cat: Until Liberio, there was no product that enabled the average individual to create and publish an eBook in the simplest, easiest and most beautiful way possible. Before, you had to use multiple and often difficult tools to do so. The publishing market is mostly in the hands of publishing houses, or else the products are made for professionals, which totally eliminates the chance for self-publishers to go far without major help. Realistically, that needed to change. Self-publishing is no longer a niche trend, and we wanted to create something that enables everyone to share their ideas, stories and knowledge.

The one thing we emphasize is that we want to do for eBooks what the App Store did for software: which is to allow individuals to create and publish their ideas and knowledge. Ultimately, we want to be the one-stop shop for it all. Liberio is for everyone. On our platform, we currently have students, teachers, doctors, authors, engineers, designers, chefs, bloggers and more. And that’s really exciting to see.

Q: What were the basic features and main goals you started with, and how did your product evolve?

Cat: Writing and reading are very emotional experiences, and one of the things we wanted from the beginning was to tap into that as much as possible through the branding and voice. That’s the main reason why we went with the illustrative design and friendly voice that we have. From there, we could bring our story, characters, objects and more to life — similar to what you’re familiar with from books.

Our goal from the beginning was to make the design as easy as possible to understand, so that people could easily create and publish an eBook. We started in private beta to ensure that our platform was solid and easy to pick up on, allowing you to simply create and publish right from Google Drive. We knew doing that in private beta would allow people on the platform to talk to us and validate or correct the assumptions we were making and the direction in which we were taking Liberio.

6Early version of Liberio. (View large version7) 8The final version of the front page. (View large version9) 10The final back-end version. (View large version11)

The process helped us to gain a better understanding of our next steps. We’ve learned a lot about what is needed in the self-publishing world versus what is simply wanted. I think our biggest insight was understanding the different ways we need to showcase and promote authors as much as possible; and now, post-launch, we’re working on ways to do so.

Q: There has been a lot of discussion lately about the future of self-publishing. Do you think publishers will become redundant, and will Liberio play a part in that development?

Cat: Definitely. People are realizing they don’t need publishing houses to succeed anymore. Before, having a company like Penguin on your book cover meant dollar signs. However, in the digital world we live in now, with social networks, self-publishers no longer need a publishing house to push their digital content out there, and consumers certainly don’t need the vanity logo to assure them that this is something they’ll want to read. Consumer reading lists are now drawn solely from suggestions based on previous reads and from others in your circle.

Nicolas and I laugh because a lot of people don’t realize that the (infamous) 50 Shades of Gray series started out as a self-published book. Only once it blew up did a publishing house want it because they were guaranteed to make so much money off of it. Before that, they didn’t want to touch it. That’s the problem self-publishers face. But the great thing is, they no longer need the publishing house.

Q: What are your future plans, dreams and hopes for Liberio?

Cat: Ultimately, I want Liberio to be the one-stop-shop not only for authors, but for any individual who wants to easily create and publish content that can then be consumed by everyone. I want to provide them with tools on our platform that enable them to create the most interactive and engaging content and to profit from it emotionally and financially.

There are so many stories left untold, and I’d love to continue doing everything possible to ensure they are written, distributed without a hassle and seen by everyone.

Q: What are the biggest challenges or fears you’ve faced as an entrepreneur, and how did you tackle them?

Cat: So, what come to mind instantly are speed and efficiency. Right now, it’s just Nicolas and I building Liberio, and while it really is great on the one hand, it also has its cons. The number of people on the platform is quickly increasing week by week, and although I won’t and never will complain about that, it means that a lot more hands are needed on deck.

Nicolas is handling all things development and business and some support. I’m focusing on all things design and brand management, business and marketing and some support also. With more people on board, this would obviously alleviate pressure on both of us and free us up to focus on other areas, pushing the product forward in a much faster, more efficient and more strategic way.

Q: You’re life must be very busy right now. What inspires you, and how do you get out of designer’s block?

Cat: I’m definitely influenced by the innovative products around me. They definitely get me excited about what’s to come, and they keep pushing me to work harder and think differently.

I do my best to ensure designer’s block doesn’t happen, because it ends up being kryptonite for me, and my brain becomes toast for a long period of time. It’s happened once already, and I just couldn’t stare at another pixel — it was bad.

When I just can’t get into a groove, though, or I’m not satisfied with how something is going, I make it a point to step away from the Internet and the computer for inspiration. I love traveling, seeing the area around me, reading or looking at magazines and more. I make sure I get lost and mentally detached from the tech world as much as I can.

At the end of the day, I make it a point not to look at my phone or computer as much as possible. It takes a long time for my brain to wind down as it is, so feeding it continually into the night is just counter-productive. To do so, I enjoy cozying up in the living room with Benedikt and our puppy, Dex, watching our shows or going for a nice long walk together.

After a long day at work, Cat mostly likes to relax in her living room.

Q: Besides turning Liberio into a successful product, what are your personal and business goals for this year?

Cat: Oh wow. This is a pretty deep question. I think this year I have more personal goals than I do business-wise, mainly because I know one hand will wash the other — I know, that’s such an old grandma saying.

My biggest battle is and probably always has been myself. I expect a lot from myself. This isn’t necessarily a bad thing, but the problem is that I beat myself up a lot at the same time, and it honestly makes me unproductive. It’s funny because I tell everyone, “Stop being so hard on yourself” — but when it comes to myself, I really don’t take my own advice often.

Although I’m satisfied with a lot of what I do and with the progress I’ve made, there is always the other side talking to me saying, “It isn’t good” or “You’re not going to make it,” and it feels rather low. So, that’s something I want to work on. I want to turn the “It isn’t good” voice into “Can this be improved? If so, how? Look at it from a different angle.”

12A quote from Designer Relationships131 — one of Cat’s side projects.

Personally, I also want to enjoy life more. I spent a lot of time prior to this year focusing on things that I thought would get me closer to “success,” instead of realizing that success is what you make of it. Being successful isn’t about how big your business becomes, but about how happy you are, about the beautiful relationship I create with my significant other. Now, don’t get me wrong: I want to make a big difference in the community, and I want Liberio to be successful, but getting there is so much more likely if the cofounder has a level head to do so.

In business, I want to learn a lot from every aspect of my work right now. I want to educate myself in areas that I am subpar in (development, business, finances, etc.), to ensure I always keep up and continue to hone my skills. I want to build up my network and profile and to connect with a lot of people who I can learn from as best as possible, so that I can apply it to everything I work on.

Q: And last but not least, what advice can you give to young designers and developers who want to start a successful side project or startup?

Cat: Yes, I have a few points that I consider very important to becoming “successful.”

  • Know what you excel and suck at.
    It’s important to know where you flourish and where you fail and to be willing to accept that so that you can accept help. Most people have such big egos that they refuse to admit and ask. It’s a career-killer.
  • Connect.
    Get to know people in the field who you can watch and learn from, speak to and get advice from when you ask. Reach out to them! The worst that’s going to happen is they say no.
  • Use the tools you have.
    Use your tools to make something fast, meaningful and beautiful all at the same time. Use what you know, and then go from there. Adapt once you have the basics down. There’s always going to be something new sprouting up.
  • Love what you do.
    Nothing is worse than going through life doing something that isn’t truly satisfying. It will make life hell for you, your employees and, in the end, the company. It’s not worth it. Find what you love, do it, and the world will benefit. You might be scared, but you have to do what makes you happy — you only have one shot at this.
  • Enjoy the ride.
    When it comes to startups, months are like years. The life cycle is really quick. 90% of companies fail, but in the failure is a compilation of mistakes that blossom into lessons learned. In the end, you take those lessons and learn from them. You apply them to your next venture and hope you’ve learned enough not to make the mistakes again. You’re in the air flying for what seems like a lifetime, and it could be exhausting or exhilarating. So, flap your wings as hard as possible while you’re up there, because there’s no telling when it’ll be time to come back down again.

Thank you for sharing with us these inspiring insights into your work, Cat! Please feel free to follow Cat Noone on Twitter14 and check out her website15.

(al, il)

Footnotes
  1. 1 http://designerrelationships.tumblr.com/
  2. 2 http://www.gentlehound.co
  3. 3 http://liber.io
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/10/liberio-business-card-sketch-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/10/liberio-business-card-sketch-opt.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/early-sketches-1-opt.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/09/early-sketches-1-opt.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/liberio-finished-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/09/liberio-finished-opt.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/liberio-share-popover-opt.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/liberio-finished-2-opt.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/designer-relationships-opt.png
  13. 13 http://designerrelationships.tumblr.com/
  14. 14 https://twitter.com/imcatnoone
  15. 15 http://heyimcat.com

The post “Stop Being So Hard On Yourself”: An Interview With Designer And Entrepreneur Cat Noone appeared first on Smashing Magazine.

A Front-End Developer’s Ode To Specifications

Thu, 10/09/2014 - 13:18

In the physical world, no one builds anything without detailed blueprints, because people’s lives are on the line. In the digital world, the stakes just aren’t as high.

It’s called “software” for a reason: because when it hits you in the face, it doesn’t hurt as much. No one is going to die if your website goes live with the header’s left margin 4 pixels out of alignment with the image below it.

But, while the users’ lives might not be on the line, design blueprints (also called design specifications, or specs) could mean the difference between a correctly implemented design that improves the user experience and satisfies customers and a confusing and inconsistent design that corrupts the user experience and displeases customers.

For those of us who create digital products, design specs could mean the difference between efficient collaboration and a wasteful back-and-forth process with costly implementation mistakes and delivery delays. It could also mean the difference between your business making money and losing money, in which case lives might actually be on the line.

In short, specs can help us to build the right product more quickly and more efficiently.

What Are Blueprints (And Why Are They Blue)?

Why are blueprints blue? To find the answer, let’s go back in time a bit, courtesy of Wikipedia1:

“A blueprint is a reproduction of a technical drawing, documenting an architecture or an engineering design, using a contact print process on light-sensitive sheets. Introduced in the 19th century, the process allowed rapid and accurate reproduction of documents used in construction and industry. The blue-print process was characterized by light colored lines on a blue background, a negative of the original.”

Architectural blueprints were the photocopier of the 19th century. They were the cheapest, most reliable technology available to copy technical drawings.

2Architectural drawing, Canada, 1936 (Image: Wikipedia3) (View large version4)

Blueprints were created by sending light around an ink drawing on transparent film. The light would shine through everywhere except the ink and hit a paper coated with a light-sensitive material, turning that paper blue. This outlined a white copy of the engineering drawing on a dark-blue background.

These copies were then distributed to builders who were responsible for implementing the designs in those drawings.

Today, many graphic designers also distribute design specs to the front-end developers who are responsible for implementing the designs. Design specs are no longer made with paper and light, and they are no longer blue, but, as before, they ensure that the product gets built correctly.

From Bricks To Bits And Bytes

I learned the value of architectural blueprints in my previous career as a real estate developer. One of my responsibilities was to find great architects to create blueprints so that the construction workers we hired knew exactly what to build. Somewhere along the way, I realized that real estate development was not for me: I wanted to make a greater impact by building the scalable skylines of the virtual, rather than the real, world. I learned HTML, CSS and JavaScript and went in search of startups that were hiring. My understanding of the importance of detailed blueprints went with me.

In the wild west of World Wide Web startups, I had to build single-page JavaScript applications that looked good and performed well, and I had to do it quickly. Designs were often handed down to us one week before the product’s release date, and we were asked to start sprinting. The designs usually consisted of Photoshop files (PSDs) with a lot of layers and zero specs to accompany them.

For a former real estate developer, working with graphic designs without specs was like getting a set of architectural blueprints with all of the drawings and none of the numbers. Without the necessary CSS “measurements,” I was forced to hunt through layers and sublayers of shapes and text elements to figure out the right HEX value for the border around the “Buy” button or the font family used in the “Forgot Password?” field. Such a workflow was very unproductive.

I was starving for specs when my friend Chen Blume5 approached me with the idea of Specctr156, a tool that would bring the familiar benefits of architectural blueprints to the world of graphic design and front-end web development. I immediately recognized the value and potential of this idea, so we started working together right away, and soon after that, the first version of Specctr was released.

Properties of objects (specs) created with the Specctr plugin (Source: “Blueprints for the Web: Specctr Adobe Fireworks Plugin447”)

Initially, the Specctr plugin was for Adobe Fireworks users8 only, which at the time — 2012 — seemed to be the best tool for UI and web designers. Later, we expanded the range of supported apps, and today it includes Fireworks, Illustrator, Photoshop and InDesign.

A Picture (And Some Numbers) Are Worth More Than A Thousand Words

They say that a picture is worth a thousand words9. Well, a picture and some RGB values could be worth much more!

“One look is worth a thousand words” appears in a 1913 newspaper advertisement for the Piqua Auto Supply House of Piqua, Ohio (Image: Wikipedia10).

The phrase “A picture is worth a thousand words” means that a complex idea can be conveyed with just a single still image. It also characterizes well one of the main goals of visualization, which is to make it possible to absorb large amounts of data quickly. However, in the design and development business, a picture or a single PSD is not enough.

Developers need to know a design’s exact attributes to be able to write the HTML and CSS necessary to recreate the text and shape elements via code. If a PSD is not accompanied by detailed specs, then making approximate guesses or hunting through layers could lead either to errors or the loss of precious development time.

Developer Focus

When developing something, I might need several minutes to load the necessary mental models in my head before I can be productive. Any interruption could bring a wrecking ball to the intricate imaginary machinery I’ve struggled to assemble inside my head.

This is why having to look up an RGB value or turn to a teammate to ask which typeface is being used could lead to big gaps in my productivity.

And if you’re a member of a distributed or remote team, then you don’t even have the luxury of immediately getting your questions answered by a colleague — you’re off to an asynchronous communication tool like Skype, Hipchat or, worse, email. As Chris Parnin puts it11:

“The costs of interruptions have been studied in office environments. An interrupted task is estimated to take twice as long and contain twice as many errors as uninterrupted tasks. Workers have to work in a fragmented state as 57% of tasks are interrupted. For programmers, there is less evidence of the effects and prevalence of interruptions. Typically, the number that gets tossed around for getting back into the ‘zone’ is at least 15 minutes after an interruption. Interviews with programmers produce a similar number.”

This is why you shouldn’t interrupt a programmer. Seriously. (Check the full comic strip12 by Jason Heeris!) A Carnival Of Errors: Developer Edition

Julia had been at her computer for eight straight hours and was late for dinner with her parents, but she had promised to have this CSS transition between the “product” overlay and “buy” overlay on the master branch by the end of the day. She was almost done, but the type on this “Submit” button didn’t look the same as the one that was live on the website now.

“It’s fine,” she thought. “I’ll change it tomorrow.”

Faced with short deadlines and the prospect of rummaging through Photoshop layers, some developers would take a stab in the dark with what type to use — thus, negating the hours of design research they’ve invested with one stress-fueled decision.

The font looks the same. Well, almost.

In the end, we’ll have to redo it anyway, but for now we’ll meet the deadline. It’s all about developer convenience.

No one in the history of forever put in extra effort to do the wrong thing. Mistakes are usually the result of following a tempting shortcut.

The record industry’s failed attempt to halt the digital distribution of music is a good example of this. Spotify’s whole business model13 is based on the fact that “people were willing to do the right thing but only if it was just as rewarding, and much less hassle, than doing the wrong thing.”

Give your front-end engineer a fully spec’ed design and then bask in the rays of gratitude emanating from their face. They’ll get all of your margins and padding exactly right; that subtle gradient will have the precise values you took so long to match; and it will all get done faster. Why would they do anything else? All of the information they need is right there in front of them!

The Triumph Of Tediousness: Designer Edition

Lauren took a second to appreciate her finished design. It was well-balanced and conveyed a sense of calmness, all while guiding attention towards the “Submit” button.

She was tired and ready to go home after a long day of work, but she had promised to deliver the finished design so that Julia could get a head start on developing it for tomorrow’s deadline. She sometimes created specs for the developers she worked with, but she just didn’t have it in her to type and draw out each individual annotation “by hand.”

“Julia will figure it out,” she thought to herself as she hit “Send.”

It’s all about designer convenience.

If design specs (i.e. blueprints) have so much to offer, then why aren’t they a part of every designer’s workflow? The reason I, as a developer, might skip looking up the type is the same reason many designers don’t create specs: It’s easier not to.

This is because designers are not using the right tools. They manually measure and draw each dimension, and they type each pixel value and RGB value “by hand,” using the same general-purpose drawing tools that they used to create the design.

Any time you ask an artist to stop creating and focus on process, you’re fighting an uphill battle. The hill becomes dramatically steeper when the process is slow and tedious.

With the right tools to automate the creation of specs, designers can reduce costs and enable their whole team to reap the benefits of creating and distributing design specs.

Let’s Create (And Use) Design Specs

The two examples above — with Julia and Lauren — are imaginary, but that doesn’t mean they don’t happen constantly in real life. Developers should not have to make any guesses that lead to errors and lose time. On the other hand, creating detailed specs manually is tedious and takes a lot of the designer’s time.

Is there a better way? I believe there is.

We should start using tools that help us to create design specs with a minimum of hassle. Such tools would save time for both designers and developers and would lead to better designer-developer workflows.

Below are some excerpts from a design document annotated with Specctr. With the help of the Specctr plugin, a designer could quickly provide the color values of any design element, along with the exact width and height, gradient values, type attributes (including font family, weight, kerning, leading, etc.), margins, padding, border properties and more. This would greatly help the developer to implement the design because they would not need to hunt through layers and sublayers or make any guesses.

14Text and spacing specs generated with Specctr156 (View large version16) 17hape and text specs generated with Specctr (View large version18) 19Coordinate and spacing specs generated with Specctr (View large version20)

As a bonus side effect, using detailed design specs will help you to avoid errors and inconsistencies in the final version of the design when it’s implemented in real life. Below is an example of the “drift” that can occur when implementation details are not made explicit and are left up to the developer’s guesswork.

21A comparison of how a design can deviate from a designer’s vision without proper documentation: spec’ed design on the left, unspec’ed design on the right. (View large version22)

Note: Specctr is not the only tool that automatically generates detailed design specs. Plugins such as PNG Express23 (designed to work with Photoshop) do similar tasks, but I’ve been mentioning Specctr because I developеd it myself and have the most experience with it. If you have tried other spec-generation tools, please, share your experience in the comments below.

Components And Style Guides

Developers have long been familiar with the advantages of breaking a large system down into small components through object-oriented programming24, which is currently the dominant programming paradigm, thanks to the adoption of languages such as Java25. Breaking a complex project into self-contained parts that make up the whole allows a single part to be reused in multiple places in a project and allows for greater project organization and easier maintenance.

Designers are also finding26 that breaking down a design into its atomic components allows for greater efficiency because they’re able to combine them to reuse their code and styles27. Seeing the components from which a project’s entire design is derived allows for the immediate communication of style choices made across that project. Examples of the components that would be shown are the grid, buttons, forms, tables and lists.

28Grid component from Mozilla’s “Style Guide”29. (View large version30 31List component from Mozilla’s “Style Guide”. (View large version32

Components combined with design specs make up a style guide33. A style guide serves as a reference both to communicate a project’s design aesthetic and to provide details of its implementation to developers. Developers no longer have to rely on designers to spec individual documents, and can instead use this reference to find the information they need. In this way, a style guide is another great tool for more efficient collaboration between designers and developers.

34A style guide will help you to maintain a consistent look over time. (Source: “How to Make an Effective Style Guide With Adobe Fireworks4335”). (View large version36 Conclusion

I reached out to a few designers for comments about the process they follow to document designs. One of my favorite responses comes from Jason Csizmadi, senior visual designer at Cooper37:

“Developers at all stages of projects expect and demand strong documentation.

Although documentation is never the most exciting aspect of design, it’s a critical step in ensuring smooth working relationships, timely delivery and a successful hand-off at the end. Ultimately, design documentation acts as a life-support system, ensuring that your vision is executed properly.”

Like any good business process, design specs should support the primary endeavor — in this case, to create beautiful websites and applications. Creating these products requires collaboration between designers and developers, and effective collaboration requires effective communication. Investing in the development of workflows and tooling around to make this communication easier and more efficient will pay off big with the speed and effectiveness with which products are built and, ultimately, with the success of the businesses that depend on those products.

Further Reading

I’d like to thank Michel Bozgounov46, who helped me research this article and made a few useful suggestions to improve it.

(mb, al, il)

Footnotes
  1. 1 http://en.wikipedia.org/wiki/Blueprint
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/1-joy-oil-gas-station-blueprints-large.jpg
  3. 3 http://en.wikipedia.org/wiki/File:Joy_Oil_gas_station_blueprints.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/10/1-joy-oil-gas-station-blueprints-large.jpg
  5. 5 http://www.smashingmagazine.com/author/chen-blume/
  6. 6 http://specctr.com
  7. 7 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  8. 8 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  9. 9 http://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words
  10. 10 http://en.wikipedia.org/wiki/File:1913_Piqua_Ohio_Advertisement_-_One_Look_Is_Worth_a_Thousand_Words.jpg
  11. 11 http://blog.ninlabs.com/2013/01/programmer-interrupted/
  12. 12 http://heeris.id.au/2013/this-is-why-you-shouldnt-interrupt-a-programmer/
  13. 13 http://www.theguardian.com/technology/2013/nov/10/daniel-ek-spotify-streaming-music
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/10/6-specctr-top-left-spec-large.png
  15. 15 http://specctr.com
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/6-specctr-top-left-spec-large.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/10/7-specctr-mid-left-spec-large.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/7-specctr-mid-left-spec-large.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/8-specctr-mid-bottom-spec-large.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/8-specctr-mid-bottom-spec-large.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/9-how-a-design-can-deviate-without-documentation-example-large.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/10/9-how-a-design-can-deviate-without-documentation-example-large.png
  23. 23 http://www.pngexpress.com/
  24. 24 http://en.wikipedia.org/wiki/Object-oriented_programming
  25. 25 http://en.wikipedia.org/wiki/Java_%28programming_language%29
  26. 26 http://bem.info/method/
  27. 27 http://pea.rs/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-mozilla-grid-comp-large.png
  29. 29 https://www.mozilla.org/en-US/styleguide/
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-mozilla-grid-comp-large.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-mozilla-list-comp-large.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-mozilla-list-comp-large.png
  33. 33 http://medium.com/@bradhaynes/designing-products-that-scale-c8f3001f709b
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-style-guide-fireworks-large.png
  35. 35 http://www.smashingmagazine.com/2014/02/17/effective-style-guides-with-adobe-fireworks/
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/10/12-style-guide-fireworks-large.png
  37. 37 http://www.cooper.com/
  38. 38 http://pivotallabs.com/best-practices-for-designerdeveloper-collaboration/
  39. 39 http://programmers.stackexchange.com/questions/141624/how-to-improve-designer-and-developer-work-flow
  40. 40 http://en.wikipedia.org/wiki/Blueprint
  41. 41 http://blog.ninlabs.com/2013/01/programmer-interrupted/
  42. 42 http://zurb.com/university/lessons/31
  43. 43 http://www.smashingmagazine.com/2014/02/17/effective-style-guides-with-adobe-fireworks/
  44. 44 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  45. 45 http://www.smashingmagazine.com/2013/11/15/specctr-an-adobe-illustrator-plugin-freebie/
  46. 46 http://www.smashingmagazine.com/author/michel-bozgounov/

The post A Front-End Developer’s Ode To Specifications appeared first on Smashing Magazine.

Mobile Design Pattern: Inventory-Based Discrete Slider

Wed, 10/08/2014 - 12:57

Sliders are cool. When they’re done well, customers love to interact with them. When they’re not done well, they can cause a lot of frustration (not to mention lost sales) by standing between your customers and what they want. And getting them wrong is surprisingly easy.

In this article, we will present a solution, including the design and code, for a new type of Android slider to address common problems, along with a downloadable Android mini-app for you to try out. It’s a deep dive into sliders based on a chapter in Android Design Patterns. The experimental inventory-based slider we will look at would be at home in any application that asks for a price, a size, or any other faceted input within a widely distributed range.

Why Sliders?

Sliders are intuitive. They provide affordance, a quality that makes a control right for a particular task. They just feel right for dialing a value within a range. Sliders translate well from the physical world to touchscreens, where they look great and are easy to manipulate, without taking up a lot of space. Dual sliders in particular are great for limiting search filters and form values to a set range.

In the physical world, sliders serve a function similar to twist knobs. However, knobs are hard to “turn” on touchscreens, and they usually take up more space than sliders. For touchscreens, sliders are better.

Types Of Sliders

Sliders come in two types: single and double. Single sliders are best for entering one value. Dual sliders are great for searching within a range of values.

There are also two kinds of adjustments: continuous and discrete. Continuous adjustments are for indeterminate values in a range, such as a price or temperature. Discrete adjustments are for predefined values (such as clothing sizes). Both single sliders and dual sliders can take either kind of adjustment. Let’s look at some examples.

Zillow has customers use two single sliders with continuous adjustment to set a price range.

1
The Zillow app uses two single sliders, both with continuous adjustment. (View large version2)

This real-estate app Trulia uses two dual sliders with continuous adjustments:

3
The Trulia app uses two dual sliders with continuous adjustments. (View large version4)

Continuous adjustments for prices make sense. Why? Because price ranges are continuous. But they do allow for more precision than most shoppers care about. (A price difference of one cent is unlikely to make a customer reconsider a purchase.)

Discrete adjustments are different. They let you choose values, but only within predefined (i.e. discrete) increments. Facets like shoe size consist of discrete values; in the US and Western Europe, shoes are typically incremented in half-sizes: 6, 6.5, 7 and so on. You can’t buy shoes in a size of 6.25, so providing a control for this level of precision would not make sense.

One way to understand the difference is that single sliders with a low count of discrete values are similar to stepper controls: You can dial the value you want, but only from a predefined set.

5
This is an example of a dual slider with discrete adjustment stops. (View large version6) Experimental Slider Patterns

Sliders with histograms and sliders based on inventory counts are two great experimental patterns that are variations on the standard slider. It’s unfortunate that they are not more common because they solve many of the problems that sliders can cause for users. We explain the problems with regular sliders in the “Caution” section below and detail the experimental solution in the “Super-Sliders” section (right after “Caution”).

So, at this point, you might be thinking, “Sliders sound great. What’s the downside?” Glad you asked.

Caution

Even the best patterns can go bad. Like Harvey Dent, the once loyal ally of Batman and Gotham City’s impeccably ethical district attorney, most things have a dark side. There’s a slippery slope between delight and dismay, and much like the Two-Face character who Dent becomes, sliders can be helpful or hateful. It all depends on how they’re implemented.

Here’s how to sidestep slider problems and keep your customers happy.

Make Sure Reasonable Values Can Be Entered Easily

Kayak has a continuous dual slider for filtering hotel prices (see screenshots below). To get a hotel in Los Angeles that you can afford on a humble mobile UX design consultant’s salary, you must place the pegs right on top of one another. This adjustment is anything but precise. For wide ranges, consider using a slider based on inventory counts, as explained in the “Super-Sliders” section coming up.

7
The continuous price slider fails to dial a reasonable hotel price in Los Angeles on Kayak’s app. (View large version8) Show the Range

Speaking of range, showing the actual range of prices available in an entire collection is a great idea, as shown in the Kayak screenshots above ($38 to $587), instead of using arbitrary numbers such as $0 and max. Neither Zillow nor Trulia show the true maximum and minimum associated with their local home inventory.

Imagine how useful these sliders would be if they stated from the beginning that they ranged between $476,000 and $3,234,700. Showing the range also helps to avoid dead zones, such as when you’re looking for a home in San Francisco priced below $476,000, which would yield zero results. Be aware of how filtering affects the inventory; setting the range for the overall collection without applying the filters is best.

Don’t Cover the Numbers

As the customer adjusts the slider, the values should appear above the pegs, where the user’s fingers would not cover them. Placing the numbers below or to the side of the slider is not as useful. Kayak’s slider (shown above) is good in this regard: The range is covered while the customer adjusts the slider, but the filter’s actual value is not, which is about the best you can do on a mobile device.

Opt for a Slider With Discrete Positions

Continuous sliders are sexy in principle, because you can dial an exact number and get just the inventory you want. But the reality is that sliders are hard to adjust precisely — both in the physical world and on touch devices. That’s why you almost never see a slider for volume adjustment on a stereo. Ironically, the larger the device, the harder that adjusting the slider precisely seems to be. This is Fitts’ law in action: The time required for an action depends on the distance and size of the target. In other words, adjusting a tiny peg in the middle of a large tablet is difficult.

Regardless of the screen’s size, adjusting a continuous slider precisely while being bumped around on a train is hard. (You have permission to refer to this hereafter as Nudelman’s law if you wish.)

Continuous dual sliders also make it easy to over-constrain the range. For example, creating a continuous slider that enables the customer to dial a price of $45.50 to $46.10 might yield zero results and would not serve the customer well. On the other hand, sliders with discrete positions (i.e. stops) are much easier to adjust. The chance of dialing a range that is too small is also less.

Super-Sliders Save The Day

How can you implement a dual slider so that the user is able to input a price range without running into the dreaded problem of zero results mentioned in the “Caution” section above? Here’s where the experimental patterns discussed earlier come in. These are like regular sliders slightly souped up — super-sliders, if you will. Let us explain.

Regular Slider

A slider could use discrete values arranged according to inventory counts. This type of slider is typically arranged in a linear pattern, which means that a certain distance of movement on the slider’s axis represents an equal absolute change in value. For example, in a five-position slider, the price would go from $0 to $100 in $20 increments:

9
Each mark on the axis represents an equal absolute change in value on a linear price slider. (View large version10)

Although this is intuitive, the design makes it easy for customers to come up empty-handed, especially if the range is wide and the inventory is not equally distributed.

As explained in the “Caution” section, a customer shopping for superhero capes might select a range for which the inventory is zero — say, $40 to $60 — not knowing that a whole closetful of capes are available in the $62 to $65 range — literally, For a Few Dollars More. (Apologies to Clint Eastwood and Westerns lovers everywhere.)

Super-Slider (With Zero-Results-Fighting Histogram)

This is where a slider with a histogram (as shown below) is helpful. The idea behind this experimental pattern is simple: The 50 to 100 pixels above the fixed-position slider is a histogram that represents the inventory in a particular section of the linear price range. A high bar represents a large numbers of items, and a proportionally short bar represents a smaller number of items. That’s it.

11
A linear price slider with histogram provides more information. (View large version12)

When using a slider with a histogram, you can still dial the part of the range with low inventory; but making that mistake accidentally is difficult because the inventory counts are clearly shown in the histogram. You can use a slider with a histogram where a standard discrete-position slider would be used; it would take up only a little more vertical space in exchange for a more satisfying customer experience.

No Room for a Histogram?

Another way to implement a slider without using histograms is to arrange the slider’s intervals based on the inventory counts. To do this, divide your entire inventory — say, 100 capes — into five intervals, and you’ll get 20 capes per interval. Now, scan the price range to figure out the price (rounded to the nearest dollar) that corresponds to the approximate inventory count of 20. Suppose the first 19 capes cost between $0 and $60 (remember that we’re assuming no inventory in the $40 to $60 range), the second 21 capes fall in the $61 to $65 range, and so on. Here is what such a slider might look like:

13
The alternative price slider is based on the inventory counts. (View large version14)

Which implementation should you choose? It depends on the task. Most people don’t mind paying a few dollars outside of their budget, but they absolutely hate getting zero results. An inventory of fewer than 20 items in a given interval is not a satisfying result for most tasks, so use one of the other approaches to provide a better experience. Both a slider with a histogram and a slider based on inventory counts are far superior to the traditional slider. Breaking down the interval according to price is the more flexible approach because it shows the distribution clearly, while never yielding zero results. If the customer’s price range is larger than that of a single 20-item interval, then they can simply select a larger interval using the dual slider.

Both of the experimental sliders out-performed the regular slider in a study we did for a large retailer. Try it yourself. Create a quick prototype and do some “hallway usability.” Ask users to find some items around $70, and compare how they do with the histogram version, the inventory-based version and the regular version.

Tablet Apps

Sliders perform well in tablet apps. Make sure you heed the warnings in the “Caution” section; in particular, opt for a slider with discrete values to ensure accuracy, instead of a continuous slider (adjusting a continuous slider accurately on a large device is harder). Consider device ergonomics and avoid placing sliders in the middle of the screen. Instead, place sliders near the top of the screen, next to the right or left margin, optimized for one-handed operation with the thumb while the fingers hold on to the back of the tablet.

Depending on the design and purpose of your app, experiment by having two sets of sliders on the left and right sides of the screen, to be adjusted by the left and right hands, respectively. This would be especially interesting in apps such as music synthesizers. Finally, experiment with placing sliders vertically along the edge of the tablet (top to bottom), rather than horizontally from left to right, which is the easiest direction to adjust precisely with the thumb, while the fingers hold the back of the tablet.

Try It Out

To see how a slider app feels, a completed slider mini-app is available for you to download and try out. If you’re a developer, you can use it in your own project free of charge (see the “Code” section coming up). To install it, consider using an app installer such as the one made by FunTrigger15, which you can get free on the Play market. Here’s how it works. Connect your Android device to your computer. You should see the Android file-transfer window open automatically. If not, you might need to install software on your computer such as Android File Transfer (Mac users, take note). Download the APK source file 16, and place it in the “App Installer” directory (you might have to create the directory).

17
Place the APK file in Android’s file-transfer window. (View large version18)

Now, you will be able to launch the app installer on your device. Navigate to the right directory, and tap the icon for the APK file that you want to install.


Use the app launcher to install the app.

After a few customary Android disclaimers, the app will be installed in the normal app area on your device, and you can launch it from there.

Code

We’re providing you with the Java code19 and a demo of a simple dual slider with discrete stops.

This demo has five intervals between the minimum and maximum values, which we’ve arbitrarily set to $47 and $302. It’s arranged in a linear pattern, which means that a certain distance of movement on the slider’s axis represents an equal absolute change in value, making the increment value $51. In a real app, the values would most likely be derived from a database.

private static final int RANGE_MIN_VALUE = 47; private static final int RANGE_MAX_VALUE = 302; private static final int[] RANGE_STEPS = new int[] { 47, 98, 149, 200, 251, 302 };

While five is a good number in principle, you might want to experiment with intervals of seven or nine, depending on the size of the screen.

We recommend that you use the MOD function to determine how many capes need to be in each interval. Then, walk the interval to determine the price breakdown within each range. Finally, if MOD yields a remainder, you can add it to the last interval, or you could get fancier and loop through it to add one or more “excess” capes to each of the intervals. For example, if you have 103 capes, the intervals would be 21, 21, 21, 20, 20. This would more evenly distribute the inventory.

You could use the app as is for your own projects or as a starting point for something fancier. May we suggest a slider with a histogram or an inventory count?

If you do use the code, we’d love to see what you’ve done with it.

This code is provided free of charge and distributed under the GNU General Public License v3. See the README_LICENSE file for details.

Conclusion
  • Say it with us, “Done right, sliders delight.”
    Sliders turn your customers into empowered explorers and instant item locators. Don’t let a good pattern go bad: Remember these rules, and sidestep slider problems.
  • Make sure that reasonable values can be entered easily, and don’t cover the numbers.
    Say no to fat-fingered fumbling with small increments in large ranges. Speaking of ranges…
  • Show the range.
    Stamp out unhelpful labels like “$0” and “No limit.” Instead, show the actual minimum and maximum values that the customer can search within.
  • Be discrete.
    Continuous range sliders aren’t always the best choice. Discrete stops are better for small sets of predefined values, such as shoe sizes (and cape sizes.) And finally…
  • Zap zero results.
    Fight the frustrating fruitless search. Want to give your customers ninja navigational powers? Add a histogram, or use smart intervals based on your inventory.

That’s all there is to it. Working with sliders is no great mystery. You know the patterns. You’ve nabbed the code. Now there’s nothing to stop you from trying a slider.

Want more patterns? Android Design Patterns: Interaction Design Solutions for Developers21 has over 70, including a free design mini-course.

(al, ml)

Footnotes
  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-zillo-app-slider-opt.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-zillo-app-slider-opt.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-trulia-app-slider-opt.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-trulia-app-slider-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-dual-slider-opt.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-dual-slider-opt.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-kayak-app-slider-opt.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-kayak-app-slider-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-linear-price-slider-opt.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-linear-price-slider-opt.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-linear-histogram-slider-opt.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-linear-histogram-slider-opt.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/07-alternative-price-slider-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/07-alternative-price-slider-opt.png
  15. 15 https://play.google.com/store/apps/details?id=com.funtrigger.appinstaller
  16. 16 http://provide.smashingmagazine.com/slider-demo-app.zip
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/09/08-apk-file-opt.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/09/08-apk-file-opt.png
  19. 19 http://provide.smashingmagazine.com/slider-demo-app.zip
  20. 20 http://provide.smashingmagazine.com/slider-demo-app.zip
  21. 21 http://www.androiddesignbook.com/

The post Mobile Design Pattern: Inventory-Based Discrete Slider appeared first on Smashing Magazine.

Pages

X
Secure Login

This login is SSL protected