-
Notifications
You must be signed in to change notification settings - Fork 0
States views overlays
This page contains notes and proposals about how to reconcile Maqetta's existing states feature with mobile views, overlay widgets, and stack containers, while attempting to establish a foundation for product growth.
With Maqetta, UI designers create mockups that are reviewed by their team members and customers. Maqetta becomes much more valuable as a tool if, in additional to being an individual tool for sketching out UI designs, it also serves as a team tool where team members can effectively collaborate on a UI design.
The primary team feature in Maqetta is the review/commmenting feature, where a designer can send email invitations to team members, who can then follow a hyperlink in the email invitation to enter Maqetta's review/commenting module. Therefore, my contention is that having an easy to use review/commenting feature is of high strategic importance because it determines how useful the team features are.
After observing users who attempt to use the review/commenting feature, my conclusion is that a good UI approach is to provide reviewers with a simple list of "views" that show the UI mockup in its various runtime states, and then provide the reviewer with dead-simple UI for navigating through the list of views so that the reviewer can be confident that he has seen everything that warrants review.
Some products that people use for UI mockups today offer the equivalent of "views" and simple UI for stepping through the views:
- PowerPoint. A "view" is a slide. The "next view" operation consists of going to the next slide.
- Photoshop. Some designers use Photoshop's Layer Composition feature to provide a list of "views". Each layer composition represents a "view". Users can go to the "next view" by bringing up the Layer Composition popup and clicking on the following layer composition. (Note that Photoshop layer compositions have a lot of similarities to Maqetta states. In both cases, the author chooses which elements are visible within the given layer composition or states.)
As mentioned above, Maqetta's existing states feature is similar to Photoshop layer compositions in that the author chooses which elements are visible within the given layer composition or states. Maqetta states have a couple of special wrinkles:
- Maqetta creates "live applications" where the designer can specify event triggers that cause state changes (e.g., onclick on a button can cause a state change)
- There is a default state ("Normal")
- In addition to simple visibility changes across different states, Maqetta allows arbitrary CSS properties to change from state to state
- Ultimately, we want to allow state changes to animate. (Most of the time, fade-in/fade-out animations)
- Ultimately, we want to enhance the existing states features to support a inter-dependent system of HTML pages, where different parts of an application are defined in different HTML files
Dojox.mobile's widget set provides some built-in functionality that overlaps quite a bit with Maqetta's custom states feature. If you have multiple View widgets on the same HTML page, the dojox.mobile library will automatically ensure that only one view is visible at any given time. The dojox.mobile library includes some built-in event trigger logic.
The Dijit library has some special widgets that pop up as overlays in response to user events:
- Context menu
- Tooltip
- Dialog
- TooltipDialog
As mentioned earlier, I maintain that a key requirement is that reviewers have a way to step through all aspects of the UI. All of these overlays and temporary menus are things that reviewers typically need to see.
A handful of Dijit container widgets derive from class StackContainer and all share the behavior that only one sub-pane can be visible at once.
As mentioned earlier, I maintain that a key requirement is that reviewers have a way to step through all aspects of the UI. Hidden panes are among the things that reviewers typically need to see.
Here are some features we would like Maqetta to support in the future:
- Allow UX professionals to use Maqetta to manage a entire system of UI mockup modules, where Maqetta can show the UI flow of an application across different HTML pages and screens within a single page. The idea is that Maqetta would provide various flowchart views that show the flow of the UI across the various modules
- All nesting of application states for certain types of widgets. For example, a Dialog calls for its own internal set of states