Spark

Categories

Archives

Archive for the ‘Creative’ Category

User Experience Debt: Why, What, and How? (Part 2)

shutterstock_307219181_350Part 1 of this post shared some ways that I’ve seen user experience debt burgeon from projects. This includes all manner of usability flaws and poor experiences. Here, Part 2 offers a strategic framework for addressing those problems. It’s divided into the following 3 sections as “Why”, “What” and “How.”

  1. Purpose. Why do we want to improve our designs?
  2. Assessment. What needs to be done to improve them?
  3. Design Principles. How will we do it?


1. Purpose 

Strategy must begin with genuine purpose. As the business philosopher Jim Rohn said, your success in life will be measured by your impact on other people. What is the purpose of your design? How will improving your user experience help the world in some small way? Read the rest of this post »

The Year in Review | Top 10 Spark Posts of 2015

Top 10 Spark Posts of 2015

 

Without any further ado, let’s count down the top 10 posts from 2015:

 

Ten | Why You Should Really Put Down Your Cell Phone at Lunch (Really)

Cell phones are inserting themselves into our lives, perhaps in places that they just don’t belong.

 

Nine | Part 2 – What to do about “the too familiar persona?”

Tips on how to stretch personas by using them into later stages of the design process.

 

Eight | A bright future in digital: Perficient acquires Enlighten

This year, we acquired digital marketing agency, Enlighten which will further accelerate our capacity to help companies with digital transformation.

 

Seven | The dangers of listening to customers too closely

Always listen to customers, but don’t expect them to perfectly express what they want.

 

Six | Gamification: UX strategy increases results and retention

What is gamification? What is the science behind it? How can use integrate it into your UX strategy?

 

Five | 5 ways learning to code can improve your life

Five benefits that you can receive by learning to code.

 

Four | A left hook from your client doesn’t have to derail your meeting

When you are under attack, the first step is to listen.

 

Three | 6 Tips for Staying Fit at Your Desk Job

With busy schedules, it can be hard to keep up with your fitness. Here are six quick tips to help you stay active.

 

Two | Take the Plunge. Get Up to Speed with Front-End Build Tools

How to get started using front-end build tools.

 

One | The too familiar persona

What do you do when traditional personas become too familiar due to overuse?

 

If you want to stay on top of the latest technology trends, be sure to subscribe to our weekly digest using the form below.

I’m Giving Thanks for these 5 Content Resources

5 Content Resources to be thankful for

The weather is getting colder, the days are getting shorter, and it’s once again time to give thanks for all things, large and small, that enhance our lives. As a content strategist and copywriter, I am always thinking about how to make content more useful and engaging. That’s why I’m thankful for the following 5 sites that provide guidance, tips, and tools as well as thought leadership I find myself referencing again and again.

  1. UX Magazine explores every facet of user experience. Articles about the psychological impact of transactions and human interaction live comfortably next to technical documentation tips and a review of social engagement flaws. You may not read every article, but if you’re working in UX you’re sure to find something interesting and informative here.
  2. Readability Score is a fantastic resource for testing content to ensure you’re providing a level of reading clarity, ease of comprehension, and depth that aligns with your readers. Different audiences have different readability needs. This site helps you quickly assess content by both difficulty and grade level according to the Flesch-Kincaid scale and other measurements.
  3. Grammar Girl Mignon Fogarty, the founder and managing director of “Quick and Dirty Tips,” is my go-to source for plain language clarification when I have a question on word use or grammar. She clearly believes that learning should be fun and provides her tips and education in short, easy-to-follow posts chock full of humorous anecdotes, real examples, and clever memory tips.
  4. The Moz Blog is a collection of optimization focused blogs and tools to help writers ensure their content is findable, an important consideration for any type of content that lives in the digital universe. Practical tools, like the Title Tag Preview tool, help authors and content managers improve the effectiveness of on- and off-page content.
  5. A List Apart is one of my frequently referenced bookmarks because of the depth and breadth of information on design for a multi-device world. Looking to understand the most important considerations for Responsive Web Design? Check out the latest blog from Ethan Marcotte. Want to get inspired for your next Content Workshop? Make sure you read Karen McGrane’s post on “Rolling Out Responsive.”

If you like this list, check out my coworker Olivia Saldano’s favorite design resources.

What websites and resources are you most thankful for in your work? Please share them in the comments below; I’m always interested in finding new favorites and useful resources.

Happy Thanksgiving!

Posted in Content, Creative, design, News

User Experience Debt: Why, What and How? (Part 1)

shutterstock_289434728_350As a user experience designer, I used to think that the worst designed websites were the best candidates for improvement. Symptoms of user experience debt may sound familiar to you – confusing navigation, excess clicks, accessibility violations, and painful load times. I applied to jobs thinking the larger the UX debt, the greater the opportunity. Perversely, however, the opposite is true.

Why? Because a good site already has the resources – money, labor, and knowledge capital – to improve. A bad site doesn’t.

We may be seduced to believe otherwise when so many elements of web design are free. Responsive frameworks like Bootstrap? Free. jQuery libraries? Free. Stock photography? Free. So it should cost little to transform a bad website into a fully responsive, whizzy experience.

Unfortunately UX debt can’t always be paid with free templates, or extra people or refactored code. This is because UX debt represents more than a lack of resources. It represents the existence of exacerbating conditions. Some examples:

Lack of executive support. Rightly or wrongly, organization leaders may prioritize other activities (e.g., developing new functions) over user experience. You can’t improve UX simply by hiring more designers. The decision-makers in your organization are still there!

Hero mentality. Some designers want recognition as creative geniuses, and tackle every project with visual brainstorming. However, standard UX processes today – including research, usability testing, analytics and multivariate testing – are all about user data and iteration. Brainstorming is an activity, not a strategy. Your designers may be actively generating UX debt by focusing on artistry instead of usability.

Overdesign. Often a design doesn’t lack resources. On the contrary, it may suffer from excess people and ideas. A common scenario is a new feature that could potentially work like X or Y. Stakeholders disagree, then compromise by making X and Y a user setting. The final settings menu has 67 items that’s impossible to navigate. Bigger is not always better. Good design has boundaries. You can actually incur UX debt through addition, not subtraction. Read the rest of this post »

Top 3 Reasons Your User Research is Boring

shutterstock_226425211_350Kara Swisher of Re/code gave a keynote address for Interaction 15 in which she described trends in content. One thing she talked about was the way Buzzfeed rapidly generates listicles and memes from shared media experiences. She joked about trying to apply this lighthearted approach to subjects she has covered–“15 Things Bill Gates was thinking while I was interviewing him.”

Well, I’m a user researcher, so Swisher’s talk made me think of user research. If you’ve ever wavered over whether to take a survey in exchange for being entered in a drawing, you won’t be surprised to learn it takes skill to design a study people will actually want to participate in. And if you’ve ever pondered the hit to your budget for recruiting participants from a highly-specialized user group, you might be interested in this study suggesting that playful surveys can intrinsically motivate people to participate (meaning, it’s not payment that’s motivating them, and they are better focused on the task).

Why does so much user research require extrinsic motivation? Because the studies are boring, generic, and the users don’t understand what’s in it for them. Well, how the heck does that happen?

Reason #1: You don’t want to offend anyone.

Right now, I’m working on an application for customer service representatives who take calls from health insurance subscribers and health care providers. We’ve done several rounds of usability testing and interviews, but now I think we may have missed an opportunity to play a design game: “Make Your Own David Letterman Top 10 List.”

  • Top 10 ways you know you’re going to have to escalate this call
  • Top 10 ways you know someone has worked here more than 10 years
  • Top 10 things every new rep should know
  • Top 10 people most likely to eat your lunch out of the break room refrigerator

Humor is tricky, and we don’t want to put people in the position to say something they’ll regret when we are recording them on the job. Nor do we want to subject them to someone’s disrespectful take on their work. I’d have to keep playing with “the Buzzfeed effect” to find an appropriate way to employ it with enterprise users.

Design games are not new, though. Playing a game makes space for participants to reflect, compare options, and imagine what could be. Even busy executives can find value in seeing their Very Serious Project from a playful perspective.

Reason #2: You don’t know what motivates your users.

Another place I could see a Buzzfeed-style approach is with a website survey, à la Woot.com’s community polls or Anne Friedman’s GIF-laden survey of her newsletter subscribers (You’ll want to click that second one–monetization is rarely so delightful.).

Here’s an idea for a potential unmoderated usability survey:

  1. How many times did you curse while using this site?
  2. How many times would your dad have to call you if he used this site?
  3. How close is your face to the screen right now?
  4. How much do you like baby sloths, on a scale of 10-28?

OK, so that’s also a little tricky. We don’t want to use a voice that isn’t consistent with the company’s brand. But even if the brand is conservative, some legwork and creativity can find a way to connect with participants beyond a paid incentive. Whether that’s through humor, or through doing an effective job of communicating the value of the study, it doesn’t happen without some effort and skill. And that can’t be replaced by an Amazon gift card.

Besides, when I see the same few survey pop-ups on every site, I have to think a more customized, engaging approach would have a better chance of being on-brand.

Reason #3: You don’t have the right people.

So, if I told you that our Experience Design group is packed with researchers, designers, and content strategists who regularly knock each other off our custom ergonomic office chairs with memes and one-liners, how likely would you be to have us talk with your customers?

  1. I already hired you, and I’m so glad.
  2. Call me.
  3. I’d better forward this to my manager.
  4. Wait, what’s a GIF?
  5. Lolol

Leo Laporte Falls Off His Exercise Ball (with Audio)

make animated gifs like this at MakeaGif

What Does This Icon Mean?

In his blog What Happens When You Push the Broccoli Button? Brian Flanagan brought up a great point about iconography.  A few hours later after reading it, I misinterpreted the meaning of an icon on a website. I showed the icon to Claire, a co-worker, who guessed something completely different would happen upon clicking the icon than I did, yet we were both wrong. Inspired by this coincidence, I’d like to know what you think the icon means.

Read the rest of this post »

5 ways learning to code can improve your life

 

Image of scripting codeMy first crack at writing computer code came when computers were sofa-sized and the term “web” applied mainly to spiders. At my high school, programming was the alternative elective to woodworking and home economics. It wasn’t popular; throughout my four years there, I could count on my fingers and toes the total number of students who took the course.

Today, my grade-school-age nieces and nephews can field coding questions that eluded me until well past college, and each year the starting age of coders keeps sliding lower.

This is the new normal. Children who barely know how to tie their shoes are acquiring the literacy demanded by our increasingly digital world. Before this decade ends, a whole generation of educated Americans will pass from kindergarten through college without ever touching a pen or pencil, or a piece of paper.

Meanwhile, adults who raise these savvy students still lag in this key area of digital literacy two decades after the Internet dawned. Most are clueless about the code that shapes their world. This cluelessness is bracketed by reluctance and intimidation – at first glance, coding does not look easy, so obviously it isn’t easy, right?

On the contrary. Websites such as Codeacademy, Khan Academy, and W3Schools remove much of the guesswork with step-by-step tutorials and workspaces that show what the code displays as it’s typed. Apps including Hopscotch, Lightbot, and Udacity’s series of Android and iOS training tools cross age groups and knowledge levels and are designed to match the comfort level of each.

These user-friendly tools are making code approachable, even fun – much more fun than slogging through those disturbingly dense manuals that were the primary coding assets in my youth.

With that fun comes something else: an education that extends well beyond the scope of coding’s intent. Learning to code also promotes:

Literacy Software has become a linchpin in our lives. Many daily tasks – from watching TV to making toast to turning on a water faucet – rely on devices that in turn rely on software. While it’s not necessary for each of us to know exactly how coding operates any of these things, an appreciation for the analytical process that went into the software programming opens our minds to the way digital devices “think,” thus raising a broader digital awareness that enables us to make software more responsive.

Problem solving That analytical process derives from computational thinking, an approach to solving large problems by breaking them down into smaller ones. We’re introduced to this kind of thinking early in school to solve basic math problems and expand upon it later to tackle business, engineering, science, music, project management – anything that deals in abstractions. Learning code hones that thinking because it requires a systematic approach essential to problem solving.

Personal growth At first, my interest in learning to code was blunted by fear of failure (Everyone starts out writing bad code; it’s unavoidable). I dreaded the prospect of typing line after line of code only to see the wrong result – or worse, no result. This prompted me to code with care and check my work at each step. Of course, I still failed with predictable regularity, but I was slowly steeling myself against disappointment knowing the amount of care I exercised. Today’s code-training tools mitigate that kind of fear by showing results in real time. They don’t, however, mitigate the failure chronic to solution-based code writing; that comes from the exacting task of writing and rewriting the code until it’s correct.

Community Nobody I know who can code well learned by themselves. Sure, they sifted through manuals and guides at some point in their education. But the lasting lessons and best solutions to problems came through asking questions, working in groups, and studying others’ successes and failures. Despite the stereotypical image of the solitary coder hunched over a dusty keyboard, illuminated only by the screen’s glow, coding is a communal effort shared across a room or across a continent. So, it’s safe to say the best programs are developed with precise amounts of code and liberal amounts of collegiality. As content strategist Anthony Wing Kosner said, “Once you write something as code, others who can read code can evaluate it and see if you indeed have a unique idea that can generate value.”

Change – Digital awareness, critical and computational thinking, unwavering determination, and a willingness to reach out to others – these are qualities that effect change in an office, a business, an industry. The more we know about our digital world, the more likely we can make it more responsive, and more responsible. As with anything else, big changes start with the little details – such as learning how to write computer code.

What happens when you push the broccoli button?

As I was getting ready for work the other day, my 3-year-old son decided he wanted to help me iron my shirt. First he wanted to touch the iron, but clearly that was not an option, so instead he settled on pushing the spray button and soaking my entire shirt in the process. Well that was exciting enough for him, until he noticed another big button on the iron. That’s when he asked, “What happens when you push the broccoli button?”

IMG_4891

No, I do not have a Veg-O-Matic 2000 that shoots out fresh steamed broccoli with the push of a button. It’s simply that from my son’s perspective, the symbol for steam looks a lot like broccoli. Now don’t be fooled, the kid never actually eats broccoli. Actually I’m surprised that he didn’t think it was cotton candy. But regardless, it demonstrates that iconography really is up to the interpretation of the user.

So how do you ensure that the icons you create will be clearly understood by your intended audience? It’s not always an easy process, especially when you’re dealing with abstract concepts, but the key is to closely define the relationship between the signifiers and the concepts they represent. There are two primary types of signifiers, iconic and symbolic. Iconic signifiers are visually representative of an object or a function. For example, a clock represents time or a calculator represents a mathematical function. Symbolic signifiers on the other hand, represent a concept in a more abstract way, such as downward arrow representing a download function.

Typically iconic signifiers perform better on speed of recognition and overall comprehension as users tend to interpret an unknown icon as having the functionality they think it resembles. However for that to be successful, the visual identifiers must be strong enough that the icon is not confused with another object, such as broccoli. In order to design effective iconography, you must understand your audience. Age, gender, culture and language are all key factors that influence comprehension.

For some concepts you may need to utilize a combination of iconic and symbolic signifiers. A good example of this is the “revisions” Revisions icon in WordPress. It consists of a clock, an iconic signifier which represents time and a backwards arrow, a symbolic signifier which represents stepping back in a process. This combination does a good job of communicating an abstract concept and providing clues about the underlying function of the icon.

When creating icons, it’s also important to think about the overall design system. Each icon should be clearly distinguishable from the others, while still working together as a whole. Keep in mind simplicity and recognition and always make sure you validate the concepts with your target audience. They are the ones that will tell you if the icon is successful or not.

Interesting Insights from HOW Design Conference 2015

Chicago

The HOW Design Conference in Chicago this year really had me thinking about how I approach my daily work and even some aspects of my personal life. The talks were overall very informative, and also quite inspiring! Our group had a great time in Chicago. During our free time, we walked around town and took in a few sights and the beautiful architecture.

Here are five design focused ideas that I’m going to try over the next few weeks and beyond:

  1. Focus on Innovation. During the 1950s, 60s and 70s, the focus for designers was to make something look good. In the 80s, 90s and 00s, the focus shifted to the person, and it became all about the customer. Designers started to understand people and do research; it was a different approach. Now we need to put an emphasis on knowledge. We need people who know things; the knowledge we have as designers is more valuable than ever before. We need to keep learning, and sharing our knowledge with each other.
    IMG_6228

    “Innovation is found in the extremes. Defy designing for the average. Averages are useless.” – Dan Formosa

  2. Apply design thinking to solve social issues. What can you do as a designer to help others who are less fortunate or in need? One way is to design something that improves or helps someone else. People in impoverished areas in Brazil can now access TVs because flat screens are becoming less expensive and more accessible. They are able to discover things about the world, which may have never been possible before. They see how others live and work, and its inspiring them to want to do the same as well as learning about other cultures!

    How to save the world with design: “Do a little something here or there that helps improve someone’s life.” – Michael Bierut

  3. Always be making things and follow that instinct to move forward. Connect with people, even just one person, to collaborate with on your ideas. Carve out time for side projects on the weekends and free time to allow your creativity to run wild. Be yourself, be who you are in your personal AND professional life.
    20490_822261334520790_3358364726651017271_n

    “Say yes to the ideas in your head, free fall in to the unknown and create your own parachute.” – Ted Vadakan & Angie Myung

  4. Think huge but work small. Envision the bigger picture, but take smaller steps to achieve it. These smaller steps will be easier to tackle than getting bogged down with all the overarching details. Aim to be 10 times higher, and work to improve your process everyday and you will grow!

    “Exceeding expectations is a minimum requirement.” – Dan Formosa, Ph.D.

  5. Put people first. Cultivate relationships and build confidence in others. Leadership is a journey that requires a friend. If you’re struggling, help someone else. Give attention and care to others.

    “Leadership is like exercise… Do it everyday, the results take time but you will see them. It’s the little things.” – Simon Sinek

I enjoyed hearing all the different talks about design and the some of the keynote speakers were also very compelling! A few of my favorite keynote speakers were Simon Sinek, Dr. Brené Brown, and Michael Bierut. Simon Sinek focuses on harnessing leadership in others. He has a great TED Talk out on the web called How Great Leaders Inspire Action. Dr. Brené Brown aims to help others look internally to find their creative spirit and learn about themselves. She concentrates on humanity, communication and culture. Her TED Talk is called The Power of Vulnerability. Michael Bierut is a partner with Pentagram and has worked on some great design projects. He runs a podcast called The Design Observer.

If you ever get the chance to go to HOW Design Conference for design inspiration and growth, I recommend it! Have you been to any great conferences or training workshops lately?

The Importance of Color and the Mind

Color is an important element of visual language in most user interface designs. People process color before they are consciously aware of it., so the colors you choose to use can be the difference between a user-friendly design and a confusing, unusable design. Careful planning and implementation of color will create not only an aesthetically pleasing website, but a functional one as well. Below are ten color –related benefits you may want to consider when creating your next design.

1.  Speed visual search.  Color-coding will help the user stay focused on a certain area of information. This comes in handy when multiple areas of information are being displayed. Color-coding helps keep the eye focused and the information organized.

Screen Shot 2015-03-20 at 3.39.24 PM

2.  Improve object recognition.  Colors should reflect the physical world. Seeing objects that are colored different than real world expectations causes cognitive confusion. For speedy recognition, use colors that are normally associated with objects, e.g., bananas are yellow.

Screen Shot 2015-03-20 at 3.39.08 PM

3.  Enhance meaning.  Colors can be used for emphasis, to display a most important element or message. The example below shows an emphasis on red that gets our attention and clues us to what the site is all about.

Screen Shot 2015-03-20 at 3.40.04 PM

4.  Convey structure.  In addition to speeding visual search, color can structure a page or presentation. It offers yet another form of organization, allowing the user to quickly identify and recognize information.

Screen Shot 2015-03-20 at 3.40.36 PM

5.  Establish identity.  In today’s world, brand identity is the greatest visual recognition element of any business or organization. Color is ubiquitous and is a source of information; incorporating and utilizing the appropriate color palette in your visual design will reinforce the client’s brand throughout the user experience.

Screen Shot 2015-03-20 at 3.41.18 PM

6.  Symbolism.  Color can also be used to represent cultural and psychological concepts. Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personal preference, and other times due to cultural background. Context plays a large part in color symbolism. One color can have positive or negative connotations depending on the larger framework. Take a look at the “white” website image below. In western cultures, white represents color of purity and peace. In Eastern and Asian cultures, white is the color of death. Understanding the cultural context of your client’s audience can alert you to culturally based color sensitivity. 

Screen Shot 2015-03-20 at 3.42.03 PM

7.  Improve usability.  Colors impact site visitors psychologically, and can affect the user’s experience. In user interfaces, color informs visitors of the most important functions and areas of the screen. Take the user’s need and site functionality into consideration before strategizing your use of color.

8.  Communicate mood.  Color creates mood. Research shows that lighter colors have a more positive effect on users than darker colors. The following link provides examples of colors and the psychology it impacts.  http://usabilitygeek.com/colour-user-experience-psychology/

9.  Show associations.  Color can be used to indicate associations to groupings or other graphical elements. For example, we recognize the U.S. political party colors to be blue for democratic and red for republican. In the same way, colors used in web design can be utilized to help a user identify certain information or functionality.

Screen Shot 2015-03-20 at 3.34.35 PM

10.  Express metaphors.  You have heard of feeling blue or seeing red as metaphors for being sad or angry. Metaphoric inferences can be translated visually in your design.  Utilizing a color like pink, for example, can translate into a young, teen girl experience for a youth clothing store.

Screen Shot 2015-03-20 at 3.24.40 PM

In the end, don’t be afraid to experiment with the use of color to enhance the appearance and functionality of your design. Color has great meaning and will you create an impactful, functional and beneficial user experience.

 Tell us about your color experience and design considerations. Are there specific colors you avoid in your design to improve the user experience?

“5 Quick Ways to Improve Website Usability”-usabilitygeek.com

“10 Reasons to Use Color”-understandinggraphics.com

“Color Theory for Designers” –smashingmagazine.com

Posted in Creative, design