Michael Gaigg: Über UI/UX Design

Highlights of Week 02/2012

Michael Gaigg — Tue, 10 Jan 2012 17:36:38 +0000

Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome :) Cheers!

Cross Browser HTML5 Progress Bars In Depth (by Zoltan “Du Lac” Hawryluk)
15 Web Design Trends to Watch Out For in 2012 (by Jake Rocheleau)
Profiling CSS for fun and profit. Optimization notes (by kangax)
Google Maps: Designing the Modern Atlas (by Willem Van Lancker)
Password strength verification with jQuery (by Jim Nielsen)

New Year’s Resolution: Gift Books (don’t lend them)

Michael Gaigg — Thu, 05 Jan 2012 19:40:13 +0000

I used to have a rule (you know, a rule helps you solving a problem in your life that you then never have to worry about anymore) that said: never lend a book, always gift it! I don’t know why or when I stopped applying this rule but my thinking behind it is:

You value the book but somebody else values it more at this time
Lending it will consume your energy remembering who you lent it to end when
The other person constantly feels bad for not returning the book to you up to a point when it becomes real guilt and shame
The other person cannot really enjoy the book in fear of marking a page or paragraph or leaving coffee stains

So the solution is: Gift the book! In that way both parties feel good.

Highlights for Week 50/2011

Michael Gaigg — Tue, 20 Dec 2011 21:06:40 +0000

That “JavaScript not available” case (by Christian Heilmann)
10 Twitter tools for better social networking (by Leo Widrich)
How to Design the Best Navigation Bar for Your Website (by Daniel Alves)
Product Graphics: 6 Techniques to Make Images More Informative (by Jake Rocheleau)
jQuery Scripts for Creating Cool Image Slideshows (by Chris Spooner)
Web design predictions for 2012 (by Debbie Hemley)

Highlights for Week 48/2011

Michael Gaigg — Mon, 05 Dec 2011 18:02:52 +0000

15 Responsive CSS Frameworks Worth Considering (by Paul Andrew)
Complexity and User Experience (by Jon Bolt)
Origins of the Apple Human Interface
Internet Visionary Paul Otlet - Networked Knowledge, Decades Before Google (by Meike Laaff)
The Anatomy of an Experience Map (by Chris Risdon)
A Complete Color Spectrum of Web Design Inspiration (by Chris Spooner)

Minimalist Web Design: How Minimal is Too Minimal?

Asking for Feedback

Michael Gaigg — Tue, 29 Nov 2011 06:02:29 +0000

Generally it's not a good idea to listen to your users; it's better to observe their behavior and actions. When you do ask for feedback though, be careful to not end up with a sack full of new requirements. Some phrases (from the hilarious video) that I'm only too much familiar with:

I'm just throwing things out there
You are the author (designer), you know best
I am making sense, right?

from Asking for Feedback

Highlights for Week 47/2011

Michael Gaigg — Mon, 28 Nov 2011 06:01:19 +0000

CSS3 secrets - 10 things you might not know about CSS3 (by Lea Verou)
Announcing jQuery Mobile 1.0 (by jQuery Mobile, Todd Parker)
NASA now seeking candidates for astronaut positions (by NASA)
A Look Inside Mobile Design Patterns (by Theresa Neil)
Using Fonts for Icons… (by Chris Coyier)
Make Your Own Fonts: Free Font Editors (Elsewhere on the Web) (by Jacob Gube)
Which Custom Web Fonts Solution Should You Use? (by Chris Spooner)
Create CSS3 Buttons Compatible with All Browsers (by Madalin Tudose)
Quantifiable Design: How to Remove Subjectivity from the Process (by Stuart Silverstein)
25 Google+ tips and tricks (by Vail Joy)

Wireframing as an Indicator for Problems in your Project Structure

Michael Gaigg — Wed, 23 Nov 2011 05:37:28 +0000

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 typical 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

Michael Gaigg — Sun, 20 Nov 2011 06:21:16 +0000

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

Personal Favorites

Good Advise (for free ;) )

World Usability Day 2011

Michael Gaigg — Thu, 10 Nov 2011 17:29:31 +0000

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

Michael Gaigg — Wed, 09 Nov 2011 19:30:20 +0000

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

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

Flipboard

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?