Michael Gaigg: Über UI/UX Design

28Jan0

Redesigning our internal Team Site

Posted by Michael Gaigg

Paper sketch draft

Paper sketch draft

I could have titled this post "The importance of sketching" or "Paper and pencil are still hip". The truth is, I didn't even realize about the fact that I do a lot of sketching on paper, as a matter of fact I just recovered my beautiful drawing from going into the shredder. I think the beauty of sketching on paper is that the ink just flows. Sometimes you don't even know where it will lead you when you start. It keeps you minimalistic, not too much detail can be crafted on a tiny piece of paper (at least I can't).

Graphical Design

Graphical Design

Once I had the draft in hands, it was just a matter of whipping the right amount of bootstrap with some custom HTML and funky JavaScript, voila, our internal team site came to life... So you could say that prototyping can be done in HTML without the need for wireframes, I still doubt that. Without at least the genius idea on paper I wouldn't be able to code as efficiently as I did.

The coding part was only the cherry on the pie, a quick logo, a menu, a hero unit, some blocks and fancy graphics, tadaaaaa. I used PHP to create a 'controller' with content being included on the fly. Yes, good old content, still working on that piece, but no worries, I got it under control 😉

How do you design? Do you sketch/wireframe? Or straight to code?

10Jul0

Lifespan is an important Design Decision

Posted by Michael Gaigg

Mayan mahem

Mayan mahem

The lifespan of a planned application or website is an important (and often overlooked) requirements influencer. Many questions come to mind that appear to be technical in nature but have to be understood by the designer to optimize their design decisions on capabilities and known limitations of the target technology. Designs can never truly be technology agnostic and in my opinion if they are, then this fact will create gaps between design and implementation later on. So you better be aware of them.

Typical Questions to ask:

  • Will the app be likely be superseded by something else within the next 6 months?
  • Is another known technology catching up and soon more prominent than our current target technology?
  • Do we rely on third-party tools/plugins that need to be maintained or maybe will render our application unmaintainable?

Especially the last question bares high risk of failure. If you rely on a JavaScript's front-end framework - like we all do - say, jQuery UI, chances are that our designs will a) be limited and b) sometime be stuck in the middle once a major redesign hits us. If the redesign happens before the end of the planned/anticipated lifespan of our app, cost and effort to upgrade might not be feasible and thus we cannot upgrade to the latest versions anymore. The End.

Scalability

Amount for various cases where your design needs to be flexible enough to handle changes over time. These can include:

  • Administration: more objects (users, items) are added over time. Does the app provide pagination? Search? How easy can they be plugged in?
  • Load: processing times increase. How will the system display delays in page refreshes? Download times?
  • Client requests: more functionality needs to be added. Is the design flexible enough to accommodate another button or menu item? Etc.
  • i18n: multi-language support needed? Now? Later? Maybe?
  • Accessibility: is it worth the effort?
  • Support for MVP (minimal viable product) and incremental improvements?

In many ways the Maya calendar and it's associated 2012 phenomenon are a good example for design decisions based on lifespan. Who cared back then that after 5125 years the calendar would need to be reset (or cannot handle more combinations), like many software systems didn't take into consideration what is now known as the Y2K or Millennium bug which was caused by the practice of abbreviating a four-digit year to two digits for pure storage consideration, which nowadays in our abundance world of storage is really hard to follow. But hey, it costed an estimated remediatioin of $416.- in today's currency world-wide.

Lesson

Take into consideration the lifespan of your app when designing it. Any negligence is careless design and may result in increased cost or even an unmaintainable or unusable product later on.

What are your experiences with lifespan?

29Feb0

Windows 8 UX design guidelines

Posted by Michael Gaigg

The Windows 8 UX design guidelines are out. They are part of the Dev Center for Metro style apps and provide some nice learning resources that include

  • Design Principles - Understand the basic principles of great Metro style app design.
  • UX patterns - Learn how to correctly implement common patterns in Metro style apps like navigation, commanding, and touch interactions.
  • UX guidelines - Discover recommendations and requirements for building Metro style apps with the proper look, feel, and user-interaction model.
  • Downloading design assets - Get started designing apps quickly with a portfolio of reusable wireframes, redlines, fonts, and other useful design resources.
  • Assessing usability of apps - Assess your app's design to ensure the user experience is outstanding, and that users will find it useful, usable, and desirable.
20Dec0

Highlights for Week 50/2011

Posted by Michael Gaigg

5Dec0

Highlights for Week 48/2011

Posted by Michael Gaigg

27Nov0

Highlights for Week 47/2011

Posted by Michael Gaigg

22Nov0

Wireframing as an Indicator for Problems in your Project Structure

Posted by Michael Gaigg

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.

5Jul0

Highlights of Week 26/2011

Posted by Michael Gaigg

10Jun0

Welcoming Yiwei Ma to our UI Design Team

Posted by Michael Gaigg

This week Yiwei Ma (LinkedIn) joined our design team as a UI Engineer.

He earned his master from the University of Michigan specializing in Human Computer Interaction (HCI) and has a BS in Computer Science and a background in graphic design.

I'm very excited knowing that we can now further improve our ability to designing map interfaces. Welcome on board!

Page 2 of 512345