Know Your UX Terms: Common Words and Acronyms in User Experience Design

know-your-ux-terms-common-user-experience-terms-and-acronyms

This is a guest post by Amber Stechyshyn, UX Designer and Content Fellow at Springboard.

When starting out in a new field, one of the first things to adjust to is all the new terminology.  Job applications are full of them, networking event attendees use them casually, and many articles assume that you know exactly what they are. Glossaries and online searches can be useful, but some use dense language and aren’t easily understood.  Knowing these UX terms are essential, so we have compiled a list of some of the most common terms and concepts that you’ll run across, from events to job applications and from books to pitches. We have also linked to some related resources on the subject.

Affordance: How well an object’s purpose can be understood from its design. A common example – how do you know whether you should push or pull a door to get through? The following image shows that the door handle lacks clear affordances, so the store owners had to use a workaround (the sticker of a man) to show people to push instead of pull. 

ux-terms-affordance-pull-push-sign

Example of affordance

Agile: Originally used just for software development, the term has extended into other fields such as UX. Agile is a set of principles that focuses on simplifying processes, constant creation and user feedback on products, close cooperation between different teams and departments, and rapid prototyping. This is in contrast to the Waterfall technique, which divides analysis, design, coding, and testing into separate phases of a software project. Not every team that you come across will be Agile, but someone may ask if you have experience with Agile teams at some point in your job hunt.

A/B Testing: An experiment in which you take two versions of your product, and present them side by side to a group of users, to see which one the users likes more. This type of testing is used once a decent working model of the product- such as a Prototype or MVP– has been made and you have begun User Testing. Also known as Split Testing.

Card Sorting: Using cards or sticky notes to design, reorganize, or evaluate ideas into different categories. It is also commonly used to decide the order of pages or screens for an app or website, creating a physical Sitemap. This technique can be done with a group or one person.  

ux-terms-cardsorting

(courtesy of Rosenfeld Media)

Card sorting could be used to decide whether the user’s profile page should be under the Home menu, or whether it deserves its own menu.

Color Theory: The use of color both for aesthetic and psychological purposes.  Understanding color theory allows us to understand which colors are complementary to one another, how contrast works, and how certain colors elicit a particular emotion in users.

Content Strategy: This is a process that writers and content producers use to increase the likelihood of their content being shared and remaining popular. It involves understanding the audience, which mediums to use, timing, and tone. There is significant focus on why and how you are creating content.

Empathy Maps: A document with several sections, representing different parts of the user’s mind: How do they think/feel? What do they see/hear (or influences)? What are their tasks? What are their overall goals? What are their Pain Points? Empathy maps are used as a quick way to understand a user’s needs and issues.

HCI (Human Computer Interaction): An area of research and education that focuses on the design and use of technologies by humans. While it started as a branch of Computer Science, it also ties in with Human Factors Engineering and Cognitive Sciences.  Although they are different fields, UX practitioners can learn from HCI researchers and vice versa.

IA (Information Architecture): The art of organizing information on a website, database, app, or intranet. This is where sitemaps, menus, navigation, and categorization are created. It allows user experience designers to dictate the flow of users through a site, and make sure the users can find information exactly where they expect it to be in the site.

Interface Designer: While user experience designers focus on the users and the overall feel of the app or site, interface designers get into the specific details of how those interactions will work- designing elements, choosing particular animations for buttons or images, and aligning the visual elements with what the user experience designers have planned out ahead of time.  Quite often, user experience designers and interface designers are combined into one job, depending on the size of the organization.

KWHL Chart: One of the first steps to figuring out how to organize any research you conduct on your users. There are four categories- K: what you know; W: what you don’t know; H: how you’ll figure it out; and L: what you hope to learn.

ux-terms-kwhl-chart

Example of a KWHL chart (courtesy of Springboard)

Lean: In UX, Lean is a process that focuses on constant collaboration with other departments right from the start, creating quick MVPs based on assumptions about the users, and very quick and dirty user research. Lean focuses on getting products out the door as quickly as possible so that UX designers can get feedback from real users ASAP.

Low/High Fidelity: These terms are used to describe either Wireframes or Prototypes. Low-fidelity is simple, focuses on functionality, and are quick to create. High-fidelity versions contain most visual design elements, show off interactions and functionality, and typically communicate more information to the client or other departments. Most projects will either use both or go directly to high-fidelity.

MVP (Minimum Viable Product): Not to be confused with a prototype, this is a version of the product that has the minimum amount of features (or only certain features) so that it can be handed over to test users or stakeholders. This allows for more detailed and elaborate testing of hypotheses without having to build the entire project.

Pain Points: These are issues or complaints that a user has about a problem or an existing product that the UX team needs to solve.

Personas: A human representation of a group of users that share similar needs, pain points, understanding of technology, and behaviours.  There will typically be more than one persona used on a project, allowing both the UX team and other members of the team to picture who their users are and how to help them. They are created by doing numerous user interviews, surveys, and market research into the people who use- or would potentially use- a company’s products.

POEMS (People, Objects, Environment, Messages, Services): Is a research framework developed by Kumar and Whitney.  According to the creators themselves,”The POEMS framework helps researchers tag video observations of user interactions by giving them lists of words in five categories.” If one is observing an elderly woman trying to use an email app using the POEMS framework, one would write under People ‘woman in late 60’s’ and in Objects “email phone app”, “used glasses”, “had trouble with buttons”, while one might write while observing a young black man, “prefers casual language” under Messages, “appeared uncomfortable in the testing room” under Environment, and “really likes the Listen Now feature” under Services.

Prototype: A demo version of an app or product which can be used for testing, presenting to other departments and stakeholders, and bug checking. It does not have full functionality, and may use stand-in images or fake user profiles to show how certain features work.

Responsive Design: Typically used in web design, but can apply to any app that could be viewed or used across multiple devices, it is built-in response to the user’s behavior and environment based on screen size, platform and orientation.  It allows someone to move from mobile to desktop to tablet, without losing any functionality or important information from each page or screen, and therefore removing the need for separate mobile sites.

Sitemap: A chart or list that shows where and how pages are organized on a website or app.

Scrum: This is another methodology from software development that involves very close collaboration between all members of a development team. At the beginning of each sprint (the name for the chunk of work timeline), the team discusses what needs to be completed, what is held over from the last sprint, what work takes priority, and what goals this work should accomplish.  While not directly a UX term, many UX-friendly businesses use the scrum method in their offices.

UCD (User Centred Design): A set of processes that focus on the end user throughout every stage of development and design. This is achieved by constantly testing, researching, and verifying elements within the product.

UI Elements: User Interface Elements are virtual items used to craft an interface: buttons, search fields, message boxes, dropdown lists, etc.  They can typically be found in library sets (collections of elements all made by the same designer or team), so that all the elements match each other, but some user interface designers like to craft their own.

User Flows: This is the path that a user takes to complete a task in your website or app. Different users follow different paths and have different tasks they need to complete, but each one should be designed to flow effortlessly and logically. Planning ahead of time allows UX Designers to see where a user might get stuck, or where there are logic failures.

User Task Analysis: A detailed description of how a user performs certain tasks. This can be observing them use a competitor’s product, an older version of a product, or even a non-virtual version of the task.  The goal is to understand what major steps are involved in the process, where the pain points exist, and which steps are unnecessary and can be removed.

User Journeys: Not to be confused with Task Analysis or User Flows, these are larger stories that explain not just the user making use of the product, but also what lead them to use the product, and how they felt about the product or task after completion.

UX Assets: This refers to all materials needed to create your app or product- images, text, UI Elements, graphics, audio files, databases, etc.  

Wireframe: This is the skeleton of your app or product- no images, no content, no interactive elements. It is a blueprint for where each asset will live on the screen and it makes it easier to organize and redesign how it looks without spending too much time on it.

How to Get People to Fill Out Your Damn UX Surveys

how-to-get-people-to-fill-out-your-damn-ux-surveys

Surveys are a staple of research work. If you’re a UX Designer working on a product (especially a new one), it’s likely at some point you’ll have to craft a survey. I think surveys are great – they can help you gain insights quickly from many people, often for cheap free.

But surveys are only as useful as the number of people who fill them out. The more data you collect, the more you’re able to parse out meaningful patterns.

All too commonly, this is what happens when a novice asks their friends to take a survey…

oh-hell-no-cat-ux

Why does this happen? It’s due to a lack of survey etiquette.

SURVEY ETIQUETTE

The surveys that get little to no responses always make the same mistake…they don’t give potential respondents enough information about the survey itself.

How do you react when you see a post that says “Hey fill out this survey for me please?” My guess is that you’re not jumping out of your chair out of the kindness of your heart to do a survey.

When you think about it, seeing a request like this doesn’t feel too different from advertisement or spam.

Conversely, increasing a potential respondent’s trust can drastically help you get more survey responses. If you just remember one thing from this post, it should be this question:

What information can I provide about my survey to increase trust, and therefore get more responses?

Fortunately, all this requires is some extra effort and information, which we can resolve with a simple template:

The Template for Asking People to Fill Out Your Damn Survey


> Self Intro


If asking strangers or a broader audience, be sure to give a quick blurb of who you are. It can be as simple as your name and/or job title.

Example: Hi Redditors, I’m Oz – author of the UX Blog UXBeginner.com. 

> State the purpose

Tell people what the survey is for. What are you trying to accomplish? How does this survey help you make a decision or move forward with an initiative?

Example: I’m working on creating more useful, UX-driven content for readers like you.

Note that I’m not asking for people to fill out a survey yet.

> Make the request

Time to shine! Ask for the audience’s help, but with some context.

Example: In order to get a sense of what my readers enjoy, would you please fill out this short, 1 minute survey?

Survey link: goo.gl/random

Note that the above link is not real. You can shorten links using services like Google’s URL Shortener or Bit.ly

> Tell them about the survey

How long will the survey take? Is the survey anonymous? Will the audience get to see results?

Example: The survey only contains 7 questions and takes less than 45 seconds to fill out. All responses are anonymous, unless you choose to include your email for followup. After you fill out the survey, you also get to see everyone else’s (anonymous) results about what they’d like to read on the blog! 

> Thanks + other relevant info

In addition to giving your thanks, you can reiterate how this survey will help you, when you need responses by, or even how curious audience members can reach out to you.

Example: I’m aiming to get all responses in by next week (Mon 10/17). Your survey results will help me write better articles relevant to you. If you have any questions/suggestions on the survey itself, please comment below. Thank you!

Survey link: goo.gl/random

Notice that I ended my message with another link to my survey, just in case people missed it. Again, the above link is not real.

 

Bring it all together

In a fictional example, I’ll demonstrate how I might ask a group of strangers (from Reddit) to fill out my survey:

Hi Redditors, I’m Oz – author of the UX Blog UXBeginner.com. I’m working on creating more useful, UX-driven content for readers like you. 

In order to get a sense of what my readers enjoy, would you please fill out this short, 1-minute survey?

Survey link: goo.gl/random

The survey only contains 7 questions and takes less than 45 seconds to fill out. All responses are anonymous, unless you choose to include your email for followup. After you fill out the survey, you also get to see everyone else’s (anonymous) results about what they’d like to read on the blog! 

I’m aiming to get responses in by next week (Mon 10/17).Your survey results will help me write better articles relevant to you. If you have any questions/suggestions on the survey itself, please comment below. Thank you!

Survey link: goo.gl/random

Where to Post Your Surveys? 

At this point you’re armed with a template that should convert more people to fill our your surveys. Now, where to post your survey?

Besides posting to personal networks from Facebook, LinkedIn and Twitter, one gem I’ve found is a subreddit called r/SampleSize.

r/SampleSize is a place where you can freely post your surveys. Before posting, you must create a free Reddit account and follow the community’s posting rules.

If you find another community where surveys can be posted for free, please comment!

ultimate-list-of-ux-topics-blog-image

The Ultimate List of UX Topics All Beginners Should Know

When entering a new field, there’s usually a standard curriculum to learn. Front-end developers learn HTML & CSS. Content producers learn the basics of copywriting. But…

What about UX? Since everything about a product is technically tied to the user’s experience, it can be confusing to determine the most important topics for beginners to learn. That’s what we’re going to cover today.

The methodology – I compiled this list of topics using this rough approach:

  • My personal experience working as a UX Designer and interviewing for different UX teams
  • Analyzing most written-about topics from top UX publications: UXMag, UXBooth, UXMatters and Alistapart. I distill the main UX categories that overlap from each blog.
  • Knowledge gleaned from UX books. Jesse James Garrett’s 5 Elements was especially instrumental.

TL;DR version of the these UX topics are:

  • UX Strategy
  • User Research
  • Information Architecture
  • Interaction Design
  • Usability Testing
  • Visual Design
  • Content Strategy
  • SEO
  • Coding

Without further ado, let’s dive in!

_ _ _

ux / user experience strategy banner

related to ux strategy: business strategy / product management

User experience strategy is a blend of business, process and design. If a digital product is a house, then UX strategy is asking why that house should be built in the first place, and how it should be built. And it also involves convincing others (stakeholders) along the way.

Who Does This?

This is the bread and butter of Chief Experience Officers (CXOs), UX Directors and UX Managers. But every UX Designer should be aware of UX strategy because it is an invisible force that’ll affect how you design whether you like it or not (continue below…)

This is also the domain of:

  • digital business analysts
  • producers
  • project managers.

Why You Should Know It

UX is not just about cranking out wireframes.  Interviewers will ask for your thoughts on designing in a waterfall vs agile/Lean process. In project kickoff meetings the factors of budget, resources and schedule will impact your designs.

Business requirements are also a standard requirement when working on digital products. Whether working solo or with a business analyst, much of a product’s user experience does start at the requirements level.

It’s about striking a balance between user needs and business goals, all while executing projects in a resourceful manner.

The more that a UX Designer advances in her career, the more she has to deal with strategy and partner with business. Actually, that happens across every industry and every role.

Solid Resources On This Topic:

  • Applied UX Strategy Part 1 and Part 2 are good primer articles from UXMatters. They are a long read but will give you a very good overview of UX strategy, as well as useful links to other strategic frameworks.
  • User Experience Strategy by Jaime Levy is by far the most definitive book on UX strategy. Having sat in on Jaime’s UX class myself, she is the real deal and has a knack for blending the vital parts of business strategy into the UX design practice.
  • Lean UX is an award-winning book about applying Lean principles to designing the UX of products and services. This is the way that most startups and companies now aspire to validate, test and design products.
  • UXStrat is an entire conference dedicated to the craft of UX Strategy!

_ _ _

user research section image

related to user research: UX strategy / market research / usability testing

User Research is the practice of identifying your users, distilling knowledge and insights from them, and determining their real-world behaviors. A design that is user-centric means that it was designed in a way to solve those users’ pain points in a way that feels natural to them.

User Research is different from Market Research. UX Research is concerned with evaluating the behaviors, pain points, and number of touchpoints that users experience with a given product/service.

Below is a quick breakdown of Market Research vs User Research by Momentology:

Market Research User Research
Wants Needs
Reactive Proactive
Statistical Significance Good Enough
Incremental Innovative
Time Consuming Quick
Subjective Objective

Who Does This?

Most large product/digital companies now have at least one User Researcher on their teams.

Since UX research is an integral part of an organization’s larger UX Strategy, that means most UX Designers do need to conduct some form of user research to make sure that they’re building something users actually want.

Why You Should Know It

User research makes the difference between making what you think users want versus gathering insights to create something that users will actually enjoy.

Research done right is also a humbling, learning experience. It teaches you empathy and to put aside assumptions for the greater good of your users.

It’s the difference between knowing that most of your users are age 19-25 (market research) vs observing that all your younger users ignore the “Buy Button” when asked to make a purchase (behavior from user research).

Solid Resources On This Topic:

  • Just Enough Research by Erika Hall is built on the premise that research is “something every member of your team can and should do, and which everyone can learn, quickly.” And the book delivers. It’s my #1 recommendation for UX Designers need a quick start guide to user research. Practical, to the point, and full of research useful methods.
  • Observing the User Experience is the consummate text on User Research. This is the textbook we were assigned to read in the Cal State Fullerton UX Certificate program. While it is a giant book and can be a bit try, the text is sprinkled with tons of real-life examples from the three authors. A good one to keep at your desk.
  • List of User Research Methods by Usability.gov is a quick rundown of popular UX research methods

_ _ _

Information Architecture (IA) section image

related to IA: content strategy, navigation design, taxonomy

Information Architecture, or “IA,” is the practice of organizing information to be clear, understandable and findable. If you’ve ever had trouble finding the info on a website, there’s a chance it’s an IA problem. Confusing label here. Weird category name there.

Who Does This?

The job title “Information Architect” dates back before “User Experience Designer” came into being. Today, IAs are now seen as a specialty, and there aren’t as many jobs with strict IA responsibilities because many jobs now demand a broader UX skillset.

UX Designers do not necessarily deal with information architecture with as much depth as a dedicated IA professional, but this is a foundational stage of design for any project regardless of job title.

Why You Should Know It:

Much of design is organizing information. Those with strong IA skills can create sensible, flexible structures that scale. Information architects thrive with content heavy sites, e-commerce, and any situation where lots of (meta)data is required,

Knowledge in Information Architecture will not only help you become a UX Designer, but also assist in all facets of life – writing emails, organizing your files and beyond.

Solid Resources On This Topic:

  • Information Architecture for the Web and Beyond is the consummate text on the topic. Now in its 4th edition, this big reference book is the best starting point for building IA knowledge.
  • How to Make Sense of Any Mess by Abby Covert lives up to its tagline –Information Architecture for Everybody. It’s a refreshing approach that lowers the barrier to IA with plain language and great examples. The blog at AbbyTheIA is also chock full of educational diagrams and posts on Information Architecture.
  • The Complete Beginner’s Guide to Information Architecture by UXBooth is a great introduction into the world of IA with links and references to many resources. It’s a very comprehensive list that I’ve bookmarked myself!

_ _ _

Interaction Design (IxD) section image

closely related: usability, experience design, human-computer interaction

At a broad level, Interaction Design concerns how people interact with products, systems and services. If imagined in Venn diagram form, interaction design encompasses a significant piece of User Experience Design. Thus IxD and UxD after often used interchangeably.

Who Does This?

“Interaction Designer” and “UX Designer” are often interchangeable job titles. If there is a core skill that UX Designers are expected to know, interaction design is that core skill. IxD applies to anyone who prototypes interactive experiences.

Anecdotally, as of this writing (Jan 2016), I find that job descriptions are often more accurate for Interaction Designer roles compared to UX Designer roles, because the latter can include any number of skillsets (pixel-perfect visual design, front-end programming, etc).

Why You Should Know It:

The field of Interaction Design demands that designers elevate their thinking from static to interactive. A sample group of questions that IxDs concern themselves with:

  • What’s the flow of the system?
  • What if this could be reduced from 6 steps to 3?
  • How can we prevent users from making errors?

If this sounds similar to usability, you’re also right. From load times to ensuring your design’s touch targets are large enough, usability is a huge focus of User Experience at large. There’s a reason why UPA changed its name to UXPA 2012.

Solid Resources On This Topic:

  • Complete Guide to Interaction Design – UXBooth does it again with another solid beginners resource. Chock full of useful links and people to follow.
  • About Face (4th Edition) by Alan Cooper is your bible for Interaction Design. The chapter on “Metaphors, Idioms, Affordances” is damn interesting, and “Digital Etiquette” will make you rethink how to treat users with your design.
  • Don’t Make Me Think is the most popular introductory text onusability. Steve Krug’s Rocket Surgery Made Easy is a great companion handbook on how to identify and solve usability problems.
  • The Design of Everyday Things by Don Norman is the standard textbook in this field for a good reason. It’s hard not to become a more considerate and observant designer after reading this book.
  • Web Form Design by Luke Wroblewsi is probably the most underrated and immediately useful text you can pick up today. His book is full of examples (good and bad) of how to handle user input. A designer ends up making many forms in her lifetime, and so reading this book provides an immediate return on investment

_ _ _

Visual Design Section Image

closely related: graphic design / communication design

Visuals make the “top” layer of the design stack, and good visual design helps users connect with products. As far as digital UI design is concerned, the main subtopics include typography, layout, color, and increasingly animation.

Who Does This?

Those with training in traditional graphic design typically make a great transition into designing high fidelity interfaces for digital products, with job titles like Visual Designer, User Interface Designer and occasionally Product Designer.

Employers are understanding more and more now that UI is not UX, but having Visual design skills is often seen as a must for UX Designer positions. UXers might not be required to make the hottest graphic design, but they’ll need to create clean designs that look good.

Why You Should Know It:

Good visual design enables a designer to go from concept (low-fi) to product (high-fidelity). Almost every UX Designer will feel immediately more powerful with visual & UI design in their tool belt.

And let’s not forget that visual design engenders trust and confidence in users. From behavior specialist, BJ Fogg:

“…looking good is often interpreted as being good—and being credible…This basic human processing bias— “looking good is being good” —also seems to hold true for evaluating the credibility of Web sites, especially since design look is highly noticeable.”

Solid Resources On This Topic:

  • The Non-Designers Design Book (4th Ed) is the best bang-for-buck book on visual design I’ve ever read. Knowing “C.R.A.P.” (you’ll find out) alone is worth the cost of this book; to this day I still apply these principles to all my designs.
  • Practical Typography is a beautiful free guide on typography. Since designs are 90% text (look at any web design and strip out the text…what are you left with?), knowing a few good typography rules will immediately enhance your designs. Start with Butterick’s Typography in Ten Minutes for a quick primer.
  • Design for Hackers by David Kadavy is a surprisingly deep book that teaches design from a historical perspective, analyzing how we arrive at design today through architecture, the development of the alphabet and beyond. The book does a great job explaining the “why” behind visual design principles.

_ _ _

Other topics of consideration

I don’t consider the following topics core to a UX curriculum for beginners; they don’t come up as often on-the-job as the aforementioned topics. With that said, the following topics are all industries onto themselves, and knowledge in them will prove very useful for UX Designers.

_ _ _

UX Metrics (analytics) section image

closely related: Analytics, KPIs, ROI, A/B Testing

How do you know if your design is successful? How do you measure a product’s user experience?

User Experience metrics help provide “objective, persuasive data on which to base your design recommendations” (NNGroup).

Who Does This?

There is a “data” person/team at most companies and they come in several forms:

  • Data Analyst
  • Business analyst
  • SEO (Search Engine Optimization) professionals
  • SEM (Search Engine Marketing) professionals
  • Analytics (web and/or marketing)

It’s smart for UX designers to partner with and learn from those who own metrics in order to measure the user experience.

But with services like Google Analytics, Optimizely and CrazyEgg, UX designers can get started measuring UX on their own.

Why You Should Consider It:

When working with stakeholders – especially those in the business realm – metrics help designers get buy-in. Numbers help explain how designers arrive at certain decisions.

Analytics are powerful when paired with user testing to strike a balance between qualitative and quantitative factors. It’s the difference between knowing how many people clicked a button (quantitative) versus reasons why people clicked that button (qualitative).

Peter Drucker, management guru, is known for saying “What gets measured gets managed.” Measuring the user experience with the right metrics helps designers stay objective and work towards a goal.

Solid Resources On This Topic:

_ _ _

Content Strategy section image

closely related: copywriting, information architecture

Bless Wikipedia for having the simplest definition of content strategy:

Content strategy refers to the planning, development, and management of content—written or in other media.

Who Does This?

Just as “UX Designers” used to be called by other names (*cough web designer cough*), “Content Strategists” have come into their own in recent years.

Due to the recent formalization of the field, those who hold titles like “web content writer” and “copywriter” often do content strategy.

Anyone who writes words or creates media for consumption can leverage content strategy to their benefit.

Why You Should Consider It:

Designers who have a sense of content strategy can design better sites that feel natural and conversational, as opposed to cold and transactional.

There’s a saying in the digital business that “content is king.” Think of any website or app and strip out just the text, and you remove 90% of its meaning. Then take out other media like images and you pretty much just have a skeleton of a layout.

You may have heard of content-first design, which sounds like exactly what it is: starting a design with the content first. It’s a great way to prioritize designs, because changing the words is much easier than changing a design.

Some of my articles like The Text First Portfolio and Minimum Viable UX Portfolio have a content-first bent to them.

Solid Resources on the Topic:

_ _ _

search engine optimization (SEO) section image

closely related: UX Metrics analytics, search engine marketing (SEM)

Search Engine Optimization (SEO) is the practice of making your content get found by search engines. Here’s the formal definition:

The process of affecting the visibility of a website or a web page in a search engine’s unpaid results—often referred to as ‘natural,” “organic,” or “earned” results.

Who Does This?

Many SEO Professionals refer to themselves as SEOs, or search engine optimizers. Here are some job titles you might be working with:

  • SEO Professional
  • SEO Specialist
  • Search Specialist
  • SEO/SEM/Analytics Specialist

The last bullet points shows how SEOs are often responsible for digital marketing and analytics efforts.

Why You Should Consider It:

You’ve designed a great website and made it live. Other than notifying friends on your Facebook and Twitter, how do strangers find your new creation? In one word, Google (okay, and other search engines.)

Aside: my SEO friends joke that they don’t work at Google, but Google keeps them employed.

More and more, user experience factors like mobile-friendly sites and loading time affect how high websites rank on search engines.

SEO practices also cross-pollinate with information architecture and content strategy – if people search for a certain term, why not use that same content on your page when designing?

Solid Resources on the Topic:

  • Beginner’s Guide to SEO – the massive free guide to SEO from Moz, a leading SEO company
  • Marketing Guru Neil Patel’s The On-Page SEO Cheatsheet is an action-packed post with practical tips for designers
  • Stick to blogs like Moz and Search Engine Land to stay updated; Google can make changes to their search algorithms at any point, so even books 1 year old may be outdated

_ _ _

Code, Development, Programming section image

closely related: programming, front-end development, back-end development

At a certain point, designs need to be made into real working products. Prototypes and new design-to-code tools are getting better each day, but they still don’t come close to manipulating code.

Who Does This?

This is the longest ongoing debate in the design community: should designers code? The answer to that question is “it depends.”

In The Last Post You’ll Read On Whether UX Designers Need to Learn Code, I argue that the contexts of work environment and team structure are vital. For example, someone who wants to work in a leaner environment that requires wearing more hats (startups) may have to pick up front-end web development, whereas another person who wants to focus purely on UX can specialize in larger teams. 

People who code for a living go by just as many names as designers, so I’ll list the job titles with the most cross-over with UX roles:

  • Web Designer
  • UX/UI Developer
  • Digital Designer
  • Front-end developer
  • Product Designer (more and more so associated with a “unicorn” skillset)

Why You Should Consider It:

Even a little front-end knowledge can help UX Designers communicate with developers. Given 2 equally good designs, knowing that one solution is easier to implement in code will save you and the developer a lot of time.

There’s one camp arguing that knowing the realities of code can stifle the most creative, user-centric designs. While that might apply for some people, I don’t know a single designer who regrets their coding ability.

Solid Resources on the Topic:

  • Codecademy is the de-facto beginner’s resource on learning code through interactive lessons. I highly recommend following up with General Assembly’s free Dash interactive tutorials, which help you build more fun mini-projects.
  • Shay Howe’s Learn to Code HTML & CSS is a beautiful resource that covers both Beginner and Advanced topics for free :-)
  • Check out A Smarter Way to Learn HTML & CSS and A Smarter Way to Learn Javascript, a series that helps beginners learn coding concepts quick. “The learner spends two to three times as long practicing as he does reading. Based on cognitive research showing that retention increases 400 percent when learners are challenged to retrieve the information they just read.” Sounds promising, and the Amazon reviews are near-perfect!
  • Codepen is the Dribbble of code. It not only allows you to explore interesting designs from a thriving community of coders, but you can easily see how designs are implemented in HTML/CSS/Javascript.
  • Macaw and Webflow are two of the most formidable design-to-code products on the market today. They aren’t perfect and come with their own learning curves, but I’ve heard that the actual code output quality is quite impressive.

Do I have to learn all that?

If you feel a bit overwhelmed right now, then what’d you expect from an Ultimate List?? Just kidding. This industry is huge and I stress again that you don’t have to master all of these topics.

But knowing about these topics helps make you into a more complete UX Designer, because they are all different facets of building a product/service. This is especially true when you interview with an entire digital team (not just with the UX team).

Try reading through one or 2 links in each topic’s Solid Resources and you’ll be ahead of most UX Beginners.

Learn UI Design by Copying

UX-Beginner-Learn-UI-by-Copying-Header

Throughout most of our academic careers, we’ve been taught that copying is a bad thing. Getting caught copying an author’s work is considered plagiarism. Copying someone else during an exam can lead to expulsion. So it’s not a surprise that we have negative associations with copying, even to this day.

But what about copying as a way to learn? 

I’m going to nerd out for a moment and talk about my favorite manga+anime, Naruto. It features a character named Kakashi.

They call Kakashi the Copycat Ninja because of his ability to copy the skills of others (and often does it better himself).

UX-Beginner-Learn-UX-By-Copying-Kakashi

Kakashi using his eyes to copy your skillz

This makes Kakashi one of the most formidable opponents in the Naruto universe. Here’s what we can learn from this legendary anime character:

Copying is a valuable skill and learning tool. Especially in UX, your ability to mimic and deconstruct designs will come very handy.  

Reasons for Copying Existing Designs

Reason 1: Understand through deconstruction

UX-Beginner-Learn-UI-by-Copying-deconstruction

When you copy a design, you’re forced to identify and recognize every single element in that design. Doing so brings a level of awareness about how that design was brought to life.

This is a process of deconstruction. Copying a design will allow you to see the components that, in sum, make up the entire design.

Suddenly, copying becomes more than copying. You’re deconstructing and understanding.

Reason 2: Training your eye (and muscles)

UX-Beginner-Learn-UI-by-Copying-Training-Eye

After you learn by copying enough designs, you’ll undoubtedly start to notice patterns and conventions. Tabs. Sign up forms. Headers. Footers, carousels, oh my!

Being able to recognize patterns and call their name gives you power over those design patterns. Training your eye in such a way allows you to use and communicate such design patterns in other designs you create.

It’s also long been studied that involving your hands while learning – such as handwriting notes – can improve memory retention.

People who take class notes on laptops when they expect to be tested on the material later tend to transcribe what they’re hearing without thinking about it much.

This supports the advice that so many UX experts give, that sketching is an essential skill.

My hypothesis in this case is that if you’re copying using wireframing apps (Omnigraffle, Axure) you’ll still getting the benefit of actively using your hands. To me this is different from typing everything down that a professor is saying without thinking about it.

Reason 3: A Faster Way to Learn

UX-Beginner-Learn-UI-by-Copying-blank canvas

Simply put, copying designs is a learning method that has smaller upfront investment in time and effort. It’s a faster way to learn design skills compared to creating something new on your own.

I know, I know, you probably have a dozen startup ideas you want to try your design skills on. That’s totally fine. But for those new to design, starting with a blank canvas can be exceedingly intimidating. It requires lots of willpower to push through that initial resistance of designing

So if your priority is to learn UX and UI design, and get a job [also link], then copying designs is one of highest ROI activities you can do.

So Oz…can you tell me how do I go about practicing-through-copying? Why, I never thought you’d ask:

_ _ _

Strategies for Copying

1. Copy what you love

Let’s make this fun. Think of the sites and apps you love or use often, then copy those. You’d be surprise how much detail goes into them.

Need some inspiration?

  • Look in your browser history (CMD+Y on Chrome). (Some of my most visited sites today are Facebook, Google Keep, WordPress and Grooveshark.)
  • Visit Awwwards, a great site that collects award-winning sites
  • Search Google for key terms like “best apps” to find articles like Best iOS Apps Honored in 2014 (Cnet) or Best Mobile App Awards

2. Sketch it out by hand

Don’t be intimidated by sketching. When it comes to sketching basic interfaces, you don’t really need more than a couple lines and geometric shapes. You don’t have to be an artist; revel in sketches that look a bit rough or ugly.

The main idea is to not to create perfect drawings, but rather to reproduce the skeleton of the design quickly. Also, no need to overwhelm yourself with copying the design of every single page. Focus on the top 1 – 3 main screens where all the action happens.

As you sketch, make a mental note of certain elements that stick out to you. This is especially useful for later referencing; if you don’t know what a certain web element is, you can ask a fellow designer (“that’s called a sticky header”).

3. 50 5 Shades of Gray

When you decide to wireframe an existing website, don’t worry about color. Use a simple “shades of gray” palette instead. Doing so brings you two benefits:

  • You’re less intimidated by the visual design of the design you’re copying. Hence, speed.
  • Using colors sparingly helps you focus on functionality and layout

So Oz…can you show me an example of a designed you practiced copying on? Heck yeah!

_ _ _

Wireframing the Homepage of Lyft

Lyft is one of my favorite startups. Their design feels warm and friendly, and in my opinion it has a lot more personality than Uber (which seems rather cold to me). So here’s an example of how I wireframed Lyft to learn more about startup homepage design.

It’s quick, not polished and ugly. But little details I would’ve glazed

What we’re copying: (Lyft Homepage)

Lyft-Homepage-Entire-Page-Optimized-800

My wireframe: (click for larger image)

UXB-Copycat-Designer-Lyft-Wireframe

Is there more?

If I could go back in time and re-learn UX and UI design from the ground up, I would’ve started by copying all my favorite sites & apps. It would’ve been a much more engaging introduction to the UI side of UX design.

What do you think of this approach?

I’ll continue to make more resources and posts on this topic if enough people are interested in this approach to learning. Please subscribe below for future goodies like wireframe examples, templates, and more.