UI

Designing Interactions: Status

trafficlight

Photo courtesy of flickr user tasuki

Traffic lights are ubiquitous and can be found in almost any city in the world. Whether it’s a pedestrian crossing, road intersection or anywhere with competing flows in traffic, you will always see traffic lights.

The concept is simple:

Traffic lights alternate the right of way accorded to road users by displaying lights of a standard color (red, yellow/amber, and green) following a universal color code (and a precise sequence to enable comprehension by those who are color blind).

  • Illumination of the green light allows traffic to proceed in the direction denoted,
  • Illumination of the yellow light denoting, if safe to do so, prepare to stop short of the intersection, and
  • Illumination of the red signal prohibits any traffic from proceeding.

http://en.wikipedia.org/wiki/Traffic_light

When it comes to designing software experiences this days, there is sometimes the need to display statuses against a record, usually coming in the form of a contrasting colour, self-explanatory icons, or even accompanied by text to better explain the status of the record.

Rather than re-inventing the wheel each time, why not look to the excellent design of traffic lights as a guiding principle?

More

Design Templates for Windows 8 Apps

Movie1

Having recently collaborated with Microsoft in accelerating Windows 8 App development, I’ve came up with these design templates to serve as reference in designing Windows 8 Apps, providing more clarity in how to convert a conceptualised design from a Photoshop file into a full-fledged Windows 8 Apps with the use of Blend for Visual Studio.

Download link and more information on these design templates after the break.

More

A Rough Guide to Making Feature Decisions

menu-design

I like relating product features into…food. Think about your product as a restaurant, and the dishes you’re offering as your features. To add a new dish to the restaurant menu, you might even need to consider everything from what dishes to sell, the name of the dish, the recipe of each dishes, how to present the dish, what cutlery to provide along with that dish, how it will be displayed in the menu and more.

Tricky, which sounds exactly like how tricky feature decisions are in product development.

During the past few months, work has been piling up and with deadlines looming and project milestones in the horizon, it’s been a challenging period, forcing everyone around me to work not only faster, but smarter.

It has also pushing everyone into making more snap decisions, which are basically decisions that are done swiftly without too much careful thought, mostly based on experience or intuition. There are many that say that snap decisions aren’t such a good idea, but I’ve found them to be very effective at times, if practiced correctly.

But there are also cases where we’ll be stuck in endless debates on what should be built, how should things work, and it all gets trickier when differing opinions cannot be aligned.

More

The Multi-Select Control Dilemma

multiselect1

When it comes to forms, there are loads of situations where our applications would like the user to be presented with a list of options and allow them to choose not only one, but multiple choices. Achieving that is simple, lets just use a checkbox list!

image

That’s works great, with 3 choices that is, what if we have a list of like…50 choices?

Ouch, that…might not work out. Even referring to books and sites on UI Patterns didn’t get me the best solution to deal with this scenario, so its back to the drawing table for me.

It wasn’t easy to decide on the best approach, so I’ll step through some of the solutions that I’ve thought of to deal with this problem and cap things up with a conclusion at the very end.

More

Layout Design 101

layout8

Photo courtesy of flickr user Jason Robb

One of the highest impact design decisions when it comes to software is none other than the overall layout, which should in turn determine the placement and arrangement of information throughout applications.

Many considerations will need to be made to determine the optimal layout to present information, and especially for applications that deal with a huge amount of data, complex processes, client facing, depended upon to perform day-to-day operations by organizations and people and many more. Such decisions could prove to be very impactful indeed – even to the extent of deciding the success or failure of an application.

Here are a few steps that could help get you going when masterminding the overall layout of your applications.

More

Resource Dictionary: The Basics

ResourceDictionary1

When it comes to XAML based technologies like Silverlight and WPF, there are many ways of approaching the design and styling of the overall GUI. Among them all, when it comes to dealing maintainability, scalability and balancing complexities, especially in enterprise applications, you’ll definitely need Resource Dictionaries.

So…just what is a Resource Dictionary?

More

Hello World!

helloworld
It’s great to finally have RIA Blog up and running!

As you might have already expected, this blog will focused on everything related to UI/UX design for RIA solutions. It will also lean more towards XAML-based technologies like Silverlight and WPF, of course with some HTML5/CSS3 as garnishing.

More