Project Example I Built

Flair builder is built as an Adobe Flex application and allows for quick and rapid building of both lo-fi and highly interactive prototypes. In total I would estimate it took me about 1 – 2 hours to feel comfortable enough in the application to actually get to building out a project. Projects allow for both multiple pages, as well as master pages which I found to be useful when coping elements across new pages such as a menu.

As for the individual components Flair Builder does a good job of giving you some highly interactive pre-built components. Some of these include, dynamic menus, interactive tab structures, graphs, charts, trees, multimedia controls, datagrids, etc..

Flair Builder Widgets

I was especially happy with how easy it was to align elements on the screen. As I dropped a new element into place a cross-hair was displayed with which you can use to line up your current element with previously placed elements.  In addition, most of the interactive widgets provide states for interactivity. These events could be modified to perform other interactions when in preview mode, like launch a pop-up .You can view this interactivity by switching to preview in the “View” menu.

The application looks to be in the very beginning stages, but does have a lot offer for quick prototyping. In my tests I was able to do almost everything I wanted to in illustrating my application UI. There were a few small bugs I came across, but nothing that prevented me from getting the initial master page and a few demo pages put together. There is an active community for the tool and the developer seems to be open to suggestions and ideas for interface improvements.

The Good:

• Flair Builder did not seem to slow my designs down and made it quick to make interactive mocks that users could read(my handwriting isn’t the best).
• Rapidly constructed wire frames with out a hitch
• A large assortment of widgets with a variety of interaction states
• The ability to group elements and quickly copy an entire group.
• Developer has been actively pushing out new builds
• Ability to work on multiple projects
• Easily able to visually present complex interactions: modals, messages, etc..
• Large assortment of icons available to use

The Bad:

• No print option directly from the File menu. I frequently want to print out iterations of a design to Paper.
• Currently only one theme for the widgets
• Doesn’t remember my last saved project

Conclusion
Compared to other tools on the market flair builder is lacking in a few key features, but as of the initial writing of this article. Over 2 new versions were deployed. I also really want to see some advanced printing features in the next version. I like to take and scribble on my mocks. I really feel the strong points of the application are in the interactive prototype features. It’s a strong contender and I look forward to seeing what will come next.

UI Design Guide Rating: ★★★☆☆ 

Related Posts:

• No Related Post

During the course of this research I used many front-end UI interfaces and house databases. I came across one such search that was extremely tricky to use. Notice the image below and see that I am required to type in a zip code, but then I am presented with a GIGANTIC list of options in a multi-line text box (some 100+).

So here is the challenge to the community. If you want to participate great. For this particular problem your goal is to come up with a new and better design for the interface presented. If you want you can post a comment that goes to your design illustration etc, or you can simply e-mail me and I’ll be posting some of the entries here along with author and web site link.

There are no prizes. This is strictly for education purposes. There are no right or wrong answers. On To the challenge!

The Challenge:

Area Search OLD WIDGET

My Example:

In my example below I took two routes. One allows the users results to be filtered down to a smaller number by choosing the area in a drop down. The other route I added some interactivity with the mouse. Based upon the 2 filters search type, and area a user could click the “LET ME DRAW IT” and would be presented a zoomed map of the region. Then they can simply draw a box around the region of interest. Click search and then a number of different things could happen. A user could see houses pop up on the map, they could see a directory listing to the right. The point of this challenge is to design something different and hopefully better than the original

My New Design Prototype

Your Design Examples:

Related Posts:

• February 18, 2009 — Design Experiences: Don’t Rub Your Product Experience All Over Me.
• February 10, 2009 — The Most Important Questions to Ask When Building A Web Application UI.
• May 12, 2009 — Book Reviews: Neuro Web Design What Makes Them Click.

The second change is I started doing 2-3 minute audio blogs to supplement articles as well as other topics on my mind. The first one was posted today  The audio blogs will show up in the twitter feed to the right. You will also see them show up if you are following me.

I plan on doing an article featuring some of the best of my Audio Blogs every month or so. Thank you for your readership. The next upcoming article I’m working on takes a look at a fictious application “Babyspace”  as we look at rapidly testing usability and design and knowing what to test when.

Also I will be posting a blog roll sometime in the feature of all the hundreds of blogs I pay attention to. Right now I have about 1000+ articles to skim so I am a little bit behind in my daily routines.

Find Me On Twitter, AudioBoo:  @uidesignguide

Related Posts:

• No Related Post

The keynote is about to start and looks to be good ” True Confessions of a Design Therapist” – NORM COX.

True Confessions of A Design Therapist

Bio: 30 years in the UI field.

The love of titles the title generator: There is a great image of a slot machine breaking up the titles into a random assortment.
I love the fact he talked about the birth of interaction design. The initial creation of typewriter displays here in Dallas Texas for XEROX.

Right now he is going over some details about Markup(1976 Alto) application.

9:32 – There are a lot of god pictures on the screen right now of ICONs from the 1978 – 1979. There is no change with the crazy arguments you have. Norm is referring to the lengthy (Monthly) discussions about the arrow directions on windows…

9:37 – IBM’s recognizatin that user experience was a major part and portion of brand idea and maintenance, Norm becomes consultant in UI design, and they become preachers of UI.

9:39 – he work on the Atlanta Olympics campaign,

9:44 – New project working on some pizza instructional materials. – for a large comapny (pizza hut? perhaps)
“Youre building your pizza upside down” – There is an aesome slide of the worst document for making pizza’s ever.
What’s the real problem with this crazy interface (think of the worst poster you can possibly think of that instructs you to do something and is all messe dup).

My Summary:

Does a title mean you know how to do your job? Or is a title simply a way to pigeon hole someone into a position and silo them off into an area. Then again if you have a title that is not seen to be helpfull or directed to a job in today’s market you just aren’t going to be hired. You can have skill sets outside of the main but without some indicator how does someone get recognized and eventually hired? Food for thought!

I want pizza!

10:07 -  Welcome to the New World: When Creative Meets UX

The presntation is as one person put it “pretty lite” I missed blogging becauseI was up on the stage representing one of the users in the “space of user expereince” Basically a visual illustration of your users expertise grouped by product / task experience.

10:36 – 2nd speaker for this session is up here.   Talking about brand and experience with Starbucks example.

How do you measure brand and the perecption of branding,  because I have a giant speedometer my car goes super fast!

10:42 -  http://www.socialmention.com -    It was an example of changine a user experience by delivering excity perceptions. 

SHowing Word with every option showing – vs notepad -  “Comment – Reminder that microsoft is a sponser:) – That was funny thing to point out. Personally I’ll use whatever brand is going to help me get the job done quick and with the least amount of bullshit.

10:48 – My space brand is a mess – I agree, but then again people like living in that mess.   So who’s right and who’s wrong?

11:04 :  MOved to Usability or Strategc User Experience – Communication Value to Executives:

Usability testing is good – but it is not the end all be all.

Designing the enitre user experience – On a side note: This is one thing that I am a big advocate of. I attempt to design from a systematic approach. Of course this is going to depend  upon the system and so I sometimes end up designing from outside in. Sometimes you just cant do that.

Pictures up on ascreen of Peach Tree Accounting,  redesigning the UI.  Peach tree is still a crazy complicated piece of software. Heck quickbooks has some of the same problems.

11:18 -  Peachtree case study, particpartory design,

Why would peach tree fail – Registration process was limiting the product, web registration only during off hours (WOW) 18 screens to register online.  No wonder no body wanted to use the product, hi prices, 

This was actually a pretty interesting and engaging conversation so far……

11:23  – Turning more to the topic at hand.

“Changing organization structures and incentives to refocus on the customer is hard work.”

11:27 -  Switching to Kaare Hanson

Experience design creator at Intuit,  changing an organization from the inside out:

Leading, Directing,

11:35 – Brand attributes to tackle, 

Complainers > Problem Idenitifier > Problem Solver
Primadonna > Preacher  > transparent driver
Narrwoly Focuse d- To connected to the business.

Customer experience map – with starbucks example watching a person inside of starbucks to watch the journey of the person. Tis was kind a neat thing. Speaking of which I must find caffiene!

1:35 -

There was a great sketching session that happened earlier during lunch. It’s now 1:35 but there is one drastic problem there are no PLUGINs!. My laptop is at critical mass, the battery is about die. So what comes next!

1:40 Most people dont know what users experiece design is – Teresah (speaker)

3:02 – I have found a power connector just in time to get into the 

Erica O’Grady

Write that down! Van Wilder’s Guide to Social Media

While were waiting for this to start.

Social media consultant do you know that social media pay ranges are from $250-$500 an hour.  Wait till the market starts to settle out.

<h2> Van Wilder’s 8 Life Lessons </h2>

Companies Worry About

  – Loosing Control
  – Time Constraints
 -  Trade Secrets
 - Buzz words (social Capital)
 - Personal Brands

Handle overwhelm with day tight compartments -  YOU & Your Company LIfe (picture of phones with past , present, future)

Search A monitor – Chartbeat, Anlaytics, Twellow, Twitter Search, Tynt,   

AUTO POSTING:  Tweetlater, Blog Posts, Link Posts,

GTD: 4 hour work week

FOCUS: Simple messages, meaningful, realtionships.

3:25 -

Stop Focusing on Influences, focus on the people that have the passion.

Treat everyone like a VIP, Be Remarkable,  Become genuinely interested in your clients and customers, promote and support the thigns you clients care about too,

<h2>Social Media Failures </h2>

House M.D., Quiznos, Motrin Moms, Skittles, Burger King,

CUT IT OUT

Singing up for every social meda site, being inconsistent, focusing too muhc on buzz, too much on the virtual world, Bankrupting social cpaital, too much monetizaton

WUFFEE – Factor (BOOK)

3:45:  Social MEdia experiement the Presenter is experimenting with how man people can we really get to know and call friends.

4:04 -  What is social medial – LARGER CORPORATIONS

Social media should be a conversation……a GREAT GREAT big one…

Over 41% of Internet users visist socail networks,  And a lot more statistics …, Twitter-Jacked it’s a cute name just like the hey day of cybersquatting…

4:08

Same motrin media campaign was shown up above but it was funny because they showed the FAKE video involving what else but boobs!

4:14 – Why should I do the Social Media Thing? -  What is the point?
Four-step approach to social strategy (people, objectives, strategy, technology) - FORESTER’s

CUSTOM SEGEMENTATION FOR SOCIAL MEDIA

Creators, critcis, collectors, joiners, spectators, inactives,

4:18 – How Do you do it right?

Engaging, education, introductions, humanizing, brand monitor, early intervention, intelligence gathering, trend watching.

Use For Evil:

astroturfing (fake posts) shouting, preaching,

DELL has down a good job of this:  IDEA STORM -  I saw this and heard the community manager speaker at SXSW it was a really good idea and shows how social media can expand and be used in your business.

4:27 -

How do I integrate:

start from the inside out, bottom up works better than top down, listen, converse collect knowledge, be committed, be willing to risk,, (this is a key factor risking is a natural issue with social media growth and building.

CLosing DOWN – i’ll have closing remarks about the conference later…

CONCLUSION

Wow, so I just saw the stats about 500 people were in attendance at the 1st annual BigD Design conference. I would consider that a success. There were a few panels that were good and I can imagine that if they choose to do this next year it could only get better.   To those that I met today please look me up online I would love to continue our conversation. Also you can follow me on twitter!  @uidesignguide.

Related Posts:

• No Related Post

The book takes a look at web design from a psychological point of view . Inside Susan covers topics ranging from how the brain functions, to what primary instincts are triggered by certain events we experience in our life.

If you have ever taken college psychology a lot of the material about brain composition, comprehension and the like will seem very familiar. What is great about this book is how Susan manages to apply these basic human survival functions to the usage of web sites.

Inside you will find a lot of research and case studies, each concept building upon the last and ultimately bringing home the abstract ideas to concrete web activities. 

One particularly interesting scenario revolves around product reviews and how we can structure these to appeal to a web users:

“Imagine you’re at a chain store looking for a HD flat screen television, a random bystander comes by and you ask him what he thinks of the TV.”

Perhaps you do this with thirty other people in the store, asking each of them what they think of the TV. It sounds kind of foolish, but how many of us repeat this scenario multiple times a day online?  We are easily swayed and influenced by the ratings and reviews of strangers online.  We just don’t know who or what the experience level is of people rating a product online. Yet, when we see the 130 people gave this 4 stars. It directly influences our purchasing decisions. Now that is power!

The book continues to take a look at this method and refines the concept because of the ever changing skeptical nature of web users. Now we may find the review rating backed up by technological, or subject matter expertise.

Overall this book  is a great read and should cause some re-reading if you really want to get the most out of it. The first 1-7 chapters really tap into your “old brain” and you may want to stop reading a bit and just sit and think about how you can apply them to your web site. I know  I did this.   Chapters 8- to the end really rein-force a lot of the concepts. What I found however is that my brain was so busy thinking of ideas, and ways to change content, etc I had already come up with a lot of the material that was covered in these subsequent chapters.

Bottom Line: Get the book, read it, and practice what you learn.

Related Posts:

• June 10, 2009 — UI Design Challenge: Redesign A Filter Widget
• April 3, 2009 — UI Design Dissection: Google Reader What Makes an Application Great?
• February 10, 2009 — The Most Important Questions to Ask When Building A Web Application UI.

• Keynote – Plenary–The UX Landscape
• Welcome to the New World: When Creative Meets UX or maybe  What Makes Them Click the author of a great book I’ll be reviewing up here soon.
• Communicating the Value of UX to Executives  though I really think Stephen Anderson seductive interactions will be great as well!
• One of the lunch sessions not sure what yet.
• Latest Design Patterns that You Should Know or Tools and Methods to Learn, Navigate, and Make a Name for Yourself in the UX Landscape
• UX Spy School
• Case Study: Redesigning MySpace
• Using Social Media in Large Organizations

There looks to be a lot of great information and potential for information exchange.  Look forward to seeing you out there if you decide to go.

Related Posts:

• February 16, 2009 — SXSW Interactive 2009 – Pre-attendance Plans – and Survival Tips

The purpose of the Flickr group is to share wireframe photos of all types.

There are a lot of great ideas floating around in the group. If you are a UI designer and want to publicize some of your wireframes, methods, etc. I encourage you to do it. In the end it can inspire and teach you new techniques. After I finish working on a new wireframe project for an application I’m building I hope to get some pictures listed in the group.

Related Posts:

• March 20, 2009 — Blog Respose: Bowman Leaves Google
• February 12, 2009 — Blog Response: IE 6 The Devil Not In Disguise
• February 14, 2008 — Did You Know Paper-Prototyping Adds Value If Done Right?

For those not familiar with Google Reader, it is a RSS aggregation tool. Basically, every blog I keep track of (some 120+ blogs) is added to a list that then goes out grabs my RSS feeds from all my various sites and puts them in one nice window to read. There are two viewing modes. One is the ability to view the entire RSS text, or I can view the title of the post in a quick list. I personally found viewing all the text at once a much better way to get the maximum amount of valuable knowledge crammed into my brain.

What Makes Google Reader Great?

I never thought this simple application could be so powerful, but I use it every day and in different ways. The application for me has expanded beyond a simple one-sided user experience.

In any given day I may use it for any of these multiple activities:

• Discovering new blogs and more content in my field
• Locating new and exciting applications
• Keeping up with the latest trends
• Driving adoption of my own blog
• Research
• Keeping track of interesting stories
• An archive..

One of the greatest features I use all the time is archival tagging. I frequently have about 400 posts+ a day to read.  I use the tagging feature to mark research that is relevant to me. For example my tag list contains articles on “CSS Fixes, UX Methods, and my favorite “Web Applications: Category.”  I basically identify new exciting or interesting applications and tag it to the category it belongs.

For Example: Application discoveries are tagged as followed:  Web applications social, web applications shopping, web applications crm, etc.(see image to right).   This is a very valuable tool because I may need to view reference applications for ideas, new patterns, etc.  I simply click the tag and BAM! I get to see all blog posts I have ever tagged with this category. Now that is research power in your hands!

What’s Keeping Google Reader From Excellence:

• A good IPhone application that will synch seamlessly
• Better management to skip through groups of posts. I generally click the “All” button to read through an entire list of my newest posts. If you close your browser, jump into a new window sometimes the application forgets what is “new.” When you have 400+ posts staring back at you this can be overwhelming. I have to click next 40 times to get through what I’ve seen or already categorized. I want a button next to “next” that allows me to choose the number to skip. IE: Skip 20, 40, 60, 100. That way I can get back to truly reading just the newest posts.
• The ability to recognize posts that are titled the same and have the same source will eliminate duplicate entries for reading. This generally happens when you subscribe to a RSS blog aggregation site. There tends to be a lot of overlap with blog posts and a way to filter would be awesome.
• Better ability to connect with fellow bloggers
• Social grouping abilities (I’m not sure what this would be but it may be neat) Consider I spend a lot of time in this tool compared to facebook, myspace, etc…

What Makes An Application Exceptionally Indispensable

In the case of Google Reader it I can sum it up like this:  The application allows me to expand usage beyond it’s original design. It allows me to adapt it to my own work-flows, patterns, thoughts, ideas and creativity. The indispensable application allows me to use it how I want, when I want and, where I want. 

The indispensable application is the  simplest invention that allows for uses beyond it’s intended purpose. The application becomes so ubiquitous that we don’t even think about how it works ,we just know that it does work. You never question the wizard behind the curtain who is pulling the levers. You simply accept its ease of use and hope it never changes. That is the challenge we face when building exceptional UI. The search to find that happy medium is the difference between adoption and failure. It’s a hell of a lot easier to find the failures.

Life In The Fast Lane

I’ll leave you with just one more tidbit of information. If you are a UI designer always ask yourself, no matter what application you are building. Would I use this? It doesn’t matter that the application doesn’t personally apply to you. You can still assess the interactions. Is option A too cumbersome for even you to grasp? Is option B time consuming? Does option C have more steps involved, but causes less confusion? Does option D break accessibility? Does option E completely eliminate future steps?  It’s up to you to decide how to drive the experience. After all the user is just along for the ride and they can easily hop a cab, hitch-hike or walk. You you really don’t want them to do that now do you?

Related Posts:

• June 10, 2009 — UI Design Challenge: Redesign A Filter Widget
• February 18, 2009 — Design Experiences: Don’t Rub Your Product Experience All Over Me.
• February 10, 2009 — The Most Important Questions to Ask When Building A Web Application UI.

How can a process that’s aimed at creating user stories and defining what the user “wants” be so misdirected? What happens when the process comes before the product? Can you really sacrifice usability  for more features and rapid development?

What is this Agile You Speak of?

For those that have not worked in an Agile development environment let me give you a brief summary. Agile is a process that is truly geared towards test driven development. There are many forms of Agile. Some of these methods include, SCRUM, XP, LEAN. XP. While these different versions have slightly different implementation models they all are focused around developing and delivering slices of user stories (features) in an iterative process. There are many books you can find out there on Agile Methods. Some of the leading industry experts include: Mike Cohen and James Shore. You can find a ton of information on everything from product owners, TDD (test driven development), user stories. What you can’t find is how the UI and the design fits into the process. In fact, in many books on Agile., UI is given 1 page or less.

Great Now Tell Me Where Does the UI Designer Fit in This Process?

This is a tricky question to answer. How can the end user experience be so outright ignored? More importantly in such fast development cycles how can a UI designer stay above the water? Is there someway to apply an iterative Agile design process to the UI development cycle.  What are these guru’s of Agile missing?

 I’ve read many books on the subject of Agile. My last count was somewhere in the neighborhood of six- seven. And would you believe out of all these books not one of them addresses any processes from a UI, Interaction design perspective. In fact many of the books just give the following worded mantra in some form or fashion “Leave the UI out till the end.”

In my quest to answer these questions I spoke with many prominent UI designers as well as designers within other jobs, corporations, in-house designers. No one can come up with a singular defined method of how a UI designer(s) works in an Agile cycle. There are tips, there are ideas, even some potential “best” practices, and external methodologies. Yet, designers for the most part are not factored into the developmental  process. We are left to fend for ourselves. And if we don’t speak up we will be hit by the development bus.

Great Design Just Happens Doesn’t It Regardless of the Process or Technology?

Wait a minute! If you have actually developed software you should know that with PHP, JAVA, and .Net Programming choices made early on can directly effect the UI. In an effort to couple quick templated controls you often are stuck with manipulating the design to the control, include, etc.. You can find this in most every corporate environment, small design shop, etc. This can be especially true with inexperienced teams that don’t surface UI and allow it to be tinkered with as needed. Take .Net 2003, 2005 and more recently 2008. There still tends to be a tight coupling of design to programmatic elements. The point of this development tool is to help a developers quickly slap together something that is passable, rapid to produce and that “look nice.” Of course, looking nice doesn’t mean usable. If you read this blog you probably are well aware of that fact. I’ve had many arguments about the importance of design.

Great design has to be fostered and nurtured in your UI. It has to happen at an early stage, even if it is expected to change rapidly.  The trick is having the skills, knowledge, research, methods, and tools at your disposal in the blink of an eye. If your a UI team of one you have to be lightning fast, organized, visual, and quick to think. If you are a UI manager you have to build and align your team strengths to each other and then unify that vision into one cohesive brand.

For now I’m not going to answer the question, but I want you to think. In what ways can a process aimed at produce working software for the users leave out the fundamental parts the users use? And why would some assume slapping a UI on at any point in the process produces anything but a mediocre product?

For those coming from an RSS there is a funny comic below:

Authors Note:

I’ve had this article in draft mode for some time. I wasn’t going to publish it but felt there were a lot of good points and strong arguments and methods to build upon in my two future articles. With that in mind I figured I would let my audience dissect it and provide feedback.

Related Posts:

• February 25, 2009 — Agile UI Design Series: UI Design in an Agile Project Cycle Part 1
• April 3, 2009 — UI Design Dissection: Google Reader What Makes an Application Great?
• February 18, 2009 — Design Experiences: Don’t Rub Your Product Experience All Over Me.

The quick summary is this. He left because of design V.S. engineering issues. The article goes on to talk about the almost obsessive need to validate and back up every design decision with statistical data. While it is true that design does have a logical component a lot of how we precieve design varies from person to person. That is why it is necessary to hire a person with experience and knowledge of fundamental design principles.

From the blog post Bowman goes on to say:

Yes, it’s true that a team at Google couldn’t decide between two blues, so they’re testing 41 shades of blue to see which one performs better. I had a recent debate over whether a border should be 3, 4 or 5 pixels wide, and was asked to prove my case. I can’t operate in an environment like that. I’ve grown tired of debating such minuscule design decisions. There are more exciting design problems in this world to tackle.

I’ve been in this boat more times then I can count. And while most of the blogosphere is jumping on these statements as being the reason for his leaving. Personally I believe  it was a series of design by committee driven ideals that pushed him out the door. I’ve been there, and sometimes you just don’t want to fight the battle any more. This is especially true if you have constantly fought about the same issue (s)over and over again. IE: This color is wrong, This should be an image, I want sound on my homepage, etc…

When Is Enough Enough?

At what point do you either a just not care, or b continue to fight and push your own insanity to the breaking point. As UI designers we fight these challenges every day.  It is no easy task and sometimes only your passion for exceptional design can get you through the next day, project, or year. 

In one way it is comforting to see that even huge “cutting” edge companies fight and struggle with these issues. In another way, it is sad to see design and aesthetics reduced to a mere algorithm. This is especially disheartening when you are considered the expert and were hired for your skills, experience, and love of great design.

No one can work in an environment where they are praised for superior skills one moment and then second-guessed the next.

when I have worked with teams of designers and lost one of the flock it can be morally crushing. This is even more so if the reason for the team member leaving is due to design difference. In the case of google it appears machine v.s. man has won this round.

Related Posts:

• February 12, 2009 — Blog Response: IE 6 The Devil Not In Disguise
• April 27, 2009 — Blog Response: Do You Love Wireframes?
• February 10, 2009 — The Most Important Questions to Ask When Building A Web Application UI.