Archives For Uncategorized

Door64 invited me to conduct a one day course here in Austin. The course will be held on Friday, July 20, 2012 between 9:00 AM and 5:00 PM at the AT&T Conference Center in Austin, Texas. 

Class Description

User experience expert Theresa Neil will guide you through the latest mobile UI design strategies:  Responsive web, Optimized sites, Native apps, and Hybrids.

Study the most successful mobile implementations in the market today (and some of the worst).  Learn the merits and pitfalls of each strategy.

Get to your mobile solution faster by learning the best patterns for Navigation, Forms, Tables, Search, Sort & Filter, Charts, Tools, Invitations, Feedback, and Help.

All registrants will receive the Mobile Design Pattern Gallery eBook. So Register Now, and I hope to see you on the 20th. 

2 UX Designer Positions

September 19, 2011 — Leave a comment

Two of our clients are hiring full time UX designers: Allegiance in Austin and Cloudera in CA. If you have a product application design background, with multiple years experience designing producivity applications- these could be a great fit for you. Strong interaction design skills and data visualizations experience are important.

1. Allegiance

User Experience Designer
Austin, TX or Salt Lake City, UT

Position Summary
Are you passionate about creating user-friendly, efficient, and memorable web applications? Do you want to work in a customer driven environment? Enjoy pushing the frontiers of modern web technology for thousands of users across many enterprises? Are you also a CSS Ninja, jQuery Czar and pixel counter? If so, we have the job for you! Allegiance is looking for a User Experience Designer.
Allegiance builds a web platform that helps its users listen to their customers. We do this by helping our clients collect the voice of their customer through surveys, social media, phone applications, mobile applications, SMS, and whatever else might be next. Then we convert this data into useful information and insight through interactive online reporting, dashboards, and data visualizations.
In this position, you will be responsible for designing the UI experiences that both our business and consumer user see! We are looking for a professional who can immerse themselves in our user’s world, design workflows, wireframes, prototypes, and create great user experiences. We’re looking for a user experience designer that has a blend of artistic product design skills as well as solid skills in HTML/CSS/Javascript. You will help keep our Agile engineering process efficient, and wow our customers.
Continuously learn about needs, listening initiatives, and data communication challenges from customers and prospects
Discover gaps in our product’s usability and workflow
Design the ideal user experience based on functional requirements and our persona’s needs.
Develop early wireframes and high fidelity mockups
Conduct usability tests with our customers
Create and iterate through mockups and prototypes based on feedback
Create and inspire adherence to user interface standards across the product
Ability to take designs from PSD or wireframe to product
Help the engineering team build high quality, cross browser interfaces
Be the artist for our user interface!
Experience developing SaaS/enterprise web application interfaces
Strong knowledge and experience with web applications, HTML & CSS
Experience with Javascript and jQuery
Experience with Adobe Creative Suite
Strong organization skills and ability to multi-task
Experience designing BI tools or reporting applications a plus
Experience with server-side web frameworks such as ASP.Net a plus
Education and Experience
5+ years of UX design experience and expertise in interaction design fundamentals
A degree in Interaction Design, Visual Design or equivalent experience
Application Procedure
Qualified candidates submit resume to and reference the User Experience Designer position.
In addition please include the following:

  • Cover letter indicating why you would be the best fit
  • Portfolio of your most recent application designs
  • Link to your website, if you have one
  • Tell us about one “I wish I had thought of that” moment you had recently

2. Cloudera

The Role

Cloudera is looking for a User Experience Designer to join its growing team. This role has a unique
opportunity not only to create some great products but also to set the standard for Cloudera’s overall
interaction design. Responsibilities include:

User research: organizing end user interviews and usability tests as input into the design process.

Interaction design: work with product management to take high level requirements or use cases and
elaborate those as process flows & wireframes.

User interfaces design: create the reference UI patterns that will create the visual signature for all of
Cloudera’s products. Evolve wireframes into high fidelity mockups.

Product design: collaborate with product management and engineering on various aspects of the
product design & development process


For this role, some prior experience in user and interaction design is a firm requirement. The ideal
candidate is someone who has done user or interaction design before as part of a larger team and is
ready to step up into a leadership role. More important are the candidate’s attributes. We are looking

Analytical rigor – someone who understands design as a method & data driven not a “flash of brilliance”
driven process

High energy – keeps a fast pace and encourages others to keep up with them

Nosy – knows enough about product management to call out bad inputs. Knows enough about UI
development to call out bad outputs.

Persistence – can visualize what a win looks like and won’t accept less than that

Attention to detail –keeps iterating on an issue until they’re satisfied they’ve found the optimal solution
for the user

Good taste

Interested candidates should submit a resume and some screenshots of past work to me, theresaneil at gmail. No cover letter

About Cloudera

Cloudera provides software and services for Hadoop, the leading platform for petabyte scale data
management. Founded in 2008, Cloudera has more than 50 customers including Visa, eBay, Bank of
America, Netflix and Groupon. Cloudera is backed by leading institutional and individual investors
including Accel Partners, Greylock Ventures, Diane Green and Martin Mickos.

I recently ran a post requesting bad app submissions for a chapter I’m writing on Mobile Design Anti-Patterns. So in this context “bad” refers to non-standard, or less than elegant interface designs, not “bad” like crashes a lot or doesn’t have key features. Robi, the creator of Apptentivewas selected to win a new copy of Simple & Usable.

Here are the submissions:

I’ll pick the best from these to include in the Anti-Pattern chapter and discuss the problems with the UI and possible solutions.

Please share any more you run across, just provide a link in the comments or email me a screenshot, theresaneil at gmail.

UX Magazine published my most recent article, End to End Experience Design today. Take a look, it has lots of pictures and even comes with a checklist:

Thank you to Pascal Raabe for the great design.

I had the opportunity to talk to the folks at Creative Good High Tech SIG today. Here is the QuickTime video so you can see the embedded movies in the presentation. This is a big movie- like 50m- so it takes a minute to load, then you just click on the video screen to step through the slides. There is also a lightening fast version of it on YouTube if you are impatient and just want a quick run through. You can also download it as a PDF.

If you like this material- Bill Scott and I have a new Master Class video series with O’Reilly for Designing Rich Interfaces. We cover the basics from application patterns, through screen design, rich interface controls and more advanced topics like designing for interesting moments. We also discuss the 6 principles in out book “Designing Web Interfaces: Principles and Patterns for Rich Interactions” illustrated with new examples.

Here’s a free chapter:

Last April I posted a simple iPhone wireframe stencil to Graffletopia, an online stencil community for OmniGraffle users. 18 thousand people have downloaded it. It is time for an update- get your new iPhone 3G Stencil here. Unzip it and put in in your Library > Application Support/ OmniGraffle/ Stencils folder.

I’ve also included some tips and tools I find useful while designing iPhone applications.

Design Basics

Start with the iPhone Human Interface Guidelines.

Paper and Pencil Drawings

So fast, so simple. Grab a sketch pad and the iPhone stencil kit. I hope they make a magnet set next.


1. My favorite wireframing tool,Balsamiq Mockups, now supports iPhone UI elements

2. iPlotz , another wireframing application, also provides iPhone controls
3. Try my new iPhone 3G stencil

High Fidelity

1. Mercury Intermedia’s vector images

2. teehan+lax’s psd images

Interaction Design

1. Download the Touchscreen Hand Gestures v2 on Graffletopia, inspired by Dan Saffer, author of Designing Gestural Interfaces, O’Reilly Media December, 2009.

2. Todd Warfel did a great presentation last month in NY called Prototyping in the Wild. He had some cheap, quick and fun ideas for prototyping iPhone apps- mostly involving cardboard, markers, paper and tape. Cut a life-size iPhone out of cardboard. Place it over your design skecthes. Your clients or test group can flip through the screens to experience the app. Hint* add notes like “pull to left” or “slide up”, or create a Common Craft style movie to pitch the concept.

3. Balsamiq Mockups can now be combined with Napkee to make working prototypes. I have not tried this for an iPhone app yet, but I am optimistic.

Best Apps Showcase

1. Check out O’Reilly’s Best iPhone Apps site for inspiration
Best IPhone Apps

2. There is a new book on the market Best iPhone Apps: The Guide for Discriminating Downloaders. I haven’t personally checked it out yet, but will over the weekend. It is bound to have some good examples in the 220+ pages.

Smashing beat me to it. I’ve been working on a post of all the new design mock-up tools on the market. Last time I counted- there were at least 40. Guess I’ll finish it up and get it posted.

But in the meantime- enjoy Smashing’s post “35 Excellent Wireframing Resources“.sketch
This sketch is from my friend Jakub Linowski’s excellent blog called Wireframes. Jakub and I will be collaborating on some upcoming projects.

One of the major sites Smashing overlooked in Konigi who has great sets of wireframe stencils, sketch books, grayscale icons sets…

Added September 17th: Adaptive Path pulled together a full list of prototyping tools- 42 in all.

…For a portfolio building project (ie. more for the experience than the $$).

Nikolas Green approached me with a pretty cool design project recently. Unfortunately, my plate is full right now, but I offered to help him find a designer who has a similar passion.

If you are an application designer, or aspiring web application designer, with a background or interest in personal fitness, please contact me. I am happy to work with you on the project, or introduce you to Nikolas.

Here is a short description of the product:

This application is a productivity application geared towards health professionals, specifically dietitians, nutritionists, chiropractors, and athletic trainers. It is a web-based, SAAS offering for this under-served aspect of the Health Care Process. The software includes multiple, complex modules where usability and interactivity is critical to the success of the product. As health care reform gains momentum, prevention has been a critical part of the debate. The productivity application will enable a preventative care process among its user base.

This project will probably include: initial IA work, wire framing, prototyping the designs, development specs.

Since our new book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 4 of 6:

Stock your Toolbox: 40+ Custom Flex Controls

Flex 3 includes a wide range of controls. Unfortunately, it doesn’t have all of the Essential Controls I use for RIA design. But fortunately, talented and industrious Flex developers have created numerous custom controls for Flex.

I pulled together a visual repository of custom Flex controls. Most of these controls were created to showcase certain functionality- not usability best practices. So some may need further refinement to comply with the usability principles discussed in the previous posts. Click on the picture for the demo.

01. Accordions

Complex Headers
Horizontal Accordion

Apple Style
More under ‘Collapsible Panels’

02. Auto Complete

More Examples

03. Bar Code Generator


04. Build a List


05. Calendar/Scheduler

ILog Elixir
Ely Greenfield’s early Scheduler
Adobe’s Scheduler on flexlib see flexlib.scheduling package

06. Captcha


07. Charts & Graphs

3D charts by iLog Elixir
Chart Drill Down with Animation
Dashed Line Series
Chart Offest
Advanced Legend
Scroll and Zoom

08. Collapsible Panels

Window Shade- panels roll up and down
Arc90’s Collapsible Panel
Early Stacked Panels

09. Cover Flow

Doug McCune’s updated Cover Flow

10. Data Visualization

Kap IT Lab
ILog Elixir

11. Docking


12. Drop Down Menu with Scrolling


13. Find and Highlight Text

In flexlib as Highlighter

14. Fisheye Menu (like Mac Dock)


15. Flip Card


16. Floating


17. Gantt Chart

ILOG Elixir Gantt
Doug McCune’s Early Gantt Chart

18. Inline Edit (Fields)

Early example by Ely Greenfield
Modal editing variation by Ryan Swanson
* The hover invitation to edit on a field by field basis (like Flickr) works best for infrequent edits

19. Icon Loader

On flexlib under Icon Loader

20. List/Tree Converter

On flexlib under Convertible Tree List

21. Mask (text input and validation)

On Adobe Flex Exchange

22. Multiple Document Interface (MDI)

On flexlib under flexlib.mdi

23. Magnify


24. Map Callouts


23. Pan and Zoom


24. Page Turn

Peek Panel by Bill White (nice blog)
Ely Greenfield’s early FlexBook

Didier Braun’s PageFlip

25. Pivot Table

Satish’s Pivot Table
Flex Monster product

26. Resize

Resizeable and moveable window
Resize Objects with ResizeManagerFX

27. Scrolling-Internal

In flexlib as Drag Scrolling Canvas

28. Side Tabs/Vertical Tabs

Degrafa ToggleButtonBar vertical tabs
Vertical Tab Navigator

29. Sliders


30. Sliding Panel


Early example
Slide out menu with effects instead of states

31. Sparklines

More examples:
Fusion Charts
Sherlock Informatics

32. Spell Check

There is also a Spell Check component on Flex Exchange

33. Tabs (configurable)


34. Text Prompt/ Watermark Fields

At flexlib under prompting TextInput

35. Tree Table

Early Tree Grid

36. Time Picker

Alternate one on Flex Exchange as Time Chooser

37. Toolbars


38. Trees

Open branches by clicking on the row
Adding leaf notes
Showing XML
Rearranging nodes with drag and drop
Drag from a Grid to a Tree

39. Upload Files


40. Vertical Browse


Comment with your custom Flex controls

Please comment with a link to your favorite custom Flex controls.

I realized after 3 years of using OmniGraffle, I should break down and make a cursor stencil to make my job a little easier. These are all on a transparent background, so you can put them in your wire frames to show cursor state for specific rich interactions.


It is at