User experience architecture

June 9, 2014

File navigation within applications

Filed under: Uncategorized — uxarchitecture @ 8:55 am

Many software tools offer a local interface to the file system. For example, my IDE, Latex environment, and photo editor all provide interfaces to list and create a subset of documents that are held in the file system. While they offer similar facilities, they do so through quite different user interfaces with some learning cost and a risk of mode errors. On the other hand, these interfaces offer may useful specialised services such as filtering, refactoring and a fast path to the depths of a folder hierarchy.

What does this mean for the design of desktop where documents (‘resources’) are seen as the things to be organised? Should a cluster of closely related files be seen as the thing to filed and be retrieved?  This might be convenient for a software project with many mutually-dependent source code files. The same may be true for a writing exercise where a complex paper has been divided into multiple Latex files for simplicity. On the other hand, this approach may deemphasise reuse of granular resources such as a an algorithm or a chapter.

August 16, 2008

Designing screen layout with Visual Studio Express

It’s an old debate. what’s the best tool for prototyping screen designs?

For early abstract design, I like the minimalism of a spreadsheet set to a regular grid. For smoke-and-mirrors interaction, I’ve had good results with Axure. It also does a nice job on managing design process metadata: issues; alternatives; and open questions. For day-to-day sketches, PowerPoint is competent and is ideal for sharing ideas with colleagues in other disciplines.

For more precise screen layout, I’ve been impressed by the forms designer in Microsoft Visual Studio Express for C#. Here are some specific features I’ve found helpful:

  • Field alignment

    As you drag a field across the screen, the designer draws a blue line to visually indicate any field with which it is is aligned. “Aligned” means that an edge (top, bottom, left, right) in one field matches an edge in another. A magenta line also shows when the text baselines are lined up. This is handy for neatly laying out forms, nested containers and any complex design where you don’t have a regular grid to guide your eye.

    Aligning three buttons

  • Margin management

    You can set margins properties on a control such as a button or text field. As you drag this control, the forms designer draws a connecting line to nearby objects whenever the control is positioned at exactly the margin distance away. For example, you might set up section headings to have a larger margin above than below. Using this technique to drag a set of fields below each heading would ensures consistent grouping and separation in line with Gestalt principles.

    Using margins to position labels and buttons

  • Layout managers

    You can add flow layout panels and table layout panels and then drop controls onto those panels. For simple layouts, this saves a lot of time. The table layout is handy for simple forms in which each row contains a label, a field and some guidance. The flow layout is convenient for facet style menus or tag clouds.

    Using a flow layout panel to present a faceted menu

Together, these features take the tedium out of defining a neat and consistent layout. The experience is unobtrusive but quietly rewarding.

Blog at WordPress.com.