The Future of User Interface & Design Technologies

The future if user interfaces - The way we interact with technologies have evolved a lot over the years. Right from the punch cards, typewriters, prints, to monitors, mouses, keyboard, buttons to all the way to the new track pads, voice recognition, multi touch, hand held, gestures and interfaces designed to make it more easier.

Lot of interaction patterns has been changed from "Smaller Vs Bigger"; "Cursor Vs Non Cursor" ; "Less Text Vs More Images"; "More Design Vs Less Design"; "Single Cursor Vs Multi Cursors"; "Vertical Scroll Vs Horizontal Scroll"; "Fixed Layout Vs Scalable Layout"; "Audio Vs Video"; "Remote Vs Gesture" & so on...

Future of user interface design

View more presentations from ranzeeth.

THE FUTURE OF INTERFACES still evolving & this gives more opportunity for us (UX'ers) to create great experiences.... I have created a presentation which has various types of user interfaces which gives you a flavor of future current / future trends of user interfaces.

I have uploaded this presentation in SlideShare and immediately got a email from SlideShare that this presentation "The future of Interface & Design Technologies" has showcased in SlideShare main Design section as a awesome master piece by SlideShare editorial team. Again after couple of hours got a email from Slide share that this presentation is hot in facebook and they have moved it to Slide Share Home page. This made me more happier, so called customer experience & satisfaction :)

Storytelling for User Experience...Crafting stories for better design

We all tell stories. It's one of the most natural ways to share information, as old as the human race. Stories help us gather and communicate user research, put a human face on analytic data, communicate design ideas, encourage collaboration and innovation, and create a sense of shared history and purpose. 

Whitney Quesenbery and Kevin Brooks have written a book on “Storytelling for User Experience … Crafting stories for better design” This book looks across the full spectrum of user experience design to discover when and how to use stories to improve our products. Whether you are a researcher, designer, analyst or manager, you will find ideas and techniques you can put to use in your practice. 

I had personally met Whitney Quesenbery and Kevin Brooks at Germany and had a good discussion on this. They have give me a good perspective & how imporant creating peronsas with story telling.  Unfortunately, I was staying in the same hotel where Whitney was staying and got some free time in the mornings to discuss & learn more on Story telling User Experience. I personally thank Whitney Quesenbery and Kevin Brooks for sharing knowledge and guiding me. I have taken some notes and made a graphic to share you folks!

Story telling help to share research and design insights in a compelling and effective way. Struggle to communicate the meaning of a large body of data in a way that everyone just "gets" and want to explore a new, innovative idea, and imagine its future.  Storytelling starts with listening. In formal and informal user research, make time for people to tell you their story. You might be surprised at how many great stories (or story fragments) you'll collect if you let them. Just say "Tell me about that" when you hear the start of a juicy story.

Put some stories together and you might have the spark of a design idea. Maybe you call them user stories, or scenarios, but they are all ways of thinking through not just what will happen, but how the characters (users) will react to the experience. And finally, what's a usability test task, except a story for the participant to finish. Make it dramatic or matter-of-fact, but tell a story that launches them into a situation they want to solve or an experience they want to explore.

Get your own copy of Whitney Quesenbery and Kevin Brooks book on “Storytelling for User Experience … Crafting stories for better design” and know more insights, this book is worth investing.

My Photography gallery on Cooliris Wall

My Photography Stream...Ranz love Clicking!!!
Posting a 3D wall on your site is as easy as 1-2-3.

Cooliris Express is a Flash®-based version of the Cooliris Wall you can embed into your site for all visitors to enjoy. Create your own Wall with our online builder in three simple steps:

Select content1
Choose from Facebook, Flickr, Picasa, YouTube, or any Media RSS feed.

Customize2
Change the appearance, number of rows, title, and more.


Publish3
Post to Facebook, Twitter, Blogger, WordPress, or your website.

That's simple... is it not? I have uploaded my photo stream.SMOOTH, CULTIVATED, AND FULLY INTEGRATED. Check this and enjoy!

Ford GTXI - Gear Up!

My first table top photography experiment..! Equipment used..Tourch light bounced from front through a "KICK" perfume on a flat teak table. Background used for this is a white board. A match stick from top to get the light reflections..

Subject: Hot wheels Ford GTXI
Camera: 450DXSI Canon
Lens: 50mm Canon
Technical Spec: ISO-800; F 1/8
Post processing: Photoshop; Light Room
Photography & Design: Ranjeet
Project 365 - Day29
Copyright © 2010 | Ranz | www.ranjeeth.com

AIR INDIA “USER IN EXPERIENCE” Design

Air India online ticket booking experience...nothing worse than this...
Recently, I was looking for fight prices to Bangkok and found Indian Airlines flies from Hyderabad - bangkok from yatra.com

Once i clicked the URL www.inianairlines.in it displayed Air India logos and site branding. Then i thought may be these two companies have merged now. Rechecked the URL but still it showed me www.indianairlines.in. There are 3 sections and each section has button just like a drop down design.

No idea where to click as there is any description. The 3 options are Air India Express, Air India AI Code flights.. (No Idea what this mean).. Air India IC code flights.. (No Idea what this mean.) Tried sometime and it looks like Air India Express is something different service and it has different fleets. Could not flight out difference between AI & IC codes... as there of the links take me to a different websites in a new windows and all of them has its own booking engines.

Ok, finally I thought lets try IC and find out flights for Bangkok.
Here is my booking experience...@ AirIndia .. :)


- The heading says. Book a flight - IC flights... (No idea....What is IC?)
- Multi city link... what it means..? Why is this placed after return...? No idea..!
- More cities link was placed after the cities. I was expecting this might open a other drop down in place and list more cities... but surprisingly it has taken me to other website.. :) We will find similar booking engine and it has few more cities added in the list and again you find a "more cities" link which will open the previous website "IC" in one more window :) What a great workflow..!
- I have selected Hyderabad - Bangkok and selected "Return" radio button and selected dates as Departure: 6 Sept 2009, and Return: 31September 2009. I was looking for the search button and did not find. By mistake I thought "Reset" Button is search and clicked on it. All the fields were reset to current date. I was confused because the reset button was given more priority than the “Book:” by placing this in right. Retyped everything and this time carefully looked into the user interface and realized I need to click on "Book Now" for searching...flights. - Once clicking the "Book Now" button it showed me the same screen, then I clicked 2-3 times but still in the same page. Looked carefully and noticed that there is an error in red color saying "Invalid Departure/Return Date" I thought that there might be no flights available on that day but the fact is that there is no 31st date in September. System doesn’t validate and tell the user about dates being a booking engine. Very sad and bad user experience…ever experienced…!
-By Default Indian Rupees is selected and id don't know why they want Any other currency radio button and a Drop down deactivated - selecting "Australia - AUD" Looks like the designer want to make the interface very busy without any room :)
-Instructions text is very funny; it occupies ~20% real estate and unwanted secondary information.

- All fares are reflected in Indian Rupees.
- Equivalent approximate fares in your chosen currency are also displayed.
- Sale of International Sectors (Ex-India or Return)is now available on our website.

Finally this website has eaten my time and I have decided that let me go back to some private fight booking website and do the booking. I have lost all the good will / credibility about this Air India spending some minutes on their website. I came to a conclusion that if something goes wrong in my shopping cart, I am not sure getting my money back easily...
Tried calling some local agents... at the end of the day :) as I felt they will respond me if I call them and intimate me the status rather than I solely taking risk :)

Summary: For online ticket booking site, search and the booking engine is the heart of the user experience. Too much of information will kill the experience, keep the site as simple as possible and design it more task driven. Have proper validation and give an impression that this site is secured and your money will be safe / secure. Divide the tasks in to primary and secondary and make it simpler to use by providing proper user assistance elements inbuilt in the design. This website needs a serious redesign and need to follow UCD model. Don’t know why Government is putting lot of money in other stuff but why they are not focusing on small things which give revenue to the government and happily diverting the business to the private folks!

GOOD DESIGN in 'Ten commandments’.

Back in the early 1980s, Dieter Rams was becoming increasingly concerned by the state of the world around him – “an impenetrable confusion of forms, colours and noises.” Aware that he was a significant contributor to that world, he asked himself an important question: is my design good design?
As good design cannot be measured in a finite way he set about expressing the ten most important criteria for what he considered was good design. Subsequently they have become known as the ‘Ten commandments’.
Here they are.

• Good Design is innovative
• Good design makes a product useful
• Good design is aesthetic
• Good Design helps a product tobe understood
• Good design is unobtrusive
• Good design is honest
• Good design is durable
• Good design is thorough to the last detail
• Good design is concerned with the environment
• Good design is a little design is possible

For more details check : http://www.vitsoe.com/en/gb/about/gooddesign
Vitsœ’s designer Dieter Rams. Photograph by Abisag Tüllmann

Pixels, EMs, and PXtoEM.com…oh crazy!

What is an EM?
Wikipedia puts it well: “An em is a unit of measurement in the field of typography, equal to the size of the current font.” If your font-size is at 16 pixels, then 1em = 16px
For more information visit Wikipedia and W3Schools.

What is the text sizing difference between PX, EM, %, PT?
Pixels and points are static measurements. 1 pixel is always 1 pixel. 1 point is always 1 point. Points are a little different because they change size based on DPI. On paper, with its higher DPI, 12 point text is actually more pixels that 12 point text on a computer monitor, which has a lower DPI than paper.
Percent and EMs on the other hand are relative measurements. The size of EM or percent-based text depends on its parent. If body text is sized at 12 pixels, then text set at 120% or 1.2 EM inside the body will be 1.2 * 12, or 14.4 pixels.

How do I convert between PX, EM, %, and PT?
Assuming you aren’t using PXtoEM.com to keep it simple, here’s the formulas PXtoEM.com uses.
Note:16px is used as the body text size in all conversions because that is the browser default on today’s browser. You will change 16px to your base text size.
PX to EM: text size in pixels / body text size in pixels = size in EMs
Example: 12px / 16px = .75em
PX to %: text size in pixels / body text size in pixels * 100 = size in %
Example: 12px / 16px * 100 = 75%
PX to PT: text size in pixels * points per inch / pixels per inch = size in pt
Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
EM to PX: text size in EMs * body text size in pixels = size in pixels
Example: .75em * 16px = 12px
EM to %: text size in EMs * 100 = size in %
Example: .75em * 100 = 75%
% to PX: text size in % * body text size in pixels / 100 = size in pixels
Example: 75 * 16px / 100 = 12px
% to EM: text size in % / 100 = size in EMs
Example: 75 / 100 = .75em
PT to PX: text size in pt * pixels per inch / points per inch = text size in pixels
Example: 12pt * 96ppi / 72ppi = 16px

Why size your text with EMs in CSS?
Style sheets that use EMs are easier to maintain for the designer (especially with PXtoEM.com at your side) and more accessible to end-users.
Style sheets become easier to maintain because all text set in EMs scale to the body font-size. Only one element’s font-size needs to change instead of individually changing the font-size of each element.
Accessibility is increased for end-users because text is scaled based on their preferences rather than set statically in pixels. Additionally, end-users can use hot keys to scale the text in all browsers. Many people have difficulty reading small text on a computer screen.
For more information visit A List Apart, informIT, Jon Tan’s Blog, and this SharePoint Blog.