Thursday, October 2, 2014

Towards Better Formatting - Notes on Alignment

image/svg+xml Abcj Abcj Abcj Abcj Abcj Abcj Abcj Abcj Abcj Abcj Abcj Abcj Abcj Abcj To the right is some text, such as you might see in a Tableau viz. OK, you might not see this exact text, but it's useful for the following examples. Here's "Abcj" placedwithin a rectangular space.All text in Tableau is in sucha framed space, even if the frame.isn't visible In this example the text is centered vertically andhorizontally in the frame. Here are some examples ofways the text might be positioned within its frame. Here are some of the text'stypographic properties thatcan be useful in orienting it.This isn't all of them, but it'sa useful subset to get startedwith. A basic frame, from above,with the text removed to show fundamental textalignment guides, aka grid lines.The external triangles arehandles, or grippers, useful for manipulating tthe frame and grid lines. In this example the text ispositioned in the upper left,with its Cap Height positionedalong the top padding boundary.This view also shows a grid line aligned with the text'sbaseline. The # and positionof grid lines can be flexibleenough to accommodateany needs. Designing and implementing effective mechanisms to create and manipulate the frame's elements is essential to creating an effective layout management system. Text layout examples The left image is the presentation of the text in the frame with the controls visible. The right image is the unadorned presentation, i.e. without the grippers and grid lines visible.(and yes, this implies dual interaction modes) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. The text's top line's Cap Height is aligned with the top grid line.The text is left-justified. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. The text's top line's Baseline is aligned with a new grid line, lowering the text in the frame.The text is left-justified. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. The text's top line's Baseline is aligned with a new grid line, lowering the text in the frame.The text is center-justified. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse venenatis. Praesent a eros. Proin diam augue. The text's top line's Baseline is aligned with a new grid line, lowering the text in the frame.The text is right-justified. Frame and Text Alignment The examples so far show how text can be aligned within its enclosing frame. The following examples illustrate the ways in which separate textual elements can be aligned with respect to one another.There are two basic alignment models: aligning the text elements' frames, or aligning the text across the frames.In the examples below two different font sizes are used to highlight the effects of the different alignments. Text is good, but in order to be useful and effectively communicative it needs to be oriented within its space so that it can be read and interpreted easily and well. "Abcj" is just hanging about all by itself above - without a context its meaning isn't as clear as it could be.We humans have been working with written communication for millenia and have worked out effective ways of laying it out so that it's accessible, meaningful, even attractive. Cap Height Abcj X-height Abcj Middle Abcj Baseline Abcj Descenders Abcj Informed by http://www.fontshop.com/glossary This is a fairly simple example of the types of elements in play when considering text composition. A real world, robust text management system requires a well thought-out model that includes structural and operational elements adequate for supporting the necessary text compositional characteristics.One model for organizing rectangular space is the CSS box model, which can be found at the W3 site: http://www.w3.org/TR/CSS2/box.html Text Alignment Frame Alignment Abcj Twqrm Abcj Twqrm Abcj Twqrm Top Middle Bottom Abcj Twqrm Abcj Twqrm Abcj Twqrm Abcj Twqrm Abcj Twqrm Cap Height X-Height Middle Baseline Descenders Text Alignment Aligning Other Tableau Objects There are many places in Tableau where aligning objects is desitrable. In general, Improving Tableau's abilities to provide the flexible and comprehensive alignments that matter in delivering high quality results will make it much easier to create superior results..In particular, the dashboard layout mechanisms are rudimentary, making it very difficult to achieve anything like thefit and finish expected from the dashboards' consumers who are used to design-driven products. Lttle misalignments, even those that might not seem to rise to the level of an active annoyance, have substantial cognitive effects that actively hinder the viewer's ability to discern and assimilate the information being presented. Tableau's aligning abilities arefairly rudimentary and weighted towards Top-alignment of adjacent objects.This is particularly vexing when building dashboards and trying to align elements so that the reader's eye tracks seamlessly among them. These examples show some of the waysin which objects can be aligned accordingto their text contents. The most common scenario is to align text objects to their baselines. Doing thismakes it easy to read the object's contents.Tableau currently doesn't support aligning text across separate objects. This makes providing effective text presentations much more difficult than it should be, requiring lots of tweaking and fiddlingwith pixel positioning in order to tryand get things to line up.In many cases Tableau simplywon't let one position the elementswith adequately fine-grained resolution,leading to many presentations thatare off by just a wee bit. Adding improved text and frame alignment capabilities will significantly upgrade our ability to create and deliver truly highly effective presentations. But text and frame aligning isn't the whole story. There are many other objects that need to be aligned. The following examples illustrate some scenarios where improving alignment abilities provides real benefits. 0 10 20 Size of Important Things Blue Orange Green ImportantThings Vertical Axis HeaderBoundary Horizontal Axis Border These are some of the structuralelements of a bar graph, useful asexamples for illustrating howalignment can be configured.Any of them can be used to alignthis and similar graphs with otherelements, e.g. on a dashboard. All elements have analgous elements that can be usedfor alignment. Surfacing them,and providing the alignment mechanisms isn't a trivialundertaking, but there are manygood models available thatcan be used for design ideas. Tableau doesn't showthe border, or allow itto be decorated, but it's there. 0 10 20 Size of Important Things Blue Orange Green ImportantThings Blue Orange Green 0 10 20 Size of Important Things Important Things Top Alignment The Border tops are aligned. 0 10 20 Size of Important Things Blue Orange Green ImportantThings Blue Orange Green 0 10 20 Size of Important Things Important Things Bottom Alignment The Border bottoms are aligned. Horizontal Axis Alignment 0 10 20 Size of Important Things Blue Orange Green ImportantThings Blue Orange Green 0 10 20 Size of Important Things Important Things The Horizontal axes are aligned. In many cases this is the most desirable alignment for adjacent vizzes. 0 10 20 Size of Important Things Blue Orange Green ImportantThings Blue Orange Green 0 10 20 Size of Important Things Important Things Vertical Alignments 0 10 20 Size of Important Things Blue Orange Green ImportantThings 0 10 20 Size of Important Things Blue Orange Green ImportantThings Blue Orange Green 0 10 20 Size of Important Things Important Things Left Aligned 0 10 20 Size of Important Things Blue Orange Green ImportantThings 0 10 20 Size of Important Things Blue Orange Green ImportantThings Blue Orange Green 0 10 20 Size of Important Things Important Things Right Aligned 0 10 20 Size of Important Things Blue Orange Green ImportantThings 0 10 20 Size of Important Things Blue Orange Green ImportantThings Blue Orange Green 0 10 20 Size of Important Things Important Things Vertical Axis Aligned In many cases this is most desirable vertical alignment for adjacent vizzes.As with the Horizontal Axis Aligmnment,Tableau doesn't currently provide this functionality, and adding it will make itpossible to create higher qualitypresentations with much less effort. This post has laid out some fairly basic ideas about and examples of alignment principles and practices, with an eye towards how they can be incorporated into Tableau.Tableau is in a very real sense a product with multiple personalities. At its core it's devoted to creating high quality visualizations of quantitative data with minimal effort, and in this it's highly successful. Outside this space it's almost as if everthing that's not a direct data visualization has been relegated to second class status, lacking the need for the same quality of presentation. The use of the longstanding property sheet formatting system, as complex, confusing, frustrating, and inefficient as it is speaks to this in the mere fact of its persistence across multiple product versions.Whether or not Tableau adopts better formatting capabilities, including improvements to the formatting user interface, is an open question. But if they do I hope that they adopt a coherent, comprehensive design philosophy that recognizes the importance of composition and ease of management across the entire product. It's a start. Abcj vertical center line horizontal center line bottom padding boundary top padding boundary rightpaddingboundary leftpaddingboundary frame border padding
Posted by at No comments:
Subscribe to: Posts (Atom)