Wireframing as an Indicator for Problems in your Project Structure
Usually I recommend 2 rounds of wireframes (more rounds are ok during proposals).
If you still cannot move on after 3 rounds of wireframes this is typically a good indicator that your project has some sort of underlying problem that you should detect and address right now.
Typical Problem Areas
From my observation problems can arise in many different forms. The simple identification of such is half the rent to address them (and I will leave the resolution up to you here).
No real user need
Every project should have been initiated by a user need. Many times that isn't the case and that is when it becomes difficult to defend a design to new requests, just because pretty much everything sounds like a great idea. So how can one
- measure the usefulness of the overall site?
- accept/deny new ideas or requirements?
- define the importance of requirements and their conceptual representation?
- design the visual hierarchy without clear or shifting priorities?
That's tough, it's like going fishing without campfire. Educated guesses are more important and also difficult than ever. Define a story that follows a vision that makes sense.
Too many cooks in the kitchen
Is there a sense that every time you step into a design meeting the wind has changed 180 degrees? Indicators for a deeper problem are when the team cannot settle on a wireframe because of
- conflicting opinions
- never-ending subjective feedback
- scope creep
- YADRN (yet another design review needed)
- executive seagull effect
- design by committee
Try to make the best out if by asking lots of questions, a little evangelizing, prioritizing feedback, and plenty of skilled design balance.
Poorly defined requirements
Every requirement should serve the purpose of the site, i.e. the user need(s) that drive the vision and right of existence of the endeavor. Maybe your requirements need refinement because they are
- too vague
- missing a definition of WHY they are needed
- defined by committee rather than thoughtful (and curated) selection
Mockups will help you identify missing requirements or surface items that don't make sense anymore in the big picture.
Undecided project manager
Decisions have to be made, priorities have to be set, deadlines need to be met, requirements satisfied. Somebody has to sail the ship and make decisions. You know the project has a managerial problem when design decisions cannot be taken because of
- new requirements popping up like mushrooms
- another 360 (as the wind blows)
- lack of authority given to the designer
Find somebody that can make executive decisions or make the decision for yourself (I know, nobody likes to piss off their PM, but pick your battles).
Problematic client
Issues with the client aren't uncommon, and not always is the client the problem, but certainly some clients can be more challenging than others. Find ways to finalize your designs and move on when
- requests about the HOW increase
- nitpicking increases
- conceptual designs are dissected to the dot on the i
- changing their mind on a daily basis
Go back to the roots, ask questions about WHAT and WHY you are doing this. Ask specifically what you can do to finalize any given slide, let them tell you and move on.
Missing domain knowledge
Not everybody can be a subject matter expert, but somebody has to and this somebody needs to be available to clarify and consult. You know you are missing a SME when the mockups
- tell an incomplete story
- can't hold up to critical questions
- an actual expert doesn't understand the mockups
Involve domain experts early, listen to their advise and take it seriously.
Bad designer
Last but not least, the problem could be the designer himself. Sometimes the designer didn't have the time to get his head around the complexity of the project, he or she is
- missing the holistic view of the system
- is missing crucial information to design well
- is facing impediments that weren't solved in time
- got hung up on a failed design and didn't want to start over
- fell in love with a design and can't let go
- is purely not capable of designing/communicating well
Have peer-reviews, offer a mental break, mentor the designer in his/her creative blockage or inability to get their head around the subject. Create a culture of failure where it is ok to accept a u-turn and throw away a design in favor of a potentially better one.
Your Experiences?
I would love to hear about your experiences and especially how you resolved any issues.
Happy 3rd Anniversary
Another year has passed and I cannot tell you how much your feedback means to me: Thanks for sending me all these links, suggestions and ideas. This is what encourages me to keep going - I hope you enjoy it as much as I do 
Just in case you have missed it, here are some highlights, my personal favorites and some good advise from the past year.
Highlights from last year
- Proposing 'Sparkmaps'
- Free Map Controls for Balsamiq Mockups
- Dashboard Design
- Cheatsheet: Preparation for User Testing
- Under-Design on Purpose
Personal Favorites
- 10 and 1/2 Lessons Learned from Forrest Gump
- Putting Humpty Dumpty back together
- Evaluation: iPad 2 for Designers
Good Advise (for free 
)
World Usability Day 2011
Today is World Usability Day. Check out online events.
It's about making our world work better!
This is a reminder that we must develop technologies and experiences in a way that serves people first!
Lot's has been said about Steve Jobs and how he was an innovator and leader of easier to use software and hardware. I think he was just somebody that asked the right questions and had the power to translate them into consumer products (well, impressive enough I guess).
The questions we all should ask more often - and we cannot be afraid to ask over and over again if we didn't understand - are WHY and WHAT. Only after figuring these questions out we are able to design, improve and innovate the HOW.
With that: Happy Usability Day!
Evaluation: iPad 2 for Designers
Installed applications on iPad
You might have noticed that this blog has gone quiet for some time... but let me assure you, I haven't been. I just needed space to finish up some projects here at Esri and to experiment with some new cool stuff.
Along the way I was able to test the iPad 2 to see if it would add value to the life of a designer/developer.
My Goal
My goal was to find out whether I could increase my productivity by using an iPad (2) during my daily routine at work (meetings, workshops, drafting, coding). I wanted to find out if it makes sense during a meeting to scribble on the tablet and be done before I return to my office, if my team mates can collaborate (comment, enhance, brainstorm) with me faster and more efficient and overall if the little black gadget saves me time and energy.
First Impression
My first objective was to install only free apps related to my field. This task alone turned out to be really cumbersome using the iStore. So I turned to the web and found plenty of nice blogs suggesting apps, some of these apps really powerful but other apps turned out to have switched to (outrageous) paid mode.
Next I looked into paid apps and the possibility to snatch a free trial by contacting their customer service. NO WAY JOSE. I was turned down with the argument that iStore controls the distribution of the apps and doesn't allow free trials - what a downer!! Can anybody confirm this? Are there alternatives I haven't thought of?
Thirdly I installed apps that I though might be useful for general tasks like note-taking, document sharing, etc.
Evaluation
I started bringing the little black gadget to meetings and started playing around with it during breaks. Whenever I saw a colleague with an iPad I asked for their experiences using it in a professional setting.
I installed the following apps:
Notehub
Description: Any of the following types can be stored as 'notes': Browser, Canvas, Calculator, Note, Tasks, Map
Features: Share by email, save to photo library, publish to posterous or dropbox
Facit: really useful
iMockups
Description: tool to create mockups very similar to Balsamiq (that I use)
Features: share by email and then export to balsamiq
Facit: no import from balsamiq in free version
Y!Sketch
Description: sketch anything on a map and let the map use this as the area of interest and show restaurant choices
Facit: not really a productivity tool, but i was intersted to see it because a map was involved
SketchPad lite
Description: sketch simple to complex geometries
Facit: didn't quite see the use of it in our workflows
GoToMeeting & TeamViewer
Description: both are meeting/sharing applications and very useful
Facit: nothing that the laptop couldn't do
To Do's Lite
Description: Create todo lists
Facit: didn't see how to share/sync this list, ads are ok, not really distracting and if it helps to pay a free version I'm fine with it
Springpad
Description: nice todo list organizer
Features: see your own 'notebook' or your friend's, sync with your email account or share via facebook/twitter
Facit: good organizer
Doodly Buddy
Doodly Buddy
Description: draw cute paintings with your finger
Facit: have a look at the painting to the right that was done by my 16 months old son (with a little help from daddy) to see what I mean
Evernote
Description: notetaking, sharing and syncing
Facit: almost standard app across all devices, a little cumbersome to type without external keyboard, laptop or pen and paper would be faster
iBrainstorm
Description: sketch your ideas onto a corkboard
Features: send in email or save to photos, attach post-it notes
Facit: kinda funny but input methods/selections seemed limited
Storyboards
Description: this one I liked a lot - create and sketch scenes that together create a story
Facit: free version only allows 2 storyboards and 10 drawings per storyboard without options to export or print, premium version is $ 15.-
iBooks
Description: digital bookshelf on the go
Features: sync between your devices
Facit: good reading experience
Documents 2
Description: sync documents (word, excel, powerpoint, etc.) via wifi or google docs
Facit: free version has annoying ads
Skype
I have that on my phone/laptop too
Description: popular video conferencing app
Facit: must have on any device
Description: newspaper-like access to your twitter/facebook and more streams
Features: include your social streams
Facit: really nice and interesting way to get news updates
Sonar
Description: using foursquare connect you can find out who is in the same room with you and how you are connected with them
Facit: as foursquare is becoming more and more popular this guy can work well also
Cool Hunting
Description: get reducted news on the following topics: Design, Tech, Style, Travel, Culture, Food+Drinks
Facit: good source of inspiration
Moodboard Lite
Description: exactly what it says, paste anything onto a board-like canvas
Features: screenshots, notes, text, photos
Facit: collect inspirational content
Conclusion
No, I will not use iPad and would not recommend it to others for professional design/development purposes.
Here is why:
- As long as you are within your internal network the iPad doesn't give you any advantage - even slows you down considerably - over a laptop with keyboard, mouse, projector, and access to internal network resources.
- The iPad is a great tool to consume content, but I found it really difficult to create content let alone collaborate. Pencil and paper or a clean whiteboard seemed to be more intuitive and easy to use/follow than a gadget on the table.
- Some apps were really promising but lacked important features (import existing sketch files) in the free version.
- Generally one has to learn not to get distracted by the constant online environment, I found it harder to focus and follow an active meeting.
- The biggest and probably most overlooked downfall is something very benign though: despite contrary thinking, your credibility might suffer considerably when using an iPad in front of other people. You might appear to not paying enough attention or just playing around, be it the case or not. Like with cell phones, we are just learning to use (and not use) them as well as being perceived as ubiquitous by others.
Open questions
Do you guys have any answers/suggestions/experiences to the following questions?
- Would traveling/being at the client make better use of the iPad?
- Have I overlooked any really powerful free app?
- Would a bigger wallet give me what I need?
Under-Design on Purpose
Paving the cowpath
The Situation
I was invited to help with some open design questions for a beta version of a product, a prototype already existing.
The question on hand is fairly simple, how can we visually show the quality of the data (in the grid) to the user? Should we use green up arrows and red down arrows (two symbols)? green, yellow (kind of not sure marker), red checkmarks/crosses (3 symbols)? Percentages? A, B, C, D, F (like the US school system, with F is Fail but the others show grades of good quality, 5 symbols)? The latter was tossed out immediately after having three different school systems sitting at the table (Spain, India, Austria).
The Setup
So I found myself in a situation where a single requirement started to explode into a universe of great ideas and variants that the team of developers tried to incorporate as they popped up. I tried to keep up with mocking up in my mind what I thought fit. Every new take promised greatness but required compromise somewhere else.
The Turning Point
Only when the discussion started to run in circles I felt it was necessary to step up. I was in a dilemma, I knew a decision had to be made and I knew also that it was up to me to speak out. So I said...
The Solution
"Let's keep it simple" - Ha, you could have come up with that too, right? Well, what I really said was: "Let's don't do anything and let the users complain that they are missing something." Or in other words, let's pave the cowpath.
So we decided to include 1 symbol, the red flag, to show the bad items, no other item will be marked, neither the good ones nor the one within a threshold between good and bad. Let's sit and wait to receive feedback that what we assume we might need is actually needed.
What would you have done?
Where to study HCI [Map App]
I feel like back to school - in many ways. I can't believe how interesting my job can be, I learn new and fascinating things every day. The other day I spoke with Keita, who told me about her little project which I'd like to share here.
Keita created a map on ArcGIS.com that shows schools offering
- degrees in Human-Computer Interaction (HCI) or Human-Centered Computing (HCC)
- schools offering degrees with an HCI track/concentration
- schools offering HCI-related degrees
- UPA chapters
- SIGCHI chapters
The idea for the map came from the realization of how difficult it’s been to find HCI programs and UPA/SIGCHI chapters in SoCal. "So I wanted to create a visual and a resource for others. Majority of programs are East Coast. But I have no insights into why yet. And there are hardly any online programs.", says Keita.
Really cool, isn't it?
Use Kinect to navigate ArcGlobe
As reported by Richie, Esri’s Applications Prototype Lab released a sample for ArcGlobe that allows users to navigate in three dimensions using a Kinect sensor and simple hand gestures.
2 thumbs up!
Free online book: Dive into HTML5
Free online book: Dive into HTML5 by Mark Pilgrim.
The paper version is titled HTML5: Up and Running (O'Reilly, via Amazon).
Table of Contents
- Introduction: Five Things You Should Know About HTML5
- A Quite Biased History of HTML5
- Detecting HTML5 Features: It’s Elementary, My Dear Watson
- What Does It All Mean?
- Let’s Call It a Draw(ing Surface)
- Video in a Flash (Without That Other Thing)
- You Are Here (And So Is Everybody Else)
- A Place To Put Your Stuff
- Let’s Take This Offline
- A Form of Madness
- “Distributed,” “Extensibility,” And Other Fancy Words
- Manipulating History for Fun & Profit
- The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything
- HTML5 Peeks, Pokes and Pointers
Silverlight Form Submission using the Enter Key
Sounds ridiculously simple but still I need to look it up over and over again.
So here it is, documented once and forever: How to catch the Enter key (to trigger a search form submission for example).
XAML:
<TextBox x:Name="txtInputField" KeyUp="txtInputField_KeyUp" /> |
Code-behind (C#):
private void txtInputField_KeyUp(object sender, KeyEventArgs e) { if ((e.Key == Key.Enter) && (txtInputField.Text.Length > 3)) // feel free to remove the length limit { // submit form or whatever you want to do this.SubmitForm(); } } |
Note: I've added a clause so that the form is only submitted when the user has typed a minimum of 3 characters which makes sense when hitting a service for example. Feel free to remove that.
About Me
Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.
He has been designing map application for over 10 years and can't stop thinking about improving them.
Categories
- Accessibility (16)
- Code Samples & Tips (15)
- Conclusions (6)
- Design Guidelines (12)
- Designing Map Interfaces (5)
- Go figure (9)
- Good News (25)
- Here and there (29)
- Map Applications (12)
- This Week's Highlights (53)
- Usability & UCD (27)
- Web Design (28)
Popular Posts
- 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
- Dashboard Design
