Posts about Critiques


Stretching Google Material to make better desktop navigation

My revised “Single Artist” view for Google Music: it allows for better horizontal navigation across albums and artists 

a.k.a., Making Google Music (on desktop) more like iTunes 

a.a.k.a., Tweaking Google Material for broader data sets 

a.a.a.k.a., Google Music annoys me sometimes, so I drew up some fixes instead of just getting over it like I probably should

Original article posted on Medium.

I like Google Material. It’s a well-documented and thoughtful end-to-end visual/UI language that’s adaptable to a lot of consumer apps. It’s obviously a mobile-first UI language: the card-first patterns are highly tangible and tractable, and its navigation structures tend to be very vertical. Take, for example, Google Music’s navigation structure:

The current Google Music navigation structure, from library to song 

This highly “vertical” navigation structure tends to work well on mobile devices: you don’t have the space needed for persistent on-screen navigation, and (perhaps) mobile use cases trend towards finding a particular item rather than, browsing around. But when you apply this pattern to desktop, you see limitations: that’s a lot of navigating up and down (a version of “pogo sticking”) if you’re navigating across multiple categories… think, “I want to listen to something from my music library, but am not positive which artist/album/song I want to listen to yet.”

A sampling of Google Music’s current desktop screens (June 2016). Lots of white space 

On desktop, Google Music's simple, vertical navigation leads to lots of white space, heavy-handed photography, and "clicky" navigation.*

While the “browsing” scenario I described above isn’t necessarily common — in fact, Google's research may have found that users tend to look for something specific in the app, so that’s what it’s optimized for — browsing can still be accommodated. Just look at the classic (and current) iTunes app navigation: persistent, scrollable list menus with immediate selection and visual feedback.

*It’s puzzling that they don’t at least use back arrows on Desktop (as they do on mobile) to help the user go back up the navigation ladder. This leads to troubling “get me outta here!” moments.

An older version of iTunes (left), and a newer version (right, June 2016). Plenty of persistent navigation.

I wanted to emulate some of this on Google Music’s desktop site, using Material Design, without breaking Material’s established patterns. I think I partially succeeded by employing some “cheats” that Google has used on other Material products. I also spruced up some of the UI according to my own tastes (sorry, couldn’t help it).

Read More

Using Google Music's Desktop app as an example, we try to improve the navigation of a Google product using only elements from the Google Material toolbox.  

Read More

Presidential Election 2016: The Best UI

With each leap year comes a new race to the White House. Candidates are constantly being compared with regard to their positions on health care, international policy, civil rights, and the economy. However, one important issue has fallen off the radar this election: the strength of design of the leading candidates' websites. In this article, I'll compare and assess the designs of the five leading candidates' official campaign website homepages.

Disclaimers 

  • Candidates were selected based on their performance in the primaries at the time of this writing.
  • Candidate names are displayed in alphabetical order.
  • The messaging and imagery of candidate sites can (and do) change on a daily basis.
  • Content may appear differently depending on when you view the site.
  • The websites were viewed in New York City using Google’s Chrome browser. Content may appear differently depending on where you are.

Splash Pages

With the exception of Donald Trump, nearly all of the candidates’ websites use a redirect to a splash page in an attempt to solicit campaign donations or get users to join their cause. All of these splash pages appear on a user’s first visit to the site and most contain a hard-to-find call to action to reach the actual website.

Besides Donald Trump, who does not have a splash page at all, Hillary Clinton has the least obtrusive splash page -- mainly because it isn’t truly a splash page. Most times her site displays a small, easily dismissible pop-up, over a full-screen, transparent background. On rare occasions, after clearing cookies for the site in order to view it as a first time user, an actual splash page appears, asking for donations.

Ted Cruz and Bernie Sanders sometimes display a splash page to promote an upcoming state’s primary or to gather support and collect donations after a win.

Marco Rubio appears to have a persistent splash page for first time visitors, which is always displaying a donation module.

Splash Page Comparison 

Read More

With each leap year comes a new race to the White House. Candidates are constantly being compared with regard to their positions on health care, international policy, civil rights, and the economy. However, one important issue has fallen off the radar this election: the strength of design of the leading candidates' websites. In this article, I'll compare and assess the designs of the five leading candidates' official campaign website homepages.

Read More

Against Infinite Scroll

I was recently part of a Cooper Slack conversation about infinite scrolling navigation.

"I hate infinite scroll," I said. 

"👆," several people responded. 

"But why?" asked someone else.

In my worldview, infinite scroll has three major failings. I’ve listed them here from least to most important. 

Read More

A user experience critique of infinite scrolling as a navigation pattern, based on a Slack conversation with colleagues at Cooper. 

Read More

The color of empathy is not flat: Insights to Color Blindness & Design.  

Line, motion, space, texture, size , form, shape, typography, and color.

As a member of the 9 structural units, or elements of visual interaction design, the role of color is integral to the way we communicate, parse, and enhance information on and off the screen. In an attempt to simplify human interaction with the digital interface, designers have pursued the style of a “flat UI”. This bare-bones approach relying mostly on rectangular shapes and solid, flat color is meant to place a user’s focus on content. The visual shift from skeuomorphism to flatland also helped to foreshadow a product’s ease-of-use by dramatically simplifying how the interface looked. 

Read More

Designing for color blindness (aka Daltonism) is an example of how designers can practice visual empathy and learn to experience the world from someone else’s perspective.

Read More

Easy win: Citibank

Being an interaction designer means you’re aware of improvements that can be made in the things you use every day. This one is about a dropdown in Citibank’s password recovery flow. Hey, Citi! Here’s an easy win.

So you’ve set up your Citi credit card to autopay, and don’t recall your password on the odd time you need to log in. You go to reset it, provide the identifying information, and click Reset Password, only to have the page stop you with some red text and inform you that you missed a required field. A required field with only one possible selection.

Read More

Being an interaction designer means you’re aware of improvements that can be made in the things you use every day. This one is about a dropdown in Citibank’s password recovery flow. Hey, Citi! Here’s an easy win. So you’ve set up your Citi credit card to autopay, and don’t recall your password on the odd time you need to log [...]

Read More

Easy win: Twitter

Being an interaction designer means you’re aware of improvements that can be made in the things you use every day. This one is about the notifications in Twitter’s iPhone app. Hey, Twitter! Here’s an easy win.

So you’re on your iPhone when it buzzes in your hand. Hey, neat! A Twitter somethingorother. You open the app, only to see that there are no notifications for your current Twitter profile.

That’s cool. It must be for one of the other Twitter profiles you use. So you open the list of profiles only to see…nothing. No hint of where this little tweet of goodness awaits you.

Read More

Being an interaction designer means you’re aware of improvements that can be made in the things you use every day. This one is about the notifications in Twitter’s iPhone app. Hey, Twitter! Here’s an easy win.So you’re on your iPhone when it buzzes in your hand. Hey, neat! A Twitter somethingorother. You open the app, only to see that there [...]

Read More

Easy Win: Photoshop

Being an interaction designer means you're aware of improvements that can be made in the things you use every day. This one is about the crop tool found in the most popular digital image manipulation software, Photoshop. Hey, Adobe! Here's an easy win.

Easywin01.png

Read More

Being an interaction designer means you're aware of improvements that can be made in the things you use every day. This one is about the crop tool found in the most popular digital image manipulation software, Photoshop. Hey, Adobe! Here's an easy win.

Read More

Planets Don't Have Orbits

 

 

I heard an argument forwarded by Andrew Hinton way back in Dublin at the Inteaction12 conference. The short form goes like this: "Users don't have goals." (UDHG for short.) Being a big believer in Goal-Directed Design, I thought the argument to be self-evidently flawed, but since it came up again as a question from a student at my Cooper U class in Berlin, I feel I ought to address it.

Are there, in fact, goals?

Given just those four words, it seems like it might be about users actually not having goals. But of course, goals do exist. If they didn't, why would anyone get out of bed in the morning? Or do work? Or make conference presentations? If we didn't have goals, nothing would be happening in the world around us. But of course we do we do get out of bed. We do work. We write blog posts. All because we have reasons which—for clarity—we call goals. This example illustrates that what UDHG really means that most people don't have explicit goals.

Read More

I heard an argument forwarded by Andrew Hinton way back in Dublin at the Inteaction12 conference. The short form goes like this: "Users don't have goals." (UDHG for short.) Being a big believer in Goal-Directed Design, I thought the argument to be self-evidently flawed, but since it came up again as a question from a student at my Cooper U [...]

Read More

Design > Critique > Repeat

There’s a lot of writing out there on how to run a productive critique.

One of my favorites is by Jake Knapp of Google Ventures where he lays out nine rules to follow. For example, one great rule is to write it before you say it - this requires 5-10 minutes of silent time to look at the work and write down your initial reactions. It allows you to respond to the work individually – eliminating groupthink. Scott Berkun also wrote a great guide on setting up a critique and goes into the details of specific questions to ask and what materials you’ll need.

So you’ve followed the best practices and just had a super productive critique.

 

Now what?

Read More

There’s a lot of writing out there on how to run a productive critique.One of my favorites is by Jake Knapp of Google Ventures where he lays out nine rules to follow. For example, one great rule is to write it before you say it - this requires 5-10 minutes of silent time to look at the work and write [...]

Read More

Your Flat Design is Convenient for Exactly One of Us

Illustration built on creative commons 2.0 Portrait of a Man by Flickr user and photographer Yuri Samoilov

I’m OK with fashion in interaction design. Honestly I am. It means that the field has grappled with and conquered most of the basics about how to survive, and now has the luxury of fretting over what scarf to wear this season. And I even think the flat design fashion of the day is kind of lovely to look at, a gorgeous thing for its designers’ portfolios.

 

But like corsets or foot binding, extreme fashions come at a cost that eventually loses out to practicality. Let me talk about this practicality for a moment.

In The Design of Everyday Things, Donald Norman distinguished between two ways that we know how to use a thing: information in the world, and information in your head.

 

 

Information in the world is stuff a user can look at to figure out. A map posted near the subway exit is information in the world. Reference it when you need it, ignore it when you don’t.

 

 

Information in the head is the set of declarative and procedural rules that users memorize about how to use a thing. That you need to keep your subway pass to exit out of the subway is information in your head. Woe be to the rider to throws their ticket away thinking they no longer need it.

For flat design purists, skeuomorphism is something akin to heresy, but it’s valuable because it belongs to this former category of affordance: it is information in the world. For certain, the faux-leather and brushed-aluminum interfaces that Apple had been pumping out were just taking things way too far in that direction, to a pointless mimicry of the real world. But a button that looks like a thing you can press with your finger is useful information for the user. It’s an affordance based on countless experiences of living in a world that contains physical buttons.

Pure, flat design doesn’t just get rid of dead weight. It shifts a burden. What once was information in the world, information borne by the interface, is now information in users’ heads, information borne by them. That in-head information is faster to access, but it does require that our users become responsible for learning it, remembering it, and keeping it up to date. Is the scroll direction up or down this release? Does swipe work here? Well I guess you can damned well try it and see. As an industry now draped in flat design, we’ve tidied up our workspace by cluttering our user’s brains with memorized instruction booklets for using our visually sparse, lovely designs.

So though the runways of interaction design are just gorgeous right now, I suspect there will be a user-sized sigh of relief when things begin to slip a bit back the other way (without the faux leather, Apple). Something to think about as we gear up our design thinking for the new year.

Illustration built on creative commons 2.0 Portrait of a Man by Flickr user and photographer Yuri SamoilovI’m OK with fashion in interaction design. Honestly I am. It means that the field has grappled with and conquered most of the basics about how to survive, and now has the luxury of fretting over what scarf to wear this season. And I [...]

Read More

1 2 3 4 5 6