See what's cooking :)

Careful, it's just starting out and still super buggy. Needs Firefox. Updated: 11 Oct 2010

Archive for March, 2009

Iteration 2 – Full Layout Screens

Friday, March 27th, 2009

Here are the latest detailed layouts going into the second iteration.

The footer has been redesigned which now contains three divided sections for ideas, states and edit modes with larger font sizing. These three have been separated out in order to ensure a higher sense of awareness about these important areas. The footer also contains a bit more larger checkboxes, which will also contain subtle onmouseover states to strengthen the perception of their clickability.

An important new state has been designed for the first few seconds of a selected element. The idea is to display an arrow overlaying a newly selected element. This arrow is to emphasize to the user about the location where the next item will be drawn inside. This is an attempt at making nesting more understandable.

An “updated instances” controller is also being proposed in order to provide stronger feedback about the elements which are affected after each change on a master object. The instances inside this controller would become visible after a master object change containing multiple instances. This way users could quickly navigate through numerous updated instances and ensure that the changes are acceptable.

States and ideas controllers have also been redesigned. The “HOLD Z and X” hints have been made more visible in the footer. The state controller creates new states on the x axis, whereas the ideas controller creates new ideas on the y axis. These two axises have been made different in order to provide more subtle cues to users relying on these two similar yet different menus.

Keypress hints (CTRL+V in the bottom left), as well as onmouseover states for the toolbar are also being suggested. The text tool and form tool icons have been designed as well.

Any feedback is more than welcome. Feel free to post comments, send me alternative sketches, or if you’re really serious about jumping into detailed design, I could share the Fireworks file. Do let me know. Cheers, Jakub.

[nggallery id=16]

User Testing – Evaluation Cycle I

Tuesday, March 24th, 2009

Just finished doing four evaluation sessions which were quite eye opening. I decided to post up one video of a session to see if it’s useful for anyone, even though all four were recorded. The full document with more detailed observations can be grabbed from here.

Here is a summary of the biggest problems in the first testing cycle:

  • Users were not aware that a paste action created an automatic instance relationship between the pasted item and the item from which it was copied. This is perhaps as a result that most users are used to a completely different mental model when pasting – one which during a paste operation separates the elements from each other completely.
  • Users were not able to toggle between the edit as master or edit as instance modes. This is perhaps that the language of master and instance is a bit technical. Another reason is due to the lack of cues hinting that the two modes can be switched. For example, near the “instance edit” mode 3D buttons are present which look very clickable, yet the area in which they exist is very flat. Thirdly cursor hinting could be improved to suggest that the areas are actionable.
  • The general visual structure and relationship between object / instance / state and inheritance was not too clear. This is a very complex relationship which requires more clarity.
  • Users also did not understand the nesting behavior resulting from pasting inside objects. (For example: that shifting a parent item would mean that the children or contents would also shift.) This is a new interaction which is relying on a new mental model.
  • Users experiences difficulty enabling the resize controller handles on double click.
  • Users had trouble creating multiple states. This is because the state controller’s visibility was not visible enough. More so, a hold key interaction is also a new way of interacting which requires learning.
  • In addition, there are numerous minor usability problems relating to focusing when interacting with input boxes and text areas. A number of input elements either are too sensitive or not enough sensitive to input.

Thanks to Brett, Sarah, Steve and Casey for participating!

Basic Text Tool Up

Monday, March 16th, 2009

Just a quick update in regards to the stage having been refreshed. Today’s update includes things such as:

  • Ability to copy paste objects into pages directly (ctrl c / ctrl v )
  • A basic text tool now works as well – allowing text edits by means of double click
  • Visual feedback on paste
  • Some minor fixes

Another Quick Update

Thursday, March 12th, 2009

Another quick update. Some new sketches were posted, as well as these two were updated: 1 and 2.

I continue to commit code over at github, and have just updated the stage with some latest working code. A couple of bug fixes were resolved, did some work on the auto labelling feature, upgraded to jQuery 1.3.2, and just began doing the text tool.

A google group discussion list was setup for contributing developers and designers to speak their minds.

Next week I will be doing some user testing. Is anyone in Toronto by any chance who would be interested in participating? IT will probably take one hour and I could come over with my laptop. If so, please let me know by email.

Moving forward… step by step.

Layering Controller

Thursday, March 12th, 2009

Controlling the layer order of elements in terms of how they should appear stacked on top of each other will be a required feature. Here is a sketch suggesting a more contextual behaviour which uses the workspace combined with an overlay menu to set the element order. In sketch B, only elements which are relevant (overlapping on top or below the selected item) would appear in the on demand layer menu.

Low Fidelity Events

Thursday, March 12th, 2009

Creation and specification of events or interactivity could be expressed in two ways – high and low fidelity events. More detailed events could be expressed as in the previously added sketch. However, if the designer wishes to document or record events very quickly and roughly, perhaps that could be done using textual descriptions.

KeyPress Cues

Tuesday, March 3rd, 2009

It’s looking like fluidIA is becoming reliant on keypressing and keyholding. This is in order to speed up the interaction of prototype creation. Keypressing however comes with the burden of having a higher learning curve. In order to decrease this learning curve, here are some very quick and rough ideas on how to make keypressing combined with mouse interactions a little bit easier.

Flexible Scope

Tuesday, March 3rd, 2009

One thing which is great about paper sketching is that with each sheet of paper the designer can feel and control whether a new idea is part of the bigger prototype or perhaps just a free and stand alone sketch. This suggests that during sketching, designers feel a need to not only control the fidelity of the prototype but also the scope. Here is a sketch supporting the sketching of separate or related interface ideas.

Flexible Fidelity

Tuesday, March 3rd, 2009

A design tool should not force a level of fidelity or detail onto the designer. Instead the designer should be able to choose at which fidelity to work at – just as is visible when using paper sketching. More so, at times a designer may represent a prototype element in a rough way, while in the future the same element may be revisited and be revised with more detail. Here is a sketch to support just that.

Event Creation

Tuesday, March 3rd, 2009

A big part of doing interactive prototypes is the setting of events, triggers, conditions and transitions between various elements, pages and states. Here is a sketch suggesting a very rough onkeypress interaction for calling up an event manager. This overlaying menu would be consistent with the behaviour of the state manager.