Tag Archives: UX

UX:This – Episode 6 – The Compassion of UX

uxthis-logo300Welcome to another episode of the world’s number one user experience podcast. In this episode, we talk about empathy and why this matters – personally and professionally.

In this episode, we referenced

Also, Ariel invents a new way to brush your teeth, with an iRobot Roomba!

Imagine THIS bad boy in your mouth!

Imagine THIS bad boy in your mouth!

Thank you for downloading, listening, and keeping up on our shows.

Cheers,

Ariel Leroux & Ryan Lane


A quick note for clarification
I (this is Ariel behind the keyboard) mentioned how/why I began following Whitney on twitter and sometimes I’ll see people who post comments about something that I can identify with, and then twitter suggests other individuals like this person, and after looking at their tweets I begin following them too.  So it could have been one of those circumstances.


logo

Episode 2 – User Experience Roles

The second episode of world’s greatest user experience podcast UX This, is fresh out of the oven and ready for you to enjoy. In this episode we talk about user experience roles and the types of responsibilities the various roles have.

Introducing UX This podcast

Today is the first episode of the worlds best user experience podcast. Hopefully, we can stay on top of making new episodes on a regular basis. I certainly have plenty to talk about on the subject.

In this episode the lovely Ariel Leroux and I talk about how to get started with a UX project and the various facets of what getting started means.

UX This – Getting Started

programming and designing in the browser

I remember a talk we had back in the early nineties, while I was working at Spry / Internet in a Box, the idea had come up of creating an OS that was entirely based on a browser. At the time the browser was NCSA Mosaic for use and an early beta of Netscape Navigator for the competition.  So to say it was too early to talk about is a bit of an understatement. However, it really felt the next logical step. Creating applications and services that ran entirely in the browser would have been crazy hard then with the limitations of  HTML. We didn’t have JavaScript or CSS yet. Everything we built was done as server side code. CGI applications written in either C/C++ or Perl. My weapon of choice became Perl and SQL for all my programming needs. With everything happening on the server you were a little limited with what you could do. Oh and most users were using a 56k dial up modem to get online.

Fast forward to today and a web application developer has a huge and amazing toolbox at their disposal. Rails, ASP.NET, Python, PHP, Flash, Silverlight, JavaScript, HTML5, CSS, Web Services like JSON, and on and on. Thanks to all the hard word and loads of talented people the limits are no longer the technology or access speeds. The limits now are only our creativity. Now we have geolocation, video, animations, and sound.

The only limit that we’ve had up until recently was that if you wanted to create interactive content you needed a client application running on your local machine. To create Flash you needed to purchase, install and use the editing tools locally. Which brings me to the point of this post. I only recently found out about a new crop of web based IDEs (Integrated Development Environment). In no particular order.

Coderun

CodeRun Online IDE

You can create and edit .Net , Silverlight and many other types of projects. This is the best damn thing ever. I hope someone at Microsoft buys these guys.

Cloud 9

Cloude 9 IDE example

All your stand website editing power with Git and Mercurial integration. Paid accounts offer many must have features but the free version can get you up and running quickly.

Akshell

use this to create your web apps in JavaScript. Plain and simple just the way it should be.

jsFiddle

jsFiddle example

It’s not a full fledged IDE, but it is a great way to start learning, creating and sharing JavaScript snippets. Fantastic way to explore and experience in realtime how the code works.

Now for the design side of things

It’s not nearly as new but the design side has been very well covered too.

Photoshop.com

The current leader in desktop design has an excellent head start on the web with their Photoshop.com service

 

Aviary

Aviary is quickly becoming a designers hub online. What started as a Photoshop lite application for minor photo tweaks has quickly evolved in to one of the best collections of creative applications that run in the browser.


Picnik

My personal favorite web based photo editing tool. I became hooked on Picnik thanks to its early Flickr integration that made it so easy to jump right in and edit my photos already on Flickr.


Guide to Air Gesture

Since I can’t seem to find a generic term for the body tracking motions of the Kinect, I wanted to come up with my own set of basic gestures and their names. For now I’m calling these air gestures.  Others have offered the name motion sensing or even just computer vision. These are just some of my rough ideas.

Hand Gestures:

Hold

This is a simple gesture that involves holding one hand in a location for specific period of time. This could be used to select an item or change a mode of the UI.

Double Hold

With this gesture it’s pretty much the same as hold, except that it would involve two hands. This gesture is currently used in the calibration pose, but could also be used to enable a double click like selection or advanced interface mode switching.

Push

The push gesture is the closest one to a mouse click or touch available to a user.  The push gesture involves a user moving a hand forward rapidly.  The amount of distance the hand moves and over how much time could be set my the application.  Different amounts of pushes could result in different experience.  Let’s use Google maps as an example a slow forward push gesture could be handled a zoom out. While a slow pull back could be a zoom in.  Then a quick push could select an item in the UI.  Double push could back out.

Pull

The pull gesture is just like the push only in reverse. A quick retraction of the hand could be used for “back” behavior in an UI. The challenge with push and pull is that they could easily interfere with each other and there is also a high chance of false positives.  That being said with the proper tweaking of the gesture detection code I think this could be smoothed out.

Swipe (up, down, left, right)

The swipe gesture is the tracking of a hand movement quickly in one direction. Moving a hand up rapidly or down rapidly could be used to scroll a list of information on a screen up or down.  The left or right swipe could used to either rotate a 3D object or navigate through linear pages of information.  The up and down gestures could also be used to zoom in and out of an interface.

Raise Hand

The gesture is the motion take a hand that is down and raising it up. This gesture could be used as a quick acknowledgment of a message. If the UI required the user to agree to something or accept a prompt. The raised hand has a positive feel to it.  Raising a hand could also be used to detect multiple users. The raised hand could identify which person the application should be addressing. Raising a hand could also be used to pause an active application and bring up help information.

Squeeze and Release

Not like the way Darth Vader crushes his enemies throats at a distance gesture, but instead this is a two handed gesture. It’s performed by either bringing two hands together, the squeeze, or by pulling two hands apart, the release.  The squeeze and release is air gesture equivalent to the pinch to zoom behavior of a multi-touch screen. The issue with this two handed gesture is that in order to repeatedly go in one direction you need to go in the other direction. This gesture could be controlled by having the hands located above or below a half way point to best determine which to process. The other option, could be to define it based on the speed of the motion. The gesture is active only if the hands move a specific distance over a specific time frame.

Hover

Slightly different from the hold gesture, the hover gesture is generated whenever a hand over a UI element on the screen. For a quick action interface a series of objects could be placed around the sides of the screen. As soon as the users hand enters that element an action is fired off. This would be useful for games or any thing that required a very quick interaction model.

Wave

Moving a hand back and forth quickly has been used to give that hand focus. It could also be used to switch between modes of an application experience.  I think the wave is also an interesting gesture to be used as an undo. Wave could also be used as a way to end a session. For example begin a user session by raising your hand. Then proceed to interact with an application and then wave goodbye when done.

Draw Shapes

Circle: Moving a hand to draw a circle in a clockwise or counterclockwise motion could be used to rotate an item on the screen or speed up slow down and item.

Triangle: The points drawn with a slight pause at each point could be used with a video player to skip ahead or backwards depending on clockwise or counter clockwise 30 seconds.

Arc: a partial circle which is a natural shape for a moving hand to draw could also work as a navigation metaphor within an application.

Air Gesture Phrases (Combinations)

I’m not going to spend a lot of time on this one right now, but the next step is to take combinations of any of the gestures above to create a form similar to that of something like sign language. These gesture phrases could be strung together to accomplish complex user tasks.  Here’s an example: raise hand + hover over a word (selects text) + swipe left or right to select a larger range of text, then squeeze to copy. Move the hand over another portion of the text, hover until selected then release gesture to paste.

 

Next I’ll spend some time on whole body tracking.

Simple CSS based wireframe annotation

A while back I created a simple CSS based solution to annotate wireframes for one of my clients.  This created a simple web based view of the wireframes.   I created the wireframes in OmniGraffle.  As a side note, I love OmniGraffle.  It’s one of my most favorite applications.  The Omni Group makes amazing software in general.  If I didn’t have to use a Windows PC for work, I would be using their software all the time.  It makes me sad that there isn’t a version for Windows.   My favorite part of this solution is that is works on screen and in print.  By creating a print version of the CSS it’s a simple process to print out a non interactive version of the wireframes if you need a hard copy.

image

The basic idea is to have a simple wireframe image loaded up with an image map to handle navigation. The image map part in this example was created using OmniGraffle, but you could use which ever tool you prefer.

   1: <map name="GraffleExport">
   2:     <area shape=rect coords="20,366,169,450" href="News.html">
   3:     <area shape=rect coords="16,232,138,246" href="Products_List.html">
   4:     <area shape=rect coords="25,196,158,210" href="Suppliers_Page.html">
   5:     <area shape=rect coords="137,155,162,169" href="Products_Search_Results.html">
   6:     <area shape=rect coords="181,366,453,450" href="News.html">
   7:     <area shape=rect coords="466,106,752,180" href="About_CP_-_Careers.html">
   8:     <area shape=rect coords="466,331,750,450" href="Customers.html">
   9:     <area shape=rect coords="466,189,750,321" href="Suppliers_Overview.html">
  10:     <area shape=rect coords="0,0,13,14" href="Stucture.html">
  11:     <area shape=rect coords="686,77,740,91" href="About_- Careers.html">
  12:     <area shape=rect coords="175,77,222,91" href="News.html">
  13:     <area shape=rect coords="121,77,181,91" href="Products.html">
  14:     <area shape=rect coords="62,77,127,91" href="Services_Solutions.html">
  15:     <area shape=rect coords="217,77,266,91" href="About.html">
  16:     <area shape=rect coords="29,17,256,59" href="Landing_Page.html">
  17:     <area shape=rect coords="643,77,693,91" href="Contact.html">
  18:     <area shape=rect coords="25,77,65,91" href="Landing_Page.html">
  19:     <area shape=rect coords="512,17,739,59" href="Login_Register_block.html">
  20: </map>

For the notation part the notes are contained in DIV tags at the bottom of the HTML document and then placed with CSS and use JavaScript for the moue over behavior below is an example of one note.

HTML of the note:

   1: <div class="noteblock">
   2:     <div class="note" id="note001" onmouseover="return escape(document.getElementById('note001text').innerHTML)">1</div>
   3:     <div class="notetext" id="note001text">
   4:         1. This is the login is / register box. The behavior is for it to dynamically swap out with login box if selected. <br/>
   5:         <img src="loginNote.png"/>
   6:     </div>
   7: </div>

The CSS used handle to layout and display:

   1: .note {
   2:     font-family: tahoma, Arial, Helvetica, sans-serif;
   3:     font-size: 9px;
   4:     font-weight: bold;
   5:     background-color: #FFFF99;
   6:     border: 1px solid #FFCC33;
   7:     color: #996600;
   8:     width: 16px;
   9:     height: 16px;
  10:     text-align: center;
  11:     visibility: visible;
  12: }
  13:  
  14: .notetext { visibility: hidden; }
  15:  
  16: #note001 {
  17:     position: absolute;
  18:     left: 493px;
  19:     top: 20px;    
  20: }
  21:  

 

The for the to get the note to appear next to the cursor I use wz_tooltip.js.  To handle the hide and reveal the notation layer I put together the following javascript:

   1: function getAllRules()
   2: {
   3:     if (document.styleSheets)
   4:     {
   5:         var theRules = new Array();
   6:         if (document.styleSheets[1].cssRules)
   7:             theRules = document.styleSheets[1].cssRules
   8:         else if (document.styleSheets[1].rules)
   9:             theRules = document.styleSheets[1].rules
  10:         else
  11:             return "Your browser doesn't support rules[] or cssRules[]";
  12:  
  13:         var returnstring = '';
  14:         for (var i=0;i<theRules.length;i++)
  15:         {
  16:             returnstring += i + ' = ' + theRules[i].selectorText + '<br>';
  17:         }
  18:         return returnstring;
  19:     }
  20:     else
  21:         return "Your browser doesn't support document.styleSheets";
  22: }
  23:  
  24:  
  25: function hideIt()
  26: {
  27:     
  28:     if (!document.styleSheets) return;
  29:     var theRules = new Array();
  30:     if (document.styleSheets[0].cssRules)
  31:         theRules = document.styleSheets[0].cssRules
  32:     else if (document.styleSheets[0].rules)
  33:         theRules = document.styleSheets[0].rules
  34:     else return;
  35:     theRules[0].style.visibility = 'hidden';
  36: }
  37:  
  38: function showIt()
  39: {    
  40:     if (!document.styleSheets) return;
  41:     var theRules = new Array();
  42:     if (document.styleSheets[0].cssRules)
  43:         theRules = document.styleSheets[0].cssRules
  44:     else if (document.styleSheets[0].rules)
  45:         theRules = document.styleSheets[0].rules
  46:     else return;
  47:     theRules[0].style.visibility = 'visible';
  48: }
  49:  

 

For the print CSS it’s loaded and defined with the CSS print media type

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Here’s the print.css:

   1: .note {
   2:     font-family: tahoma, Arial, Helvetica, sans-serif;
   3:     font-size: 9px;
   4:     font-weight: bold;
   5:     background-color: #FFFF99;
   6:     border: 1px solid #FFCC33;
   7:     color: #996600;
   8:     width: 16px;
   9:     height: 16px;
  10:     text-align: center;
  11:     visibility: visible;
  12:     position: static;
  13: }
  14:  
  15: .notetext { 
  16:     font-size: 9px;
  17:     visibility: visible; 
  18: }
  19:  
  20: body { 
  21:     margin: 0px 0px 0px 0px;
  22:     padding: 0px 0px 0px 0px;
  23:     }
  24:  
  25: #top {
  26:     display: none;    
  27: }
  28: #top a {color: #999999;}
  29:  
  30: .noteblock {
  31:     margin: 26px;
  32:     padding-top: 12px;
  33:     border-top: 1px dotted #666;
  34: }

 

Here’s how it looks:

image

You can view the example of the wireframe notation.

I found this form to very helpful with several of my clients.  My favorite part is the ability to walk a client through the interaction and leave it behind since the notation is inline it helps answer most of the questions about interaction that are not represented by the wireframes.