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
Location:
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.
Responsibilities
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!
Skills
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 jobs@allegiance.com 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

Qualifications

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
for:

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
necessary.

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.
iPhone3G

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.
Physical_stencil

Digital

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

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

High Fidelity

1. Mercury Intermedia’s vector images
vector_goodness

2. teehan+lax’s psd images
iphone_gui

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.
touchscreen_gestures

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.
frame-02-800

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.
40_flex_custom_controls1

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

accordion_with_custom_header
Complex Headers
accordion_horizontal
Horizontal Accordion
accordion_apple_style

Apple Style
More under ‘Collapsible Panels’

02. Auto Complete

auto_complete
More Examples

03. Bar Code Generator

barcode_reader

04. Build a List

build_a_list2

05. Calendar/Scheduler

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

06. Captcha

captcha

07. Charts & Graphs

chart
3D charts by iLog Elixir
graph_drill
Chart Drill Down with Animation
dash
Dashed Line Series
graph_compress
Chart Offest
legend
Advanced Legend
scroll_zoom
Scroll and Zoom

08. Collapsible Panels

collapsible_panels
Window Shade- panels roll up and down
collapsible
Arc90′s Collapsible Panel
stacked_panels
Early Stacked Panels

09. Cover Flow

coverflow1
Doug McCune’s updated Cover Flow

10. Data Visualization

diagrammer
gauge
Kap IT Lab
ILog Elixir
BirdEye

11. Docking

dockable

12. Drop Down Menu with Scrolling

menu_scrolling

13. Find and Highlight Text

highlight
In flexlib as Highlighter

14. Fisheye Menu (like Mac Dock)

dock

15. Flip Card

flip

16. Floating

floating

17. Gantt Chart

gantt
ILOG Elixir Gantt
gantt
Doug McCune’s Early Gantt Chart

18. Inline Edit (Fields)

inline_edit
Early example by Ely Greenfield
inplace_edit
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

image_converter
On flexlib under Icon Loader

20. List/Tree Converter

list_tree
On flexlib under Convertible Tree List

21. Mask (text input and validation)

mask
On Adobe Flex Exchange

22. Multiple Document Interface (MDI)

mdi1
On flexlib under flexlib.mdi

23. Magnify

magnify1
magnify_big

24. Map Callouts

map_callouts

23. Pan and Zoom

pan_zoom

24. Page Turn

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

Didier Braun’s PageFlip

25. Pivot Table

pivot
Satish’s Pivot Table
pivot_flexmonster
Flex Monster product

26. Resize

resize1
Resizeable and moveable window
resize
Resize Objects with ResizeManagerFX

27. Scrolling-Internal

scroll_panel
In flexlib as Drag Scrolling Canvas

28. Side Tabs/Vertical Tabs

side_tabs
Degrafa ToggleButtonBar vertical tabs
side_tabs_2
side_tabs_3
Vertical Tab Navigator

29. Sliders

slider_dual

30. Sliding Panel

slide_panel

Early example
Slide out menu with effects instead of states

31. Sparklines

sparkline
More examples:
Fusion Charts
Sherlock Informatics
Birdeye
19nates

32. Spell Check

spell_check
There is also a Spell Check component on Flex Exchange

33. Tabs (configurable)

tab_2

34. Text Prompt/ Watermark Fields

watermark
At flexlib under prompting TextInput

35. Tree Table

tree_table
Early Tree Grid

36. Time Picker

time
Alternate one on Flex Exchange as Time Chooser

37. Toolbars

toolbars

38. Trees

tree
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

upload

40. Vertical Browse

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.

original

It is at http://www.graffletopia.com/stencils/450