In the traditional sense, form elements are building blocks for web based interactions. FluidIA will need to support the ability to draw up such form elements as radio buttons, input boxes, textareas, checkboxes, and selectors. Here are a number of ideas for how it could work.
During the last evaluation cycle, users were having trouble to understand that elements or objects are drawn in a nested fashion within objects. In other words, while drawing, parent-child relationships are developed. To help users understand this behaviour, the following cue sketches have been developed.
Just updated stage with a working version of an instance viewer. When an object is now selected it displays all of its instances in the footer as little orange thumbnails. More so, when an object with multiple instances is edited as a master, the little orange instance thumbnails also change their opacity to 100% from 50% in order to indicate that they have been changed as well. Upon clicking on an instance thumbnail, the opacity returns to 50%, to indicate that the instance has been viewed. The instance viewer can also be seen in the first layout screenshot (with the title “Updated Instances”).
To have a go at what I mean, do the following: 1: draw an object; 2: copy it (CTRL+C); 3. create a new page and switch to the new page; 4: paste it (CTRL+V). The footer should display the instance viewer with two instances.
Any thoughts, more than welcome.
Cheers,
Jakub
Just updated the stage with some additional code. Here is what’s been updated:
Comments, thought, welcome :)
Another quick update on the latest and greatest. The working interface has just been updated with the new footer design. Hopefully this layout will be now a bit easier to use as it more clearly separates the three core functions (ideas, inheritance, and edit modes). The “hold” (Z / X) interactions have also been given some extra attention. The checkboxes in the inheritance box have gained increased cues that they are clickable. Finally, elements are now also resizable on single click.
A few bugs were also fixed. These now include: the ability to finally delete elements from the workspace; single pixels elements no longer get created; and text/labels are easier to edit.
Have a look and let me know what you think (or if you’d like to get involved):
Cheers,
Jakub
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]
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:
Thanks to Brett, Sarah, Steve and Casey for participating!
Just a quick update in regards to the stage having been refreshed. Today’s update includes things such as:
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.
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.
