UserZen

Providing usability research, software consulting & innovative UX design

Browsing Posts in User Centered Design

With the new world full of interactive smart phones, Geo-aware devices and augmented reality, we need to be aware of the real world experience that consumers want and need. It is not enough to test and analyze products in 1 or 2 dimensions or just looking at how users interact with a website or product in their home.

We need to investigate how people interact with their environment as whole. People are using the Internet, their smartphone and cell phones in conjunction with other people in meatspace as well as wanting to utilize technology in conjunction with brick and mortar storefronts and their friends in real time.

It is not enough to have a website or an application for mobile phones. These interfaces need to take into account all the other ways people accomplish tasks and search for information or products.

Samantha Stormer talks about designing for the Space Between.

She says;

UX professionals can’t constrict a user’s experience to specified devices, touch-points, or time periods. As devices integrate with each other and with the real world, we have to design for this integration and blurring. This new world requires a different way of thinking about UX and design.

The new way of thinking would involve assessing the usability of your service or product at all the touch points with your consumer. This means that as researchers, we would need to talk to people about all the ways they hear about a company, through Facebook, magazines, billboards, television, etc.

We need to track how a person makes a decision to purchase or use a product, which could involve something shared on a friend’s Facebook wall, a notification to their smartphone based on the fact that they are close to the store, checking out reviews on Yelp,  a similar consumer website or Twitter posts.

The new technology users have all this literally at their fingertips and we shouldn’t ignore their impact on behavior and opinion. The experience of consumers today is not limited and our research needs to reflect that.

I will be following this new analysis as I think it points to the future of usability and marketing research.

These GUIs are provided from a multitude of sites, including SmashingMagazine, SpeckyBoy, Yahoo Design Library, Freshbooks and others. Please note that they are provided for free, but donations are appreciated to keep the innovation coming and reward those who worked hard to make them available.

I have had great success with the Omnigraffle Ultimate iPhone stencil and am particularly excited to use the iPhone 3  stencils.

To help streamline your iPhone app design and development, here is  a fairly comprehensive collection of iPhone & iPad GUI kits that will allow you to focus on developing rather than having to design everything from scratch.
Within this post you will find complete GUI kits and stencils, iPhone GUI elements and PSDs and finally a collection of the best icon-sets perfectly suited for the iPhone. (Some of the preview images are intentionally to large to show the as much of each GUI as possible).

Complete iPhone & iPad GUI Kits

iPhone PSD Vector Kit

iPhone PSD Vector Kit
This iPhone PSD Vector set, from Smashing Magazine and designed by Renee Rist, comes with several button elements as well as six different iPhone interface options.
iPhone PSD Vector Kit »

iPhone GUI PSD Design Template

iPhone GUI PSD Design Template
iPhone GUI PSD Design Template »

iPhone Design Stencils – Yahoo Design Pattern Library

iPhone Design Stencils - Yahoo Design Pattern Library
This iPhone Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG).
iPhone Design Stencils – Yahoo Design Pattern Library »

Ultimate iPhone Stencil (OmniGraffle)

Ultimate iPhone Stencil (OmniGraffle)
This ‘Ultimate Stencil’ for OmniGraffle contains backgrounds, title bars, buttons, selectors, and almost all iPhone UI elements. The text is fully editable on lists, title bars, buttons, and scroll wheels and the buttons can be resized horizontally by ungrouping, resizing the middle element, and then regrouping the elements back into a single button.
Ultimate iPhone Stencil for OmniGraffle »

iPhone 3G Stencil (OmniGraffle)

iPhone 3G Stencil (OmniGraffle)
This OmniGraffle stencil includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons… All of the components are on a transparent background and should re-size nicely.
iPhone 3G Stencil for OmniGraffle »

iPad and iPhone Design (OmniGraffle)

iPad and iPhone Design (OmniGraffle)
Design your application for iPhone, iPod touch and iPad devices with this exhaustive set of stencils. All stencils have been originally created by hand with native OmniGraffle shapes and groups and can be scaled, resized and exported to other vector formats in Graffle.
iPad and iPhone Design (OmniGraffle) »

FreshBooks iPhone Application GUI

FreshBooks iPhone Application GUI

FreshBooks iPhone Application GUI »

iPhone GUI as Rich Symbols for Fireworks

iPhone GUI as Rich Symbols for Fireworks
iPhone GUI as Rich Symbols for Fireworks »

iPhone UI Vector Elements

iPhone UI Vector Elements
iPhone UI Vector Elements
iPhone UI Vector Elements »

iPad GUI PSD Design Template

iPad GUI PSD Design Template

This PSD was constructed using vectors, so it’s fully editable and scalable. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
iPad GUI PSD Design Template »

iPad Vector GUI Elements

iPad Vector GUI Elements
This GUI set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard, ballons, etc… It also includes scalable and totally editable vector versions (AI).
iPad Vector GUI Elements »

iPhone GUI PSD Elements

MobileMe Full iPhone GUI

MobileMe Full iPhone GUI

MobileMe Full iPhone GUI »

Matte iPhone UI

Matte iPhone UI

Matte iPhone UI »

Sexy Vector Cell Phone

Sexy Vector Cell Phone

Sexy Vector Cell Phone »

MobileMe Full GUI

MobileMe Full GUI

MobileMe Full GUI »

iPhone 3G-3GS PSD

iPhone 3G-3GS PSD

iPhone 3G-3GS PSD »

Apple iPad: Fully editable PSD

Apple iPad: Fully editable PSD

Apple iPad: Fully editable PSD »

Apple iPhone 4G .PSD

Apple iPhone 4G .PSD

This. PSD is based on the controversial iPhone Gizmodo.com obtained and may not reflect the actual final product.
Apple iPhone 4G .PSD »

iPhone App Dev Icon Sets

iPhone Toolbar Icons

iPhone Toolbar Icons
There are 160 clean and simple toolbar icons in this set designed specifically for the iPhone, with a source .psd file for futher customisation.
iPhone Toolbar Icons »

Glyphish’/>

Glyphish
The Glyphish icon set have designed and carefully optimized specifically for use on toolbars and tab bars in iPhone apps, but would also be perfect for Android Development.
The 130 icons are 24-bit .png images are about 30×30 pixels for tab bar icons and about 20×20 pixels for toolbar and navigation icons.
Glyphish »

iPhone Toolbar Icon Set

iPhone Toolbar Icon Set
This set of 64 icons for the iPhone toolbar that contain beautiful shaded portions to give added depth and to highlight the icon features.
iPhone Toolbar Icon Set »

Free iPhone Toolbar Icons

Free iPhone Toolbar Icons
These icons have been developed specifically for iPhone developers, completely free for anyone to use commercially under the Creative Commons Attribution 2.5 Canada license.
Free iPhone Toolbar Icons »

30 Free Vector Icons

30 Free Vector Icons

30 Free Vector Icons »

iconSweets

iconSweets
iconSweets is a free icon set containing 60 vector Photoshop shapes, influenced by icon sets such as Glyphish and Pictoico. Perfectly suitable for iPhone & iPad app development.
iconSweets »

Touchscreen Hand Gestures v2 (OmniGraffle)

Touchscreen Hand Gestures v2 (OmniGraffle)
Vectorized version of Dan Saffer’s “Touchscreen Hand Gestures” stencil (http://graffletopia.com/stencils/432) containing a collection of drawn hands for documenting touchscreen interactions.
Touchscreen Hand Gestures v2 (OmniGraffle) »

Gesturecons – Multi-Touch Icons

Gesturecons - Multi-Touch Icons
These vector based icons have been created to help in the design, development, implementation and promotion of multi-touch interfaces. You can use Gesturecons inside of your applications in order to demonstrate to users how to complete actions or prompt them to interact with an application when they approach it. You can scale them to any size and alter them in any way you wish.
Within the download package there are 52 high resolution vector icons entirely scalable and alterable (.pdf, .ai, .eps file types.).
Gesturecons – Multi-Touch Icons »

You might also like…

Mobile Web and App Development Testing and Emulation Tools »
35 Free Icon Sets for your iPhone »
14 Free Mobile Application Development Icon Sets »
10 Cool and Advanced Mobile Phone Concepts »
Top 20 Free Windows Mobile Social Media and Networking Apps »
Showcase of 20 Mobile-Friendly Popular Design Blogs »
49 Free Windows Mobile 6+ Smartphone Apps and Services »
45+ Cool Google Android Apps – The Perfect iPhone Replacement »

5 Indispensable Skills for UX Mastery

Original posting

Jared Spool

Jared Spool, User Interface Engineering

For practicing User Experience Designers, one of the most important laws isn’t Fitts’s Law, which helps us understand how to design interactive elements. Nor is it Hick’s Law, which describes how long people take to make decisions.

It’s Sturgeon’s Law, which tells us that 99% of everything is crap. It’s easy to produce a poor quality result—anyone without the critical skills is capable of it and there are a ton of those people floating around.

Yet if we want to be really excellent at what we do, what are those essential skills? What should we be practicing to become a master?

This is exactly the question we set out to answer as we studied the work of the master UX professsional. These masters were folks from all different disciplines within the UX world—interaction design, information architecture, user research, copywriting, and visual design. While they produced different deliverables and end products, it was clear that each of the masters we talked to had built their mastery upon some common skills — skills that turn out to be indispensable when they’re trying to produce excellent results.

Indispensable Skill #1: Sketching

Someone once said that talking about design is like performing interpretive dance about architecture. Words, while critical, often don’t do our ideas justice.

A quick sketch about a design—what it will look like, how information flows from one place to another, how the users move between activities—often is the best way to get our ideas across.

The masters we talked to gravitate to sketching easily. They aren’t embarrassed by how ugly their sketches are (and, by the way, they can be quite ugly) or how silly they might look (quite silly too). They focus on the ideas behind those sketches.

We’re talking back-of-the-napkin quality stuff. Thick pens, broad strokes, simple stick figures. It’s not the Mona Lisa or the best work of the Impressionists.

We asked each master how they obtained their sketching skills. Their answer? They practiced—in meetings, at their desk, waiting for their kid to finish soccer practice. They just kept drawing and doodling and sketching thoughts that came into their mind. They would write the same phrases over again, to improve their handwriting’s readability.

Sketching isn’t hard, but it’s a learned skill. Once learned, it becomes an effective part of the communication mix.

Indispensable Skill #2: Storytelling

One of the things that separates humans from all other species is our ability to enjoy a good story. (You don’t find mice sitting around a campfire recounting their recent life-threatening encounter with the farmer’s wife.) We love to hear stories and we worship those among us who can tell the best ones.

In the sterile, fact-filled workplace, we don’t think of stories as being a critical skill. Yet stories can inspire. They can illuminate. They can help us empathize with those we’re designing for.

Telling a great story was another common trait of all the masters we talked to. When we asked them to describe something they had accomplished, they didn’t just describe the result, they told how they’d accomplished it. They told us what problems it solved, who they talked to in the research, and how they convinced their team members to focus on the best parts. They did it in a totally fascinating way. Our attention was riveted.

Storytelling, like sketching, is a skill they regularly practiced. They told the same story over and over, watching how their audiences responded. When the audience responded with the right ideas, they knew they’d succeeded. When they didn’t, they changed their story until they got the effect they were seeking.

There are elements of good stories that the masters understood: characters, plot lines, the journey the protagonist takes, the challenges they face. These things make the story interesting and entertaining. But they also make them informative.

Like sketching, telling a story is an essential skill to becoming a master. Keep it fresh. Keep it interesting. Most importantly, keep it relevant and information-packed.

Indispensable Skill #3: Critiquing

It’s rare to find a UX master who works completely by themselves. Instead, they are part of a team, collaborating on the designs they create.

Part of the collaboration is delivering and receiving feedback. Great design succeeds through iteration. Each round of changes is best when it’s informed by the experience and knowledge of the others around us.

We don’t hear much about critique. The folks who are best at it can deliver constructive feedback that helps us better understand what we’re trying to do and how we can do it. Those folks are also great at receiving the feedback by empowering our thinking process and helping us understand how to be better problem solvers.

Critique goes beyond criticism. It explores what the design’s objectives are. It looks into how the users will solve their problem and move through the design. It’s a discussion, where nobody is right or wrong, instead we fully explore the landscape of the problem.

A great critique is an engaging, energizing, and empowering session. Everyone feels they’ve learned something new and grown professionally. Mastering this skill enhances our teamwork, while enriching our designs.

Indispensable Skill #4: Presenting

Presentations are a UX master’s staple. They are always presenting ideas to their teams, their work to their management and others inside their organization, and their methods and results to their peers at professional gatherings.

At the core of a great presentation is storytelling. It’s boring to just list the facts, so embedding it into a memorable and engaging story is key.

But great presentations go beyond the storytelling component. They are multimedia events, involving live action, sound, and visuals. Presenting involves writing, orchestrating, choreographing, and producing.

Great presentations also involve a new level of attention on the part of the presenter. A great presentation, in itself, is an exercise in designing an experience. Understanding how to listen to your attendees is an essential component of crafting the experience you’re creating for them.

It’s easy to stand in front of a crowd and walk through a slide deck. It’s much harder to create a meaningful presentation that persuades, engages, and rocks the world of the audience.

Some, those who have mastered presenting, make it look easy. However, the great presenters put tremendous effort into their craft. They practice frequently, editing their presentation with fine precision, making sure every moment has the audience right where they intend.

It’s a performance-based skill that looks easy, but is hard to pull off well. Improving this skill will make you an indispensable voice of your team and organization.

Indispensable Skill #5: Facilitating

Frankly, when I started working on this article, I wasn’t thrilled with the name of this skill: facilitating. It sounded so administrative, so boring. And this skill is anything but boring. It’s essential to great, collaborative design.

In our work, we regularly have to lead teams through critical activities, whether it’s analyzing the results of a user study, brainstorming ideas for a new feature, critiquing a design, or dividing up the work for the next iteration. (I had thought of leading or leadership as an alternative to facilitating, but that sounded too grandiose.)

The facilitator is a momentary leader. They step in and take over, with everyone’s support and respect, to push through the group’s next activity. Team members often take turns facilitating, spreading the effort around, giving everyone a chance to guide the team for that moment.

The best facilitators have a full toolbox of tricks. They know when the whiteboard works and when it constrains the conversation. They understand how to use sticky notes or index cards. They know how to separate valuable explorations from wasteful digressions, as the team works through the session. They know when to assert their own point of view and when to play a neutral role.

Folks who master facilitating are always looking for new tools and tricks. They are in search of new ways to get the team to consensus, to agreement, to assigning and delegating. A great facilitator is indispensable to their team, helping them move closer to success with every get together.

Five Indispensable Skills

So, there we have five skills for UX mastery. These skills aren’t unique to the user experience profession, but it’s clear from our research, the best professionals work hard to master them.

These skills—sketching, storytelling, critiquing, presenting, and facilitating—are all communication skills. They are all collaboration skills. They are skills that help us make every design better.

What’s great is that we can use these skills as a way to better ourselves and our teams. We can constantly look to improving— scouting out friends, colleagues, and mentors who have reached a higher level and learning from their practice. Managers can add these skills to the performance review process, asking each period, “Have you improved on these?”

These are indispensable skills to have, which, in turn, make us more valuable (and more indispensable) to our teams.

Powered by WordPress Web Design by SRS Solutions © 2010 UserZen Design by SRS Solutions