Posts about Interface Design


A Public Display of Interface

Graphic Design from the Collection, May 14–October 23, 2016, SFMOMA, Floor 6

The last time I visited SFMOMA was 3 years ago, just before they closed for a major expansion of the museum. I worked on an interface that had just won an interaction design award several months prior to my visit and was on a designer’s high, daydreaming as I walked through the museum, wondering, would a modern art museum, like SFMOMA ever feature the design of something like an interface? Maybe I could be part of that history, contributing to an innovative interface or at least one little icon. 


Amused by the idea that one day there could be an exhibition detailing the mode of interface style throughout the years, I imagined the possible exhibits celebrating a functional, digital aesthetic.

Consenting Affordances: Web vs. Desktop and their Lovechild, Mobile

Wistful Analog: Skeuomorphism and the Rise of Flatland

Extravagant Limitations: Evolution of the Application Icon

Window Shopping: The Armors of Netscape, Explorer, Firefox, and Chrome


Could something like a 16x16 icon be on display in a modern art museum? Would something so tiny and digital be considered too silly and insignificant to rest under the same roof as a Rauschenberg, O'Keefe, or Warhol? With the awakening of a new SFMOMA, the interface daydreaming stopped and revealed a new reality: the recognition of an artform whose infancy rivals that of Pop Art but until now has yet to be collected, to tell a new story, found on floor 6 in the exhibit: Typeface to Interface.

Typeface to Interface.

I was reunited with those interface exhibition dreams during the opening of the overwhelmingly airy and far-too-much-to-see-in-a-day new SFMOMA. The 170,000 square feet of exhibition space turns the museum into one of the largest art museums in the United States (larger than the New York MOMA and The Getty Center in Los Angeles) making SFMOMA one of the largest museums in the world specifically focusing on modern and contemporary art. 

The exhibit takes selected work from the museum's permanent graphic design collection (spanning as far back as 1950) and joins it with examples of graphic design that has shaped the development of the interface – our modern day means of visual communication. Posters, visual communication systems, and annual reports are interwoven with a variety of technology platforms: the desktop interface, the stylus, and the mobile touchscreen – the tools and methods we’ve used to communicate via the interface. Underlying all of this are the foundations of visual design and as a result an understanding of human behavior.

Read More

With the awakening of a new SFMOMA, the interface daydreaming stopped and revealed a new reality: the recognition of an artform whose infancy rivals that of Pop Art but until now has yet to be collected, to tell a new story, found on floor 6 in the exhibit: Typeface to Interface. 

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

UX vs UI

This is a topic many people have discussed before — the difference between UX and UI. We have all fallen into the trap at one point or another. I often times use the two terms interchangeably to tell my family and friends ‘what exactly it is that I do.’ Sometimes it just seems easier.

But, if you know me in a professional sense, you’ll know that I’m passionate about creating seamless holistic experiences that cross all mediums, platforms, channels etc. One of my biggest pet peeve is when a UXer is encouraged (often times naively) to be an ‘interface designer’ or to take on both roles at the same time.

Read More

This is a topic many people have discussed before — the difference between UX and UI. We have all fallen into the trap at one point or another. I often times use the two terms interchangeably to tell my family and friends ‘what exactly it is that I do.’ 

Read More

Easy win: Mac OS

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 copying and pasting in Mac OS. Hey, Apple! Here’s an easy win.

So you've copied a couple of files in Mac OS and you need to paste them in a folder with a lot of other files. You navigate to that folder, which you like to keep in list view, and right click to get the contextual menu where you expect to see a paste option.

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 copying and pasting in Mac OS. Hey, Apple! Here’s an easy win.

Read More

What does Pair Design look like?

If you’re trying to figure out whether Pair Design is right for you or your organization, it’s useful to have a model of what it looks like across an interaction design project. So, let me paint you a picture.

I’ve broken down our typical goal-directed design process into broad phases that should be relatively easy to map to your own. But, if this is your first time reading about Pair Design from Cooper, I recommend reading up on the distinctions between the generator and synthesizer roles I’ve written about before, as I’ll be referencing those terms

Read More

If you’re trying to figure out whether Pair Design is right for you or your organization, it’s useful to have a model of what it looks like across an interaction design project

Read More

Visual Design for White Labelled Products

Designing a product with the intention of being “white labelled” means that you are creating a software for a client to incorporate into their existing (visual language) system. Every now and then design consultants are hired by another consultant to work on a third party’s existing system. This what you call a super white label. Here, you not only have to consider your client’s needs, but your client’s client’s needs, too. It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end. These are some basic tips I’ve found that to help start and manage a white labelled project. 


It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end.

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

Why Design Documentation Matters

At Cooper we design products that empower and delight the people who use them. Design documentation is integral to our process because it communicates the design itself, the rationale for decisions we made, and the tools for clients to carry on once the project wraps up.

Good design documentation doesn’t just specify all the pixel dimensions and text styles and interaction details (which it must). It can also tell the high-level story, stitch together the big picture, and get internal stakeholders excited about the vision. One of our primary goals as outside consultants is to build consensus and momentum around the design—documentation can speak to executives as well as developers. After all, we’re usually leaving a lot of the hard work of design implementation on the client’s doorstep, and building great software starts with getting all the stakeholders on board.

Design documentation should create trust and provide consistency for future iterations of the design thinking. We believe it’s important to give the rationale and context behind design decisions. Answering the “why?” of design helps new team members get on board down the road, prevents wasted effort later when old questions get rehashed, and provides the starting point for prioritization and roadmap discussions. This facet of the process is too often overlooked or omitted for expediency, but trust us: clients will thank you later.

The best design documentation gives the client a unified design language, a framework for talking about the design, and a platform for improving the design over time. Static documentation is quickly becoming a thing of the past—we’re always looking for new documentation techniques and delivery mechanisms because we want to equip our clients with the most approachable and actionable information possible. Delivering design documentation marks the beginning of the client’s journey, not the end.

At Cooper we design products that empower and delight the people who use them. Design documentation is integral to our process because it communicates the design itself, the rationale for decisions we made, and the tools for clients to carry on once the project wraps up.Good design documentation doesn’t just specify all the pixel dimensions and text styles and interaction [...]

Read More

Designer’s Toolkit: Road Testing Prototype Tools

For fresh content, more tools, and updated reviews check out the Prototyping Tools page.

We’ve all been there: you’ve got a few days to throw together a prototype. For expedience sake, you go to one of your large, well known tools to get the job done. The files quickly become bloated and crash—hours of hard work lost. There’s got to be a way to create prototypes at a similar level of fidelity with a lighter weight tool.

After test driving some alternative prototyping tools I discovered that there are indeed other good options. Here is an overview of what I found, followed by assessments of each tool, with hopes it will help fellow designers in the prototyping trenches.

Choosing the tools

After researching existing prototyping tools, I narrowed a long list of about 40 to a small set of 10 that looked the most interesting. Some factors that influenced which tools I selected include: 

  • Hearing about the tool from fellow Cooperistas or other colleagues.
  • The popularity of the tool based on what I read in other blogs. 
  • Whether it looked cool or exciting from  my first impression of the design and features. 

This is not a comprehensive set of tools, but includes the ones that I was interested in checking out. 

 

Read More

For fresh content, more tools, and updated reviews check out the Prototyping Tools page. We’ve all been there: you’ve got a few days to throw together a prototype. For expedience sake, you go to one of your large, well known tools to get the job done. The files quickly become bloated and crash—hours of hard work lost. There’s got to [...]

Read More

Interaction13 - Day 1 Recap

Seeing some old friends at Ixd13!

Here are some of the programs Cooperistas attended on Monday at Interaction13.

Follow all of Interaction13 through daily recaps on the Cooper Journal. Here's Day 2, Day 3, Day 4.

Smart & Beautiful: Designing Robots & Intelligent Machines

By Dr. Matthew Powers (Carnegie Mellon University)


We make robots that mimic human bodies to do the 3D jobs (dirty, dull, and dangerous – ex. strip mining), but there is so much more potential in intelligent machines than just this. As designers, we need to take a step back and think about the design implications of robots and intelligent machines working in our world.

We already have robots in our houses.

Nest learning thermostat is a robot. This product is a perfect example of cooperation between robotics and designers. it is intelligent and well designed so the user isn't obligated to manually input data.

Call for action for Designers:

We need to move from solving robotics problems to solving problems with robotics.
Robotics provides tools. Design grounds robotics into practical problem and brings a more human approach to a field that is by definition inhuman

At the end of the talk, Dr. Powers threw out this doozy:

Will it be the role of designers, engineers, and/or policy-makers to decide the “ethics” of robots? Who decides how an automated car would make the choice between hitting a bus full of children or a pedestrian?

Read More

Seeing some old friends at Ixd13! Here are some of the programs Cooperistas attended on Monday at Interaction13. Follow all of Interaction13 through daily recaps on the Cooper Journal. Here's Day 2, Day 3, Day 4. Smart & Beautiful: Designing Robots & Intelligent Machines By Dr. Matthew Powers (Carnegie Mellon University) We make robots that mimic human bodies to do [...]

Read More

1 2 3