Improving the user experience with password entry

Sometimes deploying a forms based registration / login solution for SharePoint, or anything else, makes me somewhat weary. Specifically, creating the system that enforces, for sometimes tens or hundreds of thousands of people, the mundane action of having to add a password no less than twice after panning ones brain for a username when registering for an account just seems so old schoolish and tedious…

Adding a bit of colour, literally, here is a good thing. Not to much, not too little and you can add the equivalent of a breath of fresh air. One great tool for this job is Chroma-Hash.

Chroma-Hash is a jQuery plugin that aims to offer a better password input experience with a standard password field replaces the entered characters with “●” characters. The problem is “we never know if we made a typo or not until the form is submitted & a reply is received from the server”. Chroma-Hash, “converts the values entered” into a colored visualization.

A user filling the password field can easily recognize that if the colors are the usual equivalents of the password or not. And, anyone who sees the colors won’t have any idea what the actual password is.

The script can also be used to visualize password confirmations (password & confirm password fields).

A detailed info on the method & security concerns can be found at thedeveloper’s related post.

http://mattt.github.com/Chroma-Hash/

Data Visualization: The Quest for Patterns

Recently I was trying to present a way for individuals to find patterns in large amounts of data. The end result was considered successful and I thought I would share at a high level what was done.

Firstly, the data looked a tad liked this…

Note 1: this is NOT the actual data.
Note 2: C1 and C2 are where I wish to draw interest to in this example. I.e. the final outcome should be a clean visual of the all data with an intuitive focus where C1 and C2 get and send their data.

Certainly not terribly daunting, interesting, nor unfamiliar for the average office/information worker/victim 🙂
Running this through Excel Services really did not produce anything useful. It hinted at associations between the data points but that was it. See for yourself…

Not the best presentation of data I’m sure you’d agree… (Even forgiving the quality of the image.)
So I ran the data around a different set of axis with a bit of custom code and got a dramatically clearer view of the columns and their content associations. At least I think it is.

Colour coding C1 and C2 made things even more clear.

A successful solution!

UI Dragging : Dragdealer JS

Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.

The script is pretty flexible with options like:

  • working horizontally or vertically
  • defining the initial positions of the slider (x/y)
  • setting the number of steps for the slider
  • snapping to the steps
  • and much more.

Dragdelaer JS has callbacks on both release and move events which makes any type of interactions possible.

Data Visualization: Earthquakes

Visualization of data is a topic I have a more than passing interest in. It’s a fundamental part of my daily routine as I help people understand what they have and show them new methods and tools with which they can discern patterns that may be hidden.
Sometimes I find things that are interesting or just well done. Such as this earthquake data from the USGS. Looking at the image below you can see data points (location) with value (seismic strength) and recency (date/time) clearly and concisely.

Quick Website Sketching With Paper Browser

Paper Browser is a set of PDF files that look like a browser which can be used for sketching easily once they are printed.

There are 2 different sets:

  • Quick sketch: proportionally scaled to 1024×768px and subdivided into width sections (800, 960, 1024)
  • Browser sketch: canvas is 1024×768px minus the height of the browser toolbar and status bar with 32*32px grids.

They both come with landscape and portrait versions.