Learn ux design

Поделиться Курсом / Книгой / и тд.
#1

BEGIN HERE

RESOURCES

  • Top UX writers - Practicing the craft of UX is far more important than reading about UX. But if you have to read someone, I’ve found no better UX writers than the following 3 people – all of these names you will hear again in this course. It’s worth bookmarking their sites and any articles you find particularly interesting.
    • Luke Wroblewski (blog, twitter) - Prolific writer, specifically on the UX of forms and navigation.
    • Nielsen Norman Group (blog, twitter) - Holds a place in my heart for being specifically data-driven. One of the original UX writers, you can find articles on their site from the 90s! (Keep in mind that UX as a field, as well as users of digital products, have changed a lot since then)
    • Bret Victor (website, twitter) - More conceptual and visionary than the other two, Bret is the one whose writing convinced me to leave my job and become a freelance designer.
  • Learn UI Design - If you’re interested in visual design, I run an in-depth video course on user interface design. As a bonus to all Learn UX Design students, you can enroll in Learn UI Design at any time, even outside of normal enrollment periods – just ask.

HOMEWORK

Introduce yourself in the Slack #introductions channel with the following:

  • What’s your name?
  • Where do you live? (optional, but we sometimes organize student meet-ups)
  • Why do you want to learn UX design? For work? Your own startup? Want to freelance?

FOR YOUR PORTFOLIO…

Note: If you’re going through Learn UX Design with the goal of creating a portfolio, pay special attention to the “For Your Portfolio…” notes at the bottom of many lessons – they will contain extra assignments and sometimes direct you to watch videos in a different order .

If you want to create a UX portfolio in conjunction with this course, your first assignment is to brainstorm 3-5 sample projects you might include in your portfolio (ultimately, you’ll want to launch your portfolio with at least 3).

There are 3 different types of projects that UX beginners might include in their portfolio before they’ve actually been hired for UX projects:

  • Side projects . These are projects that are actually designed and developed, yet no one is getting paid. Perhaps you’re a developer, or perhaps you can team up with one to design and develop something real, it’s undeniably powerful to be able to show future employers an actual app that real users are using .
  • "I-wish-it-existed" apps . These are apps you wish existed, but currently do not. They may not have any real chance of actually being developed – but that doesn’t mean you can’t do the design work as if they were .
  • Unsolicited redesigns . If you use an app frequently and know how it might be improved, you can redesign part (or all) of it as if you were a designer at that company. But a word of warning: since you’re not privy to the actual business goals of the app you’re redesigning, you may put in a lot of work into a solution that, in reality, would be completely rejected by the company you had in mind.

For more, check out my free article How to Create Your UX/UI Portfolio (Without Much Experience). In particular, the first section is on choosing projects to feature in your portfolio before you’ve done any paid design work.

WHY GOOD UX DOESN’T “JUST HAPPEN”

HOMEWORK

Take a screenshot or short screen capture (Loom is my preferred way to take a screen capture and optionally narrate it) of one usability mistake you’ve identified in something you’ve designed or otherwise worked on . Write a brief description of how you think this mistake got made. Does it fit into one of the 5 reasons listed above, or is it something else?

When done, post to #introduction.

FOR YOUR PORTFOLIO…

You can treat your portfolio as UX project itself – you have users (your future employers) with a problem (trying to decide if they should hire you) and you help them solve that problem with an interface (your portfolio).

Just like with other UX projects, prioritization is hard . You might be tempted to show tons of different projects of all different types. But consider for a second your ideal employer (whether it’s one company, a few different, or just a general category of company – e.g. “funded startups likely to hit $1B valuations”).

Write out answers to the following questions:

  • Who is your ideal employer ?
  • What types of projects would most convince them to hire you? (e.g. ecommerce, marketplaces, specific industries, etc.)
  • What platforms would they be most interested in seeing? (e.g. web, mobile, tablet, VR/AR, etc.)

You might find it useful to look at designer job listings or talk to anyone you know who works at those companies.

Based on this reflection, adjust your 3-5 project ideas accordingly.

OVERVIEW OF THE UX DESIGN PROCESS

FOR YOUR PORTFOLIO…

For each of the portfolio project ideas you’ve picked out, write a brief description of why you picked that particular one. Is there something in particular you think is lacking from current solutions? What do you think you can add, change, or improve? Why is your take novel or interesting or otherwise worth designing?

This may sound like a fairly trivial exercise, but it’s one of the first parts of the story of your portfolio project (remember from the blog post?). And by the time the project is done, it may have changed so much that you won’t remember your reasons for beginning quite right.

If you’re on the portfolio track of Learn UX Design, you should now watch the Creating a Design Portfolio lesson, from which you will then start the User Research & Testing unit.

INTRODUCTION TO SKETCH

OTHER WIREFRAMING & DESIGN APPS

In Learn UX Design, you can choose between a number of tools for Wireframing. If there’s one you’re already comfortable using, just stay with the tool you already like . Sketch was created primarily for visual design, so I rely on a proprietary plugin (Sketch Runner) and my own wireframing library to quickly create wireframes. However, each tool has its own strengths and weaknesses.

Application Platforms Notes Price
Sketch Mac :white_check_mark: This is what I use in the video lessons

:white_check_mark: Largest community of any design tool
:white_check_mark: Primarily used for UI design, so it’s simple to hand off wireframes to UI designers
:x: Only for Mac
:x: Requires $20 plugin to quickly add symbols from libraries (can do it using dropdown menus for no extra cost)|$99
$69/year for updates after first year|
|Figma|Web (cross-platform)|✅ Cross-platform (web-based)
:white_check_mark: Also primarily designed for UI, so wireframe hand-off is simple
:x: Not designed specifically for wireframing; not easy to add components from a large library|Free (up to 3 projects)
$12/month for unlimited|
|Adobe XD|Mac, Windows, and Web (cross-platform)|✅ Cross-platform
:white_check_mark: Also primarily designed for UI, so wireframe hand-off is simple
:x: Not designed specifically for wireframing (and not quite as feature-rich for visual design as Sketch and Figma)|Free (up to 1 shared prototype)
$10/month for unlimited|
|Balsamiq|Mac, Windows, and Web (cross-platform)|✅ Specialized tool for wireframing
:white_check_mark: Low-fidelity by default (this is an advantage)
:white_check_mark: Cross-platform|$89
$9/month for web version|
|Moqups|Web||Free trial
First project free
$19/month afterwards|

RESOURCES

SETTING UP YOUR WORKSPACE FOR RAPID WIREFRAMING

RESOURCES

  • Wireframing Sketch Library by Learn UX Design. All Learn UX Design students get access to my specially-created Learn UX Design Wireframing Sketch library (which also works in Figma). It contains most components used in mobile and web app wireframes. To use it, open the link and click “Add Library to Sketch” in the bottom-right. Once you’ve added it as a library, any updates I make (including new components, tweaks to make it more robust) will automatically be pushed to your documents as well.
  • macOS Sketch library by Apple. The official library of macOS components
  • Icon Sketch libraries
  • Sketch plugins
    • Sketch Runner. For quickly adding symbols from libraries ($20 for the Pro version, which you need to add symbols by name)
    • MDS Shortcuts by Matt D. Smith. A great way to align elements using only a keyboard shortcut
  • SnazzyMaps “Ultra Light” theme. Bookmark this for anytime you need to include maps in your wireframes – this is a great Google Maps skin that will get you a simplified, grayscale look for your maps.
  • Unleashing the Full Potential of Symbols in Sketch by Javier Cuello and A Beginner’s Guide to Sketch Libraries by Marc Andrew. These two articles will get you up-to-speed with symbols and libraries in Sketch, if you aren’t already familiar.

HOMEWORK

It’s time to practice a little bit of wireframing! Your homework is to create a simple log-in screen wireframe that includes the following elements:

  • App title/logo (you don’t need to design anything fancy)
  • Email field
  • Password field
  • “Log in” button
  • Link that allows users without an account to create one

When finished, export your artboard as a PNG and post it to the Slack.

BUILDING A UX REFERENCE LIBRARY

RESOURCES

  • Mobbin. The upstart among design pattern databases. Over 10,000 screenshots from 170+ apps. Can bookmark screenshots on the site for free, but you can’t save them to your desktop unless you pay $25/year.
  • Pttrns.com. The original designer’s database. Over 7,000 screenshots from professionally-designed apps for iPhone, iPad, Apple Watch, and Android – but only a fraction of them available unless you pay $5/month or $40/year (I’m subscribed, but will probably cancel if Mobbin continues to be an excellent resource). Can download images.
  • Nicely done . Over 3,000 screenshots from 180 products (as far as I can tell). Can’t download images. Totally free.
  • Call to idea. Desktop screenshots of specific patterns (footers, tab controls, wizards, etc). Not the largest library by any means, but if you know what pattern you’re looking for, the focus is unparalleled. Also good for visual styling. Can’t download images. Totally free.
  • Lapa . A directory of landing pages. And that’s it. But they’re really nice, and they have over 2000 of them. Can download images with right-click. Totally free.
  • Dribbble. Originally a designer social network for posting works-in-progress, Dribbble is an incredible place to find inspiration, even if many of the screenshots are from non-existent apps. Overall, the community focuses on beautiful visuals over realistic UXs, but it’s still a fantastic resource. Search for any pattern you need – “filter”, “list”, “pie chart”, etc. Can download images. Free to view, must be invited to post, and $36/year for pro-level features.
  • Really Good Emails. This one is basically what is sounds like! A similar resource as above, but emails instead of apps and sites. You never know what you’ll need to design :wink:

HOMEWORK

  1. Write and save a list of professionally-designed complex apps you use (on whatever platforms you’ll be designing for – presumably (a) web and (b) mobile) that you can reference whenever you run into a UX pattern you’d like some inspiration on. I’ve listed a few categories of complex apps below.
  2. Visit the pattern library sites listed above, and bookmark any you think would be of particular use.

FREQUENTLY USED COMPLEX APPS

A good definition of a “complex app” is one that stores at least two big lists of things . For instance, email clients typically store “email threads” and “folders”, both complex objects with their own patterns, actions, etc.

  • Email clients – and other more complex communication apps, like Slack
  • Calendar apps
  • Maps
  • Music – Spotify, Apple Music
  • Sharing economy/review aggregators – AirBnB, Yelp, Foursquare
  • Project management – Basecamp, AirTable, Trello, Asana
  • Apps you use for work – Marketing tools, analytics or logging tools, Salesforce, ad platforms
  • Financial apps – most are poorly designed, but some modern FinTech apps are great
  • Knowledge management – Evernote
  • Social media – these are often well-designed, but, in my opinion, are overall less useful for cross-referencing from other UX projects

FOR YOUR PORTFOLIO

For any of your portfolio project ideas, make sure to add as many well-designed competitors or similar products as possible to your UX Reference Library.

So, for example, if I wanted to create a music-writing app, I’d make sure to add similar products in that space like Finale, Sibelius, and MuseScore.

THE BEST INTERACTION

RESOURCES

  • Magic Ink by Bret Victor. A manifesto on the power and responsibility of designing for screens. You are writing with magic ink . The fourth section contains very similar points to this lesson, but the entire piece is required reading for all UX designers.

HOMEWORK

Sketch problem and solution · PNG problem · PNG solution

The wireframe is from a complex app for law enforcement and government. It’s a screen for requesting access for your organization, many of which can use the app for free, but all of which need special manual review. It’s based on a real draft design from a client.

Modify the wireframe to eliminate unnecessary interaction wherever possible. You are free to make other changes you think would be beneficial.

As with many of these assignments, you lack domain knowledge and access to expert clients. Think of your work as a proposal of what you’d want to ask the client about; you can presume the answers where useful.

SHOW WHAT’S ACTIONABLE

HOMEWORK (BASIC)

Problem (Sketch) · Problem (PNG)

Create a more usable version of the mobile webpage above, based on the (actual!) class schedule page of a local gym. You may assume, absent any outside knowledge, that the use cases, in rough order of occurrence, are:

  • “I want to attend a class today (or perhaps tomorrow) – what’s available and when?”
  • “When is such-and-such a class this week?"
  • “Is there a class on this date at around this time?"

Post your finished solution to the #2-fundamentals channel.

HOMEWORK (MORE ADVANCED)

Problem & solution (Sketch) · Problem (PNG) · Solution (PNG)

Today’s homework is a picnic shelter reservation form at a local park. The “problem” wireframe is based on a real website through which my wife and I had the displeasure of trying to reserve a picnic shelter. The website succumbs to the temptation to show everything , rather than to show what’s actionable at any given moment. Your job is to redesign the wireframe so as to fix that.

You don’t need to redesign the entire reservation flow, but at least design a critical screen or two where you can focus on showing what is most actionable to users at those points.

THINK LIKE A USER, NOT LIKE A DATABASE

RESOURCES

JAKOB’S LAW

RESOURCES

  • The End of Web Design . An article by Jakob Nielsen from 2000 in which he coins the phrase “Jakob’s Law”.

HOMEWORK

Sketch Cloud prototype · Sketch prototype and solution · PNG solution

Anki is a powerful flashcard app based on the science of memorization – but it has major usability problems. The Sketch Cloud prototype allows you to click through some of the major functionality of their Mac app, including choosing a deck, reviewing cards, and adding a new card. You can also download Anki for Mac, Windows, or Linux to investigate for yourself.

Task 1: List as many violations of Jakob’s Law (or other usability heuristics) as you can find in the prototype. Check your findings against the Sketch or PNG solution; post questions to Slack.

Task 2: Create a clickthrough prototype of a flashcard app that fixes the violations seen above. Users must be able to do:

  • Create a new deck
  • Create flashcards to go in that deck
  • Review the flashcards for a particular deck
  • Modify or delete flashcards
  • See how many flashcards remain to be reviewed that day (note: this is chosen by a secret algorithm, but the gist is some subset of flashcards will be “up for review” on any particular day)

OBVIOUS ALWAYS WINS

RESOURCES

  • Obvious Always Wins by Luke Wroblewski. The article to coin the phrase. Luke is an insightful, analytical, data-oriented UX designer, and is worth following.

HOMEWORK

There are two options for this lesson’s homework:

  1. Find a problem; sketch a solution . Among apps that you use regularly, look for an instance in which the laws of locality are violated. Sketch a suggested solution that would amend the violation and post it to the Slack.
  2. Redesign a feature . Among “canvas apps” that you use, propose a new feature that places controls closer to the objects they edit (in the same way that Medium’s editor places text editing controls closer than Word or Google Docs does). Canvas apps could include coding apps, text editors, drawing/painting apps, image editors, music notation software, CAD, etc.

MIND YOUR NOUNS

RESOURCES

  • Mental Models by Nielsen Norman Group. This article is a slightly different take on nouns . Jakob Nielsen talks here about “mental models” – when the user starts to create predictions of how a certain feature or tool works. Oftentimes, they’ll piggyback on similar features or tools and end up making incorrect assumptions. Valuable reading, like everything from NNG!

HOMEWORK

Design the welcome flow of a fictional app that teaches its users new nouns. The welcome flow is (typically) 3-8 screens that…

  • Welcome the user to the app
  • Introduce critical nouns core to using the app via…
    • Deductive patterns, such as a text definition of the concept
    • Inductive patterns, such as canonical examples, built-in tutorials, or user-submitted galleries
  • Show the user the first screen they can start taking action at

Note : The main purpose of this assignment is to create an experience that introduces a user to new nouns. If there’s a part of the app that works better for this than the welcome flow, please design that instead!

WHAT WOULD A POLITE PERSON DO?

RESOURCES

  • Aisles of Aggravation by Daniel Falko. A humorous look at what it would mean for a grocery store to display some of the rude UX patterns we see all the time from software.
  • UX and the Civilizing Process by Kevin Simler. A more philosophical take on how manners and good UX are analogous. My favorite line (regarding how bureaucracies are the antithesis of hospitality, both personally and in their software’s UX): " When designing an interface, clearly you should aim for hospitality. Treat your users like guests. Ask yourself, what would the Ritz Carlton do? Would the Ritz send an email from no-reply@example.com? No, it would be ashamed to — though the DMV, when it figures out how to send emails, will have no such compunction. "
  • Dear tech companies, I don’t want to see pregnancy ads after my child was stillborn by Gillian Brockell. A tear-jerker of a story on what can happen when you forget that many of your users are in bad situations. It really drives home the point that shipping your software is like sending an emissary on your behalf – and you really want to send someone polite and personable.
  • Everything I Needed to Know About Good User Experience I Learned While Working in Restaurants by NNG. After watching the lesson above, it should be pretty self-explanatory what this article is all about :wink:

HOMEWORK

Sketch problem & solution · PNG problem · PNG solution

Redesign the given search experience for a martial arts tournament app, taking care to make the software more polite according to the heuristics we’ve discussed in this video. When finished, post to #2-fundamentals with a list of what violations you noticed.

I noticed violations of four rules. Highlight this paragraph to see which ones. 1, 2, 3, and 5

INTRODUCTION

RESOURCES

If you’d like to download them immediately, here are links to the full set of cheatsheets available for download in this unit. Note: you can also download these in their respective lessons.

NAVIGATION

COMMON MOBILE APP PRIMARY DESTINATIONS

Destination Name Notes
Explore, Discover, Browse Recommending content to the user they may be interested in, but not otherwise find. See Browsing and Recommendation for more.
Favorites, Bookmarks, Saved A list of the user’s saved or bookmarked content
Friends, Contacts, People
Home
Map, Nearby
Messages, Inbox
More A catch-all destination for more features; very akin to a hamburger menu
My Profile For updating profile pictures or details of public-facing profiles
Create New [Something] Whatever it is that your app lists, creating a new one is often one of the most important features
Notifications, Alerts
Search
Settings

COMMON MOBILE APP SECONDARY DESTINATIONS

  • Help
  • Send Feedback
  • FAQ
  • Contact Us
  • About Us
  • Legal, Privacy Policy
  • Log Out

RESOURCES

  • Responsive Navigation Patterns by Brad Frost. The most complete listing I’ve found of navigation patterns that work across all screen widths, from mobile to desktop.
  • Top Bars, Bottom Bars, Tabs, and Understanding Navigation (from the Material Design Guidelines) by Google. Material Design is probably the most sensible and consistent design language in wide use today. Their thoughts on navigation patterns are well worth reading, remembering, and applying both in and outside of Material Design apps.
  • Tabs and Card Sorting by Nielsen Norman Group. More good reading on navigation components and one particular method for determining how you should structure your navigation.

HOMEWORK

Sketch problem & solution · Web prototype problem · Web prototype solution

Redesign the navigation structure of the app linked above, which is a directory of flamenco meetups and jam sessions. The main destinations in the current nav are shown (home, explore, profile), but here’s the full list of main app features and screens:

  • Juergas - The flamenco word for jam sessions. The main point of the app is for users to find upcoming nearby juergas where they can play guitar, sing, dance, keep rhythm, or just enjoy the music.
  • Groups - Organizations, official or not, that hold juergas.
  • Performances - More official flamenco concerts, which may or may not be held by groups. Less important.
  • Users - A directory of flamenco enthusiasts, including information on what skills they have (dance, guitar, singing, rhythm) and what groups they’re part of
  • Explore - A map view of juergas and groups
  • Profile - A catch-all for information about myself, including…
  • Juergas I’ve Attended - You can register for juergas on the site; this is a list of juergas the user in question has registered for
  • My Groups - Users can belong to groups; this is a list of groups that the user in question belongs to
  • Settings - Self-explanatory, right?

If my clients have wireframes or an existing app, my process for thinking about navigation is usually something like:

  1. List main app destinations/features/screens)
  2. Identify natural groups of destinations – e.g. two filters on the same data (“Recent transactions” and “Large transactions” may belong together under one screen – “Transactions”)
  3. Use Jakob’s Law to try and organize the destinations in the most predictable, boring, conventional way – e.g. on desktop, Profile is in the top-right; on iOS, it’s the right-most icon in the bottom nav. Use your UX Reference Library to see how other apps solve the issues you’re running up against. Note that you have more than just nav bars available in structuring the destinations:
  • Primary nav (either side or top)
  • Secondary nav
  • Tabs
  • Filters
  • Concatenating multiple destinations as sections of a single page
  • Sidebars (on medium-to-large screens)
  • Footers
  1. Verify the layout using a few mental checks:
  • Completeness - The chosen destinations cover all app functionality
  • Primacy - The home page makes sense as the primary thing users would want to see upon logging in
  • Predictability - The user can successfully predict what will they will see at each nav destination, and, if they have a specific task in mind, their first click will be the correct place to go (usability testing is the best way to do this, but you can put yourself in your users shoes here and now)
  • Consistency - The top-level nav destinations are consistent across the entire app, and secondary nav is consistent across all screens where it’s displayed
  1. Adjust as necessary until the mental checks all pass

You’re welcome to use any process you like, but until this becomes second-nature, it might be useful to run through these steps.

Note that you are welcome to redesign the app for desktop or mobile. When finished, post your solution to #3-design-patterns.

TEXT INPUT CONTROLS

RESOURCES

  • Input UX Checklist by Learn UX Design. In situations where you need to remember a large number of simple things, checklists shine. Designing form inputs are one such place. This checklist is a handy cheatsheet of form creation best practices. Save it to your computer – or print it out and hang it on your workspace wall. It’s up to you.
  • Web Forms (book) by Luke Wroblewski. This is hands-down the classic book on creating usable forms. Some of the examples are starting to feel a bit dated, but none of the lessons are – Luke is rightly considered the world’s leading expert in the UX of form design.
  • How to Improve Your Billing Form’s UX in a Single Day by Margarita Klubochkina. An in-depth article on UX problems associated with credit card entry – and how to fix them.
  • Where to Put Buttons in Forms by Adam Silver. A complete breakdown of buttons in forms, paying special attention to usability, accessibility, research-based best practices and… the laws of locality :wink:
  • Visual guide to iOS keyboard types by Robin Kunde. Reference images of all iOS keyboard types.

SELECTION CONTROLS

RESOURCES

HOMEWORK

Sketch problem & solution · PNG problem · PNG solution

Redesign the above flight search screen to avoid dropdown controls. In the spirit of “the best interaction is no interaction at all”, you may also remove, hide, or use smart defaults for various fields.

When finished, post to #3-design-patterns.

ERRORS

RESOURCES

  • Errors UX Checklist by Learn UX Design. The “10 commandments” of good error messages and experiences.
  • Preventing User Errors: Avoiding Unconscious Slips & Avoiding Conscious Mistakes by NNG. A different breakdown of errors – accidental errors and errors of misunderstanding – and a number of strategies for avoiding either type.
  • Inline Validation in Web Forms by Luke Wroblewski. While most of this article will feel like review, and Luke doesn’t quite stumble upon the 2-state validation pattern, I’ve always got the time of day to read Luke’s data-driven findings.
  • Inline Validation in Forms by Mihael Konjević. In case you thought inline form validation was a universally-agreed upon solved problem, just look at this inventory of the many ways in which popular apps do form validation in completely different ways.

HOMEWORK

Sketch problem & suggested solution · PNG problem · PNG suggested solution

Above is a mobile invoice creation screen. Please specify all users the developers will need to catch on this screen. You may notate the mockup with notes, duplicate the artboard to show various states, or simply write a spec document (such is UX!).

You may assume this is an app for 1-person or small businesses who want basic invoice functionality without any particularly advanced functionality. But, as always, feel free to make any modifications to the original design or prompt you’d like.

FOR YOUR PORTFOLIO…

While I recommend writing out all necessary error messages for your sample apps (or at least enough to know how you’d do all of them), the biggest benefit to your portfolio will come from focusing on a couple things related to errors:

  • Errors experiences that are unique to your app . Do you have a unique flow or interaction in your app that requires different error messages or experiences than ones you commonly see? Or have you designed an error UX that solves the user’s problem better than existing options?
  • Error experiences where you can identify tradeoffs . Tradeoffs are hugely important for your portfolio – they show that, rather than falling in love with one idea, you can objectively look at the pluses and minuses of many ideas objectively, and choose one accordingly. Likewise, anywhere you talk about tradeoffs in error UX will be golden for the stories of your projects.

The 2-State Validation Pattern is something you are welcome to write about in your portfolios. While it’s not infrequent to see variations on this in the wild, there is no existing name for the pattern – and it solves existing problems rather elegantly.

Likewise, invalid action errors are great portfolio-fodder. As I’ve mentioned above, they’re highly likely to involve multiple options with different tradeoffs, and only be solvable on a case-by-case basis – meaning they fit nicely into the story of your projects.

SEARCH & FILTER

RESOURCES

HOMEWORK

Research & inspiration · Sketch solution · PNG solution

One topic we didn’t cover in the video is multi-type search. How are results displayed when you’re searching across multiple types of nodes? For example, a facebook search could return profiles, posts (text or images), groups, and more.

Research multi-type search patterns and create 3 concepts of a search UX for a music streaming mobile or desktop app. Result types could include songs, albums, artists, playlists, and more. Post them to #3-design-patterns with a brief description of which you’d favor for a general audience music streaming app.

FOR YOUR PORTFOLIO…

Search UXs can be worth a special mention in your portfolio, especially if you tackle any particular interesting challenges with them:

  • Is search the main feature around which the app is based? (a la Google Maps or AirBnB)
  • Are you searching across multiple result types?
  • Do search results have alternate (or multiple) views? E.g. list, map, grid of images, etc.

In addition, search UXs work well in portfolios simply because there are so many patterns with so many tradeoffs to evaluate – all fantastic stuff for your UX write-ups.

LISTS & TABLES

RESOURCES

  • Lists & Tables UX Checklist by Learn UX Design. A checklist that includes design pattern ideas for various list-related UI components.

HOMEWORK

Design a list or table view of recent transactions in a personal finance app. The app can be for any platform you wish, but this view should be fairly powerful – allowing users some flexibility in viewing and getting actionable information from past transactions.

  • For the list itself, think of what fields you want to display, and what actions are available on each transaction.
  • For the list controls, think of what sorting/searching/filtering might be useful to fulfill reasonable use cases in a personal finance app like this
  • For the broader page, particularly consider if any all-up stats on the transactions would be useful – e.g. a count or sum of recent expenses, etc.

FOR YOUR PORTFOLIO…

Lists and tables screens can be worth calling out in your portfolio write-ups, especially if you tackle any particular interesting challenges with them:

  • Is a list or table main conceit around which the app is based? (a la AirTable or many, many mobile apps?)
  • Have you taken interesting measures to simplify the lists and tables in your app?
  • Have you made any (potentially difficult, yet justified) tradeoffs in arriving at the final design of your list/table?

BROWSING & CONTENT RECOMMENDATION

RESOURCES

RESPONSIVE DESIGN

RESOURCES

  • Responsive Patterns by Brad Frost. The best compilation of patterns for responsive design. Includes generalized examples with code, so its useful for developer and designer alike.

HOMEWORK

Coming soon…

ACCESSIBILITY

RESOURCES

  • Accessibility checklists
    • Accessibility UX Checklist by Learn UX Design. A straightforward list of best practices for UX designers in the three areas covered in this lesson – color & contrast, keyboard navigability, and screen reader navigability
    • Checklist by The A11y Project. The most in-depth checklist I could find on meeting a11y guidelines. A bit more developer-centric, but UX designers will do well to familiarize themselves with these terms, ideas, and solutions.
    • Accessibility Guidelines Checklist by Vox Media. A thorough checklist of web accessibility best practices, broken out by design, dev, PM, QA, and editorial (writers). Solid resource.
  • Articles and reports
    • 7 Things Every Designer Needs to Know about Accessibility by Jesse Hausler of Salesforce. An in-depth, yet easy-to-read and example-laden on more a11y best practices.
    • Screen Reader Survey #7 by WebAIM. The largest survey of screen reader usage, this will start to give you a glance into the life of someone using assisted technologies. Which mobile platform are they highly likely to use? What disability type is by far the most common for those using screen readers? What is the most problematic element for screen readers to handle? It’s all in here, folks.
    • I Used the Web For a Day With Just a Keyboard by Chris Ashton. A non-disabled user investigates the biggest problems with using the web via keyboard. Includes code snippets for fixing various keyboard-related a11y issues.
    • I Used the Web For a Day Using a Screen Reader by Chris Ashton. A sighted user investigates the biggest problems with using the web via screen reader. Includes simple instructions for setting up a screen reader on your device, and code snippets for fixing various screen reader-related a11y problems.
    • Inclusive Components by Heydon Pickering. Perhaps more useful for developers than UX designers, it’s still worth understanding the sorts of things that developers will have to do to implement your designs accessibly. This site is chocked full of examples – with code snippets, even. Brilliantly done, and I can’t find another resource on the web that gives you so much information about screen reader parsing!
  • Videos
    • How I use Screen Reading and Magnification by Sam from The Blind Life. This 10-minute YouTube video is great because it shows – albeit only the slightest – peek into the world of using web and desktop apps using screen reading technology. That being said, I’d love to find essentially a longer, more in-depth version of the same. Please let me know if you know of any such videos!
  • Tools
    • Accessible Color Generator by Learn UI Design. Find the closest colors to your brand colors that meet accessibility contrast guidelines.
    • Stark. Extension for Sketch, Figma, and Adobe XD for (A) viewing your app as a colorblind user and (B) measuring color contrast accessibility. Free version is fantastic; paid version is $2/month.

HOMEWORK

Sample accessibility spec

Create an accessibility spec document for a page of a web app you’ve designed (either for this course or outside of it). For keyboard and screen reader concerns, it’s easier to test a page that’s already live. However, as this lesson shows, you can create specs for an as-of-yet undeveloped app. Please check color & contrast, keyboard navigability, and screen reader navigability as appropriate – e.g. not every app needs keyboard shortcuts. What would your users want?

When complete, post your report to the #3-design-patterns channel.

FOR YOUR PORTFOLIO…

Most beginning UX designers do not particularly mention accessibility in their portfolios, and this would be an excellent way to stand out to employers. In particular, if you’re targeting jobs or contracts at governments, NGOs, medical, design agencies, or the top tier of large tech companies, accessibility is an especially valuable skill. It’s a common trope in inclusive design that accessibility is not something you “sprinkle on top” – it should be baked into the design process. Nonetheless, the easiest way to call attention to it in a portfolio is to include it in at least one section header (for both screen readers and sighted users, as it is!). So even if you are mentioning it throughout your portfolio write-ups, I recommend including a section specifically devoted to it.

THE FUNDAMENTAL DICHOTOMY OF TALKING TO USERS

RESOURCES

USER RESEARCH: INTERVIEWING

RESOURCES

  • User Research Cheatsheet by Learn UX Design. My guide to user research via interview, including (a) sample questions, (b) best practices for interviewing, and © checklists of things to mention while beginning and ending a user interview.
  • Sample user research report by Learn UX Design. This is the report I typed up based on my video interview with Ethan about streaming movies/shows online.
  • Never Ask What They Want — 3 Better Questions to Ask in User Interviews by Chuck Liu. An experienced researcher gives some great examples of how to think while crafting user interview questions.
  • Interviewing Users by NNG. Mostly a rundown of some potential pitfalls of interviewing users. In this article, he recommends usability testing over user research.
  • Just Enough Research (book) by Erika Hall. A short book, and in my opinion, the classic read for those looking to get more into user research.
  • The 9 Rules of Design Research by Erika Hall. A free, Medium.com-hosted overview of the topic by the same author.
  • The Learn Startup (book) by Eric Ries. Approaches user research from the business and strategy side of working at a software startup. Fantastic read.
  • The Jobs-to-be-Done Mattress Interview (48-minute video) by Jason Fried on JTBD Radio. Another fun, live example of user research by design and business guru Jason Friend (of Basecamp, formerly 37signals).

HOMEWORK

You guessed it – you’re interviewing users!

Ultimately, you will interview 1-3 users in the context of a single app and post your report with learnings to the #research-testing channel of the student community.

Or, in a little more detail:

  1. Pick which project you’ll be interviewing users for . Start with wherever insight into how users think with be the most useful for you. Ultimately this is a process you’ll be going through many times (at least 3 times in this course alone if you’re on the portfolio track) – so you might as well start where you’re most excited to learn more.
  2. Determine the goal of the interview . This can be something very broad (“Determine what type of mobile experience to offer for our music festival”) or something fairly specific (“Figure out how to decrease guest services inquiries during the music festival by answering questions in our mobile app”). It can apply to entirely new apps, new features of existing apps, or even existing features that need to be reworked.
  3. Find 1-3 people you can interview . I recommend drawing from existing customers or people you personally know to have experience in the problem area you’re looking to solve. In our music festival example, past attendees who’ve recently purchased a ticket might make for great people to reach out to.
  4. Create a list of questions you’d like to cover . See Learn UX Design’s User Research Cheatsheet for a helpful checklist on this.
  5. Complete the interview(s) . This part should be the most fun, and by some measures, the easiest – but you’re always welcome to ask questions in #research-testing.
  6. Write a short report of your findings . Take care to organize your report by common threads, observations, and ideas as opposed to simply being a list of insights from each person. Note that in the sample user research report, I generalize a few threads that seemed to come up repeatedly in one conversation. Your report of 3 interviews will be similar – the main division is insights , rather than people talked to .

HOMEWORK #2 (JUST FOR FUN)

The NYT Magazine ran a feature on product design and development firms using anthropological research techniques, similar to what is discussed in this lesson. Ironically, the quality of questions asked by the researchers is abysmal . How many problems can you find with the questions asked?

FOR YOUR PORTFOLIO…

Ultimately, you’ll want to interview 3+ people for each project in your portfolio. Why? Because one of the most common mistakes in UX portfolios is not treating sample projects the same as you would real projects . So while this may seem excessive, especially if you are the user , let’s go the extra mile here – and stand out from the myriads of other beginning UX designers with less drive and motivation.

As always, pay special attention to the story arc of your project , as that’s what you’re telling with your portfolio. User research is the first time the user is contributing to your story, and may represent an unexpected plot twist. “I expected X, but found Y”, or “After doing these user interview, I think X and Y will be particular challenges of this project”.

It’s up to you whether you want to go through your portfolio projects one-at-a-time, or all of them at once. I have a slight recommendation to one-at-a-time. It’s not as efficient, per se, but going through the entire process once will give you insight that you can use right from the first steps of your second project. So once you’ve done enough research to inform your unanswered design questions for this first project, you’ll want to cycle back to the Fundamentals of Interaction Design unit.

Portfolio Track students: after the user research phase, you’ll begin interaction design. Head to Introduction to Sketch next (yes, the intro is still applicable even if you’re not using Sketch!)

DIGITAL PROTOTYPING

HOMEWORK

Create a click-through prototype for a project you’re working on and post the finished product to the #research-testing channel of the student community.

It’s not necessary to create a prototype for the entire app – merely one flow or task, ideally including potential error messages or other branches from the ideal path to the end of the task.

FOR YOUR PORTFOLIO…

While it’s not expected to create a click-through prototype for the portfolio directly, if you’re going to do any usability testing on your sample projects (and you should – as you’ll hear, it’s the most important thing you can do with your users to ensure high usability), then you’ll ultimately want to create prototypes to test those.

Note: for developers, while you should at least try the prototyping functionality in your design app of choice, you’re also welcome to create – and test – coded prototypes, as long as you’re able to keep them simple, quick, and low-fidelity.

USABILITY TESTING

RESOURCES

HOMEWORK

You guessed it – you’re conducting usability tests!

Ultimately, you will conduct 1-3 usability studies in the context of a single app and post your report with learnings to the #research-testing channel of the student community.

Make sure to include:

  • Your participants . How many are there (ideally 3-5) and who are they?
  • The task list . What are you having them do? Why those tasks?
  • The usability issues found . What stuck out to you – whether because it was important, easy to fix, or found repeatedly? Also include if any heuristics of interaction design apply to these issues.
  • Your analysis . How easy/difficult will it be to fix these issues?

FOR YOUR PORTFOLIO…

It’s not as strongly expected that you’ll usability test every sample project in your portfolio, but it would show a high amount of drive and dedication to the UX process.

I recommend testing at least one critical flow – especially where you think you can find errors (e.g. logging in would be slightly less interesting than something related to, say, data visualization) – for every sample project in your portfolio.

CREATING A DESIGN PORTFOLIO

RESOURCES

  • Portfolio Checklists by Learn UX Design . Two cheatsheets of sorts – the first for considering your portfolio as a whole, and the second with some reflective questions to help you create a good narrative out of your writeups.
  • How to Create a Great UX/UI Portfolio Without Much Experience on the Learn UI Design blog. A public, written guide covering a lot of the same stuff in this video.
  • The Case Study Factory by Fabricio Teixeira and Caio Braga. A lot of popular UX schools have been churning out beginning designers with extremely similar portfolios. Fabricio and Caio give their take on what’s wrong - and what to do instead. Worth the read.

In an ideal world, every designer would know enough HTML and CSS to hand-code their own portfolio. This allows you to have complete creative freedom and show your work in a totally unique way. In reality, many of us don’t know how to code proficiently yet, and a template site will be the easiest solution for now. Here are a few high-quality portfolio template sites:

  • Semplice. A popular option for portfolios. “By designers, for designers” captures their brand well – these templates look really nice, and the pricing is merciful.
  • Squarespace. A great all-purpose website builder that excels at portfolios. I found their editor to be intuitive and fast to use.

(Please let me know if you have experience with any of the above – or want to add another one to the list!)

FOR YOUR PORTFOLIO…

If you’ve started this course intending to create a portfolio, you’ve already done some of the reflections necessary to create a focused, employer-oriented portfolio. Your homework for this lesson, before necessarily beginning a single project, is to fill out the Portfolio Checklist linked above (first link in the resource section).

When complete, you can post your results to the #5-communicating channel for feedback.

After gaining a high-level overview of the way in which you will talk about your projects, it’s time to actually start one in earnest – with user research! Continue watching Learn UX Design at The Fundamental Dichotomy of Talking to Users. We’ll see you there!

PRESENTING & GETTING GOOD FEEDBACK ON YOUR DESIGNS

RESOURCES

  • How to Give Me Really Useful Feedback cheatsheet by Rob Williams. An awesome one-pager you can hand to your clients at the beginning of a project or presentation. I’ve done it for many of my own clients. Since I’m doling out unasked for advice, I also remind my clients that I love them and want them to succeed at everything they do, including giving me feedback!
  • Design is a Job by Mike Monteiro. Mike is the father figure every designer needs. This book is a no-nonsense guide to client work, and I’ve taken a TON of ideas from it, both in this lesson and in my career. Absolutely worthwhile. Oh, and if you ever have trouble getting paid by a client, you might want to watch this memorably-named talk of his.
  • Sean Wes Podcast. Sean McCabe’s podcast is another great place to learn about client work. You’ll notice a lot of similarity in the ideas here – he’s another big inspiration. I’ve linked to one of my favorite episodes, but there are plenty to choose from.

HOMEWORK

Easy homework day! What lesson or idea from this video will you apply first? Post it in the #5-communicating channel of the student community.

3 симпатии
#2

@Andrew.Kaluba
Please also update Learn UI design course by Erik Kennedy. Enrollment closes in 2 days. Its urgent.

2 симпатии