A Few Scenarios for Practicing UX

I’ve had some friends ask how they might go about getting a UX design job. The short answer is make things & develop a portfolio. The longer answer involves culturing a mentality and mastering process. But sometimes it’s hard just to think of things to make. Design is not art – it can’t just exist for the sake of existing. It must solve a problem. Let’s imagine up some problems to solve.

1. A library wants to engage with kids as they first walk into the children’s book department. They plan to install a series of large touch screens. What would the goals of the engagement be? How can the library experience be enhanced for kids aged 5-10 through using technology? Make assumptions, develop personas, interview questions, user story map, wireframes, comps, prototype.

2. An insurance startup is developing a mobile app that allows users to quickly log incident details, take photos, and capture all relevant details. Assume ‘green pastures’ for all technology needs and fabricate incidents to illustrate usage. What factors will be considered in establishing a user flow and interface? How can visual identity not only serve to make a brand impression but to facilitate user actions? Develop personas, interview questions, user story map, wireframes, comps, prototype.

3. A pet store / museum / aquarium is developing a tablet experience for kids / adults / customers to buy / learn about the live creatures on display. Choose a set of parameters and make reasonable assumptions. What are the viewer’s goals as they are using the tablet? What are they trying to achieve, and what does the store / museum want them to care about? How does the content (live animals) change the way you present information? Personas, wireframes, you know the drill.

4. Happy John’s Burgers is a revolutionary, human-less food experience. Each table is a 6-10 person food preparation center and users wield a custom joystick to select their preferences. HJB needs a menu experience that should incorporate gestures, facial / voice recognition, and brings custom precision to the ordering and paying experience. How does the software inform users what options are available? How does the human-less environment change the way the software is designed? What frustrations would users be likely to experience, and how might you provide solutions in advance? How can look and feel impact the customer experience?

5. You are in the year 2350 in a crowded, heavily polluted city, and most people sleep in sleek glass climate-controlled bed-pods. When lying down, a screen appears above you. How can these futuristic bed-pods-screens provide a useful, comforting experience that users will spend many hours in at a time? Using voice and gesture controls, users can control their environments. How else can these pods provide utility to users? Perhaps they also serve as an entertainment center, or as an external screen for the user’s personal devices. Wireframe this experience, low fidelity. Find billionaire, pitch, repeat.

Other useful activities for developing a UX mindset:

  • Organize the hell out of your grocery list. How are products dispersed through the store, what items are grouped together, and why?
  • Walk into the entrances of 10 stores in a mall, pause, and inspect. What user actions are visible from your standpoint? How much of the user journey is evident from that point – is at least the next step indicated, or some directionality given? How is this achieved? Apply this to supermarkets, amusement parks, hospitals.
  • Screenshot and tag examples of design precedent everywhere you see it. Icon styles, dropdown/flyout styles, interesting bits of layout or typography, compelling uses of color. While UI design often requires a good amount of originality, it’s unwise to reinvent wheels needlessly – rather, it’s critical to use existing norms and conventions enough so that users can immediately recognize elements and understand what’s going on.
  • For all of the scenarios presented above, revisit them through the lens of accommodating users with disabilities. Decent article about that here.
  • Each of these projects should take you two weeks or more. Rushing a process won’t make you learn faster. If you need more work, work on two projects. Separate your work into phases, and keep yourself constrained. Get a Gantt chart going if it helps. If you run out of work to do in a phase, start a new sketch document and try to wireframe Wikipedia’s home page without looking at it. What do you think the designers at Wikipedia chose for the home page to present? What do they want people to use it for, and what would users want to use it for? What assets does Wikipedia have to display? What does Wikipedia want from its users, and how do they obtain it?

Hope this helps someone!

5 Subtle UX flaws in Safari (that Chrome gets right)

Sometimes, design flaws are only apparent after having experienced a solution. Especially when they are really, really subtle. Most people won’t care about these nitpicky points, but for the few who do…

This post is not meant to be comprehensive. I’m sure there are plenty of mitigating benefits to both browsers when thoroughly compared. However, as a long time Chrome user recently having switched to Safari, I’d like to complain a little bit about a few Safari UX flaws in contrast to Chrome’s solutions.

1. Netflix

Along with 40 million other people, I use my laptop to watch Netflix. Like many other people, I’m used to pressing the space bar to pause the video. The issue here arises when I fast forward or rewind by using the arrow keys. In Safari, after 1) pausing the video, and 2) pressing an arrow key to jump forward or backwards, pressing the space bar triggers the episode selector, not play/pause. Sometimes. This depends on whether you’ve clicked on the video since having pressed play. The result is that I have to find the pointer, click away from the episode selector, and then press the space bar to resume watching.

*hits play and falls onto couch*
*video doesn’t start*

giphy

When viewing Netflix in Chrome, the space bar, without fail, toggles between play & pause. Simple, predictable, intuitive… thanks Chrome 🙂

2. Closing tabs

When you close a tab in Safari, it brings you to the tab immediately to the left of the one you closed.

When you close a tab in Chrome, it brings you to the tab that you had been viewing previously.

Say you’re reading an article. You come across a claim of dubious veracity and decide to open a tab, search the phrase, find an answer, and close the tab to resume reading. But instead, Safari brings you to the next tab in the list, which has nothing to do with your article. So you switch tabs until you arrive at the right one, sometimes distracted by the other trains of thought you encounter on the way.

It is software’s job to get out of the way of users’ thought processes and facilitate the completion of our tasks. Safari just got in the way. 

3. Dragging an image into a tab

In Chrome, I can click & drag an image from anywhere, hover over a tab, that tab would open, and I could place the image wherever within that tab  — say, a wordpress post composer, or an email client.

In Safari, you can drag an image from anywhere, but hovering over a tab does nothing. The solution is to simple enough – right click, copy the image, and then paste it where you’d like to go (or download the image, upload to imgur etc). But dragging and dropping is so nice… This is not a ‘flaw’, per se, but a feature I’d like to see replicated in Safari.

4. Bookmarks

Bookmark issues, sadly, can be found in both Chrome and Safari.

After importing my bookmarks from Chrome, I spent an hour or so managing my Safari bookmarks, rearranging them, deleting copies from previous imports, etc.

The next time I quit and reopened Safari, it had reverted back to the way it had been initially. I have no idea why. Maybe it synced with iCloud? Maybe I imagined managing my bookmarks in the first place? Thanks, Safari, for making me doubt my sanity.

In Chrome, one time I decided to try sorting my bookmarks alphabetically. It quickly became apparent that this was not helpful in locating the link I was looking for, but I couldn’t find any way to undo that action. Apple + Z did nothing. There was no obvious ‘revert to original’ or ‘sort by date added’ button. I could be (and probably am) missing something here, but that single click of the mouse turned 400+ links, once a chronological representation of my ‘entrepreneurship’ themed internet explorations, into a list of links that I now find largely useless beyond using the search function.

Finally, in both Chrome and Safari, recovering lost bookmarks is WAY more difficult than it should be. The search ‘how to restore lost bookmarks Safari / Chrome’ (which pops up in suggestions immediately) returns these helpful tidbits from Google:

As an average computer user, I should never have to dive into my computer’s system files just to find the epicurious recipe that I bookmarked last August. All it takes is a single tap of the delete button and the bookmark (or bookmark folder!) is gone, with no recourse except for locating/restoring the bookmarks file on your computer. This should be fixed!

5. Quitting

Say you’d like to close a tab. Generally I hit command + W. But what if you miss?

One tap of command + Q and it’s all over, folks. Safari quit. Then you wait for it to finish quitting, restart Safari, restore all tabs, youtube videos start playing, and three minutes later you’re back to where you started.

But Chrome has my back. Simply tapping command + Q triggers this message, Hold Q to quit. Brilliant!

hold-command-q-to-quit-e1420435893638

 

And for anyone wondering why any sane person would ever switch from Chrome to Safari, unfortunately I found that Chrome was crashing my computer. I don’t know why, but after a few weeks of spectacular glitchy frozen screens and holding down the power button to reboot, I abandoned ship and begrudgingly moved Safari back onto my dock.

Screen Shot 2016-02-13 at 1.58.44 AM.png

Mmm glitchy

 

And … Sealed is closer than ever. To be part of the next wave of beta testers through TestFlight, sign up here!!

The Most Important Screen

The time delay screen is the core of Sealed. It needs to be an exciting, delightful experience to scroll into the future. How exactly should it look?

In contemplating the design for this screen, I’ve kept an eye out for apps that use a prominent circle to perform an action or to display data. Here’s a smattering of what I’ve come across:

At this point, I’m happy with the notion of dragging an item around in a circle to increase the time delay. The action itself should be just about universally understood: things rotate clockwise, whether it be an analog clock, a planetary system, or an iPod scrolling through music. I’m confident that people will see this screen and know what to do.

The decisions to be made here are basically cosmetic. How thick is the line? How much data should I show the user (hours, days, months, years?) To gradient or not to gradient? To introduce a new color or to keep with the theme? How can this experience sparkle?

I feel like I’m missing an animation, but I have a hard time thinking in motion. Maybe the button swells when you tap + drag it? Maybe it changes color with each revolution?

Sealed_5-46

I’m hesitant to gradientify the whole app, but it is a common trend and does tend to cause people to call the design “beautiful”. Is it clear? Will it feel special? Is there a happy medium?

Also, I’ve recently begun to take to Tumblr to post my screenshots, which I collect aggressively whenever I come across a piece of design that is interesting to me. Ads, apps, marketing done well and poorly, tech, future-tech (my favorite)… if the Internet has taught me anything, more social media is always better than less!!!!!

Sealed_5-46