cooper

Visual design

sCoop: Week of April 30

Life at Cooper

Photo

Cooper recently brought back the Friday Afternoon Social Hour! Everyone enjoyed Suzy's seriously strong sangria and tasty tapas, and the great conversations in this all around good time. If this sounds like how you'd like to wrap up the work week, join us! We are currently looking for a Business Development Manager.

See more of our life at Cooper on our Tumbler

Sketch 2.0 Released

sketch2

*Download the sample .Sketch file from my Dribbble account.

Sketch 2.0 is a new Mac application designed to be what Adobe Fireworks has struggled to become: the defacto standard for interface design. With a toolset targeting the professional user interface and icon designer, Sketch seems to be headed down the right path.

Sketch is not without its issues and may not be mature enough to replace Photoshop or Fireworks as of the version 1 release; however it's an excellent start and well worth your time to checkout.

Several of us at Cooper are very excited by Sketch, so expect a more detailed review soon. In the meantime, checkout Sketch for yourself.

The Monoprice Graphics Tablet

*Video Monoprice Graphics Tablet line quality by Ray Frenden.

In the world of drawing tablets, there is Wacom and...umm...well...nobody else. That's what I thought before I read Ray Frenden's review of the inexpensive Monoprice graphic tablet "The Little Monoprice Graphics Tablet That Could."

With a starting price of under $50 for a 10X6.25 inch graphic drawing tablet, the Monoprice tablet seems too good to be true. After reading Ray's review and a quick twitter search of other Monoprice tablet users, I've become a believer and am seriously considering replacing my Wacom Bamboo tablet.

Checkout the Monoprice tablets for yourself; it just might save you a couple hundred bucks.

Stay up-to-date with your favorite web service feeds

Feeds

If you're a Basecamp, Github, Dropmark, or Dribbble user, you might find Feeds interesting. Feeds lives in your menu bar monitoring your favorite web services, notifying you when new content is posted.

Dialoggs enters private beta

dialoggs

Dialoggs is a new web service that just entered it's private beta phase. Dialoggs describes it's self as a combination of Twitter, Facebook's privacy controls, and Tumbler's multimedia features.

Dialoggs allows you to follow people and send public and private messages just like in Twitter. What separates Dialoggs from Twitter, and what I'm most excited about, is Dialoggs ability to have long form conversations. Not having to worry about how many characters I have left? Priceless!

 

If your interested in learning more about Dialoggs, checkout "Introducing Dialoggs."

Follow the creators on Twitter to win invite codes to Dialoggs: @drewwilson, @ammmir

Dialog.gs Website

 

Interacting with media across multiple devices

 

With the rise of mobile devices, more and more I need to be able to move files from my desktop to my mobile devices. Apple, Google, and Microsoft, along with several other third parties, have developed solutions but nothing that delivers a truly seamless user experience. Interaction designer Ishac Betran, in his article "Watch This Ingenious UI Idea For Dragging Files From Your Phone To Computer" details an elegant seamless drag-n-drop solution.

iPad Keyboard Prototype

 

Another interesting concept is the "iPad Keyboard Prototype" created by Daniel Chase Hooper. The video demonstrates a simple, intuitive way for simplifying text editing on the iPad. Instead of tap-and-hold to edit text, the user can swipe the cursor around the text block to quickly edit the text.

App pick of the week: Track 8

IPad ui

Track 8 brings the Metro experience to your iPad in a slick music player, allowing you to browse your music in an immersive visual experience.  

Checkout Track 8 for yourself.

 

What do you think? Join the conversation in Comments

Elevating the brand and visual strategy with the experience workshop

Defining and creating a memorable experience for your customers is no easy task. Product owners and development teams can easily rattle off ideas to designers about what features are necessary to stay competitive. But if you ask them to share their vision for the overall more subtle emotional aspects of the experience, they often get quiet or resort to the familiar old UI clichés of "simplicity, intuitiveness, etc." This means that you often start your design work with less insight than you need to drive visual and interaction design.

Enter the experience workshop - a collaborative meeting and setup where clients can really talk about what a great experience can feel like among a sea of inspirational images, digital interfaces, products, services, brands, cars, textures, and more. Companies that build digital products and services are engaging in a new level of competition; it's no longer good enough to deliver a usable product. Our designs must reach an aspirational vision that elevates the experience beyond mere usability, and a visual, collaborative workshop pushes people to explore and discuss the possibilities.

The workshop helps teams discuss what attributes are inherent in these other experiences that are meaningful to the experience they're defining. After a process of prioritization and discussion, the end result is often a huge cloud of ideas and words that sit on a spectrum from a poor experience to an ideal experience. The examples aren't what's important for our output. We collect insight from the discussion, the words, that help us define the ideal experience.

The workshop brings teams together to learn and collaborate on the experience. What I love most about this activity is the connections made from people across different teams that can relate on a personal level because of their shared experiences. It's not just a visioning exercise for the future; it's a team-building event.

Check out the above video to see a glimpse of the workshop in action. And if you want to learn more about how to conduct a workshop and integrate this new approach into your company, you can sign up for an upcoming Cooper U Visual Interface Design course. In fact, we have just a few spots left in next week's class (May 7-8), if this post left you inspired...

What do you think? Join the conversation in Comments

Stay inspired with Evernote

As long as I can remember, I've maintained an library of inspirational imagery. I'm always consuming visually appealing material, so if I find something, I grab it, whether it's an interesting font, photograph, texture, color palette, icon, or UX pattern. Growing as a visual designer means keeping up with the ever-shifting trends and visual innovations out there in the world, and a library of inspiration can be a place to stockpile the state-of-the-art.

Just about anything can inspire visual creativity. Don't limit yourself to obvious things like icons or UI elements; branch out and explore non-digital works like paintings and illustrations. Over the years, I've collected thousands of these interesting and inspiring artifacts, including fonts, photographs, textures, color palettes, and even code snippets. As my collection grew, though, it became increasingly difficult to maintain it and keep it useful. Enter Evernote.

Evernote inspiration library - tile view

Why Evernote?

Evernote excels at nearly everything I was looking for in a digital asset management application: it makes content collection, tagging, and sharing a snap. But Evernote's secret awesomeness is in search: it can instantly find text not only in tags, titles, and notes, but also, using very accurate OCR, within the images themselves.

Search inside images

Suppose I'm working on a contact form and I want some inspiration from the outstanding examples in my library. Instead of hunting and pecking for interesting form elements amongst the hundreds of images I've clipped from around the web, I can search using text I think might be included in the images I want. Typing "First Name", for example, finds all of my clips with that text inside the image or its metadata. This is a killer feature - it makes quickly searching my library a whole lot less painful, and also frees me from needing to exhaustively tag every single artifact as I go.

Evernote inspiration library - OCR search

If you find yourself running the same searches over and over, Evernote can save it for you as a shortcut. (See this great article on Evernote power searching for more tricks.)

Dead simple content capture

To build your inspiration library, grabbing content has to be dead simple - otherwise it's a chore and it doesn't get done! Fortunately, Evernote has super fast capture tools for pretty much any situation. In a browser, take your pick from: Chrome, Firefox and Safari extensions. Even Internet Explorer gets the love (install the Windows desktop client to get the IE extension).

With the recent acquisition of Skitch, capturing extends beyond browsers to any screen content. With Skitch, you can screen-grab, annotate, and send to Evernote in just a few quick steps. (Here's a video demo of skitch in action.) Skitch works on your Mac, iPad or Android device.

Disclaimer: I worked on the design of the Skitch icon.

Your inspiration library, everywhere

One of Evernote's key strengths is being able to access all your content on any device. Apart from the desktop clients, Evernote has an excellent web interface. In many ways, I prefer the web version - it's a simpler front-end. It's great when I need quick access to my inspiration library.

The Evernote iPhone and iPad apps are some of the best on the iOS platform, hands down. They are free, and offer everything that is great about the desktop and web versions in a mobile form factor. Evernote has an Android app, as well.

Evernote on iOS

More Evernote quick tips

A few other random pieces of advice for those of you using Evernote to capture the inspiration around you:

  • It's a good idea to organize and tag stuff as you enter them. You'll thank yourself later.
  • Re-title notes to make them more content specific. Titles like "DSC00003" will end up making finding things later more difficult.
  • Keep well structured folder stacks.
  • Use the Saved Searches feature.
  • Another quick way to capture: on a Mac, drag and drop items onto the dock icon.

Go get some inspiration

I've focused on the virtues of Evernote, but whichever application you use, building and maintaining a personal inspiration library of visual materials can be an extremely valuable tool for any designer.

Here are some places I go when I want to find new material for my library:

What about you?

How do you use Evernote? Any fresh ideas for maintaining a personal inspiration library? Do tell!

What do you think? Join the conversation in Comments

The sCoop: Week of April 16

New Instagram iPad app Iris

Ipad iris

Last week Instagram was sold to Facebook for a billion dollars and this week Iris an excellent new Instagram iPad app is released. Iris is a fun easy way to experience your Instagram photo's on the iPad. If your an Instagram user it's a must have.

Download IrisFollow on Twitter

Dropmark

Screen Shot 2012 04 20 at 10 24 41 AM

Dropmark is a new web service that allow you to create and share collections. The collections can contain all types of media elements by using a simple drag and drop interface. Dropmark is designed to make easy for individuals to invite friends or colleges to the collections for quick and easy collaboration. Dropmark is a great collaboration tool for design teams who need to share mock-ups, documents or inspiration.

Checkout Dropmark.com for more information

FoxTrot Pad Pack #1-3

Ipad foxtrot

FoxTrot created Bill Amend just released his comic strip to the iBooks store using the iBooks Author publishing tool Apple released earlier in the year. For $1.99 you can buy 1 of 3 Pad Packs. Each Pack contains about 100 strips that are designed for quick consumption.

FoxTrot for iBooks

The Rise of Interactive eBooks

With the popularity of the iPad and other tablets, we are on the cusp of a digital publishing revolution or at the very least a major reinvention on how digital content is published. Checkout UX Magazine great article on the Interactive eBook Apps: The Reinvention of Reading and Interactivity

The Smashing Book #3

Smashing book cover 5

I've always been a big fan of Smashing Books and the "Smashing Book #3" looks like it's going to be a good one. The book is slated to be released at the end of April so I've been pretty religiously watching for it's release.

Preorder "Smashing Book #3"

If you're interested in learning how the cover was created, check out Veerle Pieters blog post. "The Smashing Book #3" cover design

Fontcase CS Plugin

The FontShop plugin (BETA) provides a simple way to try out any FontShop font directly inside your own artwork. The plugin allows designers to experiment with font variations, and to show different typographic options to their clients before actually purchasing anything.

Download the Beta version

What do you think? Join the conversation in Comments

Using video for design PR: 3 things that work well

It has never been easy to demonstrate the value of interaction design, but the ubiquity of video as communication tool has helped a lot. Video is a great way to reach online audiences: It is easily accessed on YouTube and Vimeo, and it is expected to be short and to the point. With little investment, design firms can capture high-quality video with any number of relatively low-cost cameras, and use powerful editing tools to tell our stories. When a video is done well, it helps humanize the design, and gives a peek into the methods behind it.

At Cooper, we have been experimenting with video, and we pay attention to what others are doing in that space. As we share more about our process, we are also changing our clients' and the general public's expectations of disclosure. While it's a great idea in theory, in practice we find that finding the right formula can be tricky. For example, video is a more spectacular and emotionally effective medium than static blog posts, but subtle mistakes in tone and presentation run the risk of coming off as pretentious, overproduced, off-topic or just downright goofy. Here are three big things we've noted about how to get it right.

Beyond the pixel: Measuring visual designers' strategic value

I collaborate with clients about how to scope and staff project work, and they often have questions about when to bring a visual designer into the process. In the early part of my career, I wouldn't have had a good answer; it likely would have been something like, "at the end." But after 20 years of working in-house and as a consultant with product teams in various capacities — and having no background in visual design myself — I have a much different perspective on the value that visual design thinking has throughout the process of building a product.

Visual designers bring a unique perspective to product vision

First, visual designers are uniquely skilled at defining the overarching experience strategy, called attributes, for a product or service. These aren't specific design principles, but rather descriptions of what the experience should feel like for users, customers, and anyone interacting with it.

One way to define experience attributes is to conduct an experience workshop, where you facilitate a brand and "look and feel" discussion with stakeholders. Framing the discussion by using visual artifacts (pictures of products, cars, buildings, interfaces, art, etc.) helps stakeholders to engage at a visceral level instead of relying on cliché's or generalizations. Visual designers, on the other hand, are great at this, as they are skilled at talking about how the things we see translate into certain feelings and emotions, and how visual elements relate to brand perception.

experience workshop Facilitating an experience workshop with images makes it easier for participants to articulate what visual approaches feel appropriate and inspiring. A visual designer is skilled at using this input to shape a visual strategy.

Even for companies with a well-defined brand and digital branding assets, it's vital that the product team has a good understanding of what the brand means in the context of the product or service you are designing. This isn't just about proper logo use and the corporate font. It's about knowing how your company wants users to feel when they are using your brand, and about how your users want to feel while using them. Understand that intersection, and you have gold.

Look at things differently during field research

During design field research activities, a visual designer can focus on things like the visual look of the physical environment in which people use the product or service we are investigating. For example, in a medical setting, the visual designer may pay special attention to the signage and décor within a hospital. We wouldn't mimic this in an interface, but getting a feel for the environment can give us clues as to what kind of visual styles may fit—or not fit—within that setting.

visual design research Jayson, a visual designer at Cooper, gets to experience user research firsthand at a doctor's office.

I recently worked with Jayson McCauliff, a visual designer, on a product for a large technology manufacturer. The product's users were internal, so Jayson took photos of lobbies, wall art, the small in-house museum, and even the cafeteria. The effort was worth the funny looks he got, as the images later helped give him inspirations for some subtle background textures that made a direct appearance in the interface. (See more about how visual designers work at Cooper)

Early design thinking should include visual language explorations

While the interaction designers begin a design solution phase by exploring key interactions and high-level workflows, the visual designer can explore high-level visual style approaches. Because stakeholders may not be used to or comfortable talking about aesthetic and brand, having someone who understands visual design but can communicate about the effects that color, shape, white space, etc. have on users and brand are vital to making sure that everyone is aligned. It takes skill to talk about style concepts without having the conversation degrade into an argument about the specific shade of blue in a style study, so it's important to have someone who is proficient in facilitating these discussions and in creating artifacts that solicit the right kind of feedback.

visual studies Visual language studies keep initial visual strategy conversations focused.

Defining and building a winning product includes attention to the aesthetic and overall experience

Last, visual design isn't just about producing beautiful visual assets for the development team. It's also about creating a coherent product or service in the first place. A visual designer brings a unique perspective to problem solving that augments the other design team members. We find that having the visual designer involved early in design exploration activities makes our design concepts better and more well-rounded. When we are fleshing out the design framework, early and consistent involvement from the visual designer ensures that the interaction design isn't getting too crowded, and that the overall experience is achieving the experience strategy we defined early in the project.

During detailed design activities and implementation, the visual designer needs to be able to react quickly and fluidly as the design and implementation iterate and get refined. If the visual designer has been involved with the project from day one, it's easy for her to work in an agile way while still maintaining the original spirit and intent of the design, and she'll be able to make good decisions and recommend improvements because of that greater understanding.

As you plan your next redesign effort, make sure that a strong visual designer is part of the team from day one. You'll not only gain efficiencies when it's crunch time during implementation, you'll gain a valuable strategic partner and an overall better experience.

Sign up for the visual design course

Learn more about the role of visual design, experience attributes, experience workshops, and effectively presenting visual design to stakeholders in Cooper's Visual Interface Design course on February 6 - 7.

What do you think? Join the conversation in Comments

Oops! I ruined your life. :)

It was one of those, “please, please, let this send,” kind of moments when you hope a weak airport WiFi connection doesn’t disconnect, a low-battery indicator doesn’t shut down your laptop — who knows where there’s an outlet in this airport — and your email actually sends to your million dollar client when the message popped up and your stomach drops: “Oops!”

oops

Like some kind of creepy, American Psycho moment, a hardly-discernible, non-apologetic message from Gmail put this exact dagger into my heart and sent me wondering what went wrong.

Sure, of course, just lemme look up error #001. What?

Google’s Chrome browser gives off an even worse error message that doesn’t make things better, just a wanna-be-hipster-piece-of-software knocking off a Susan Kare classic laughing in your face when you’re frustrated:

aw, snap!

Maybe this is part of some awful brand initiative. After all, Google is a place of smiles. An every-color-of-the-rainbow logo, and three square meals place to work with unbelievable benefits. But, then again, Google is hardly alone in this kind of “smile when you’ve fallen” approach to error messages.

Microsoft is sadly considering implementing the same, cutesy thinking in a revamp of their blue screen of death as a part of their otherwise exciting, new Windows 8 operating system:

Windows 8 blue screen of death
(windows.staenz.com)

Oh, great. My 14 year-old cousin is writing error messages in Redmond.

Fortunately, Microsoft offers some advice. Just search for the error message, “HAL_INITIALIZATION_FAILED”…oh wait, this is the blue screen of death. My computer is totally effed.

Can doctors and computers get along?

Practice Fusion, the leading provider of health records software for medical professionals, has published a nice recap of their user conference, Connect11, where Alan Cooper spoke about the role of interaction design in health care. Among the questions answered - "what do you get when you cross a computer with a doctor's office?"

At the 13 minute mark, Stefan Klocek presents a prototype of Practice Fusion's new iPad app.

What do you think? Join the conversation in Comments

Visual design at Cooper


Visual Design at Cooper. Video credit: Andreas Braendhaugen, Music: Dave Zohrob

Get a quick look at the office of Cooper with some thoughts on the role of visual design in digital interfaces by Nick Myers, managing director of visual design and branding.

What do you think? Join the conversation in Comments

What marketing executives should know about user experience

Like it or not, the digital world has changed at a wicked pace, and more and more interactions between companies and their customers now happen via an interface. Software serves us everywhere, and the user experience now shapes these interactions every day. At the center of all this change sits the brand. TV and print advertising now regularly feature digital experiences from the likes of Apple, Google, Toyota, GE, and Amazon. The visual interface has become the new face of your brand. This means that the role of Chief Marketing Officers (CMOs) is now harder, and their influence must reach further into the organization than ever before.

Customer interaction cycle More customer interactions are now digital, and the brand sits at the center

Expectations are now much higher. My wife, for example, has lost all patience with technology. She hates how TiVo doesn't record her programs on time; her Dell laptop seems to break frequently; her iPhone is too slow. It's not just my wife, though. I see it frequently in healthcare and financial services. Even employees in larger enterprises have lost patience and expect better.

At Cooper, I see clients struggle with traditional marketing practices to deliver software that lacks the deeper level of engagement that customers are looking for. Some of our clients have changed their approach to marketing and product design and are reaping the rewards with a place on Forbes' Most Innovative Companies list.

Sign Up

Want to know more about what we're thinking and doing?
Tell us about yourself, and we'll be happy to share.

+

Required

+

Optional


contact

Contact

To work with us

tel: +1 415.267.3500
Talk to the man
Want a direct line to the big guy? Here's your conduit. Alan Cooper:

+ Careers

Cooper is always on the lookout for the best and brightest talent. Feel free to take a look at our current career opportunities.

+ Site

To send feedback about our site, drop a note to our web team. An actual human will respond.

+ Cooper

100 First Street
26th Floor
San Francisco, CA 94105
tel: +1 415.267.3500
fax: +1 415.267.3501