Template layout left to right or up and down which way to go ? It can be a daunting task to design a template. It sounds easy doesn’t it, just put some questions on a page. It is so much more than that. You need to make a template that is easy to use and is readable. Users should be-able to complete reports quickly which means when they are presented with a report it is easy to read and understand. When they open the report, they know exactly what is required of them and the flow allows them to answer the questions in a timely manner. So not only is the content of the report important so is the layout. Here is some guidance on how to create a good layout.

 

There are 2 modes of reading, immersive reading and scanning. The goal of immersive reading is comprehension. The goal of scanning to locate things. When someone is doing immersive reading they are reading left to right which looks like this,

 

 Pic13.png

 

 

Scanning looks more like this,

 

Pic14.png

 

When using software users typically don’t read the UI text, they scan it. Most users will skip over large blocks of text and pick out prominent text and interactive controls first. When looking at a form this is what users are typically seeing,

 

 Pic15.png

 

Visual hierarchy


A report has a clear visual hierarchy when its appearance indicates the relationship and priority of its questions. Without a visual hierarchy, users would have to figure out these relationships and priorities themselves.

 

Visual hierarchy is achieved by skillfully combining the following attributes:

 

· Focus - The layout indicates where users need to look first. This often means (but not always) placing questions in a left to right order.

· Easy to scan - Users can find the content they are looking for at a glance. There is enough spacing around questions to allow the user to easily read/scan the question and find the answer they are looking for.

· Flow - The eye flows smoothly and naturally by a clear path through the surface, finding user interface (UI) elements in the order appropriate for their use. The site can be used without scrolling horizontally.

· Grouping - Logically related UI elements have a clear visual relationship. Related items are grouped together by using sections or borders; unrelated items are separate.

· Emphasis - UI elements are emphasized based on their relative importance.

· Alignment - The UI elements have coordinated placement, so they are easy to scan and appear orderly. It is often helpful to have questions within the same section to have the same width.

· Balance - The content appears evenly distributed across the surface. Good balance between information density and use of white space.

· Visual simplicity - The perception that a layout is not more complicated than it needs to be. Users don't feel overwhelmed by the layout's appearance. Questions have enough spacing around them to be readable.

· Consistency - Similar windows or pages use a similar layout, so users always feel oriented. Every section should use the same column width. Every sub-section should use the same column width.

 

While sizing, spacing, and placement are simple concepts, the challenge with layout is to achieve the right mixture of these attributes.

 

Display settings


When creating templates we have found the following settings to be useful, we use these setting so that a template can be viewed in a horizontal or vertical screen resolutions of 1366x768. Typically we use 4 columns per section so that we can have space for smaller questions but can still column span larger questions when needed. These are the guidelines we have found useful but may be different for your specific environment.

 

· For a section the column width is 240 and the # of columns is 4.

 

· For a subsection the column width is 225 and the # of columns is 4.

 

· For a sub-subsection the column width is 215 and the # of columns is 4.

 

· If a section has 3 or more rows shade every other row.

 

· If a question has a child question in the same cell and the question immediately follows the parent question, the child should be indented by 16 points. Then if there is another child question, that should be indented by 32 points.

 

· Title of the main section is upper case.

 

· Title of sub-sections is mixed case.

 

· Question labels start with a capital and the rest is lower cased.

 

· Hide conditional questions when possible as it decreases space and removes unnecessary text when it is not needed.


 

Best practices in assigning the column id

 

· Each section column_id starts with an acronym to represent the section such as

PA_PREOPERATIVEASSESSMENT for PREOPERATIVE ASSESSMENT or

CEI_CLINICALEVALUATIONANDINVESTIGATIONS for CLINICAL EVALUATION AND INVESTIGATIONS.

· Each question under the section also starts with the same acronym so that it is easy to see which questions are grouped together.

Example, PA_DateOfSurgery is in the PA_PreoperativeDiagnosis section. The 'PA_' links the two together.

· Each sub-section starts with the main sections acronym and then a number is added on to uniquely identify it. PA_10BMI , is the first section under Preoperative Assessment (PA_PREOPERATIVEASSESSMENT). Every question in the BMI subsection starts with the same acronym and number. Such as PA_10DataAvailableToCalculateBMI is a question in the PA_BMI subsection. 'PA_10' links them together.


Please note that the above 3 points are very important for template debugging, maintenance and for data-set creation in the Analyzer module. When working with java-script there is a feature to validate scripts. This will tell you the column id where an error is occurring. If the questions are well named, then these can be very easy to find. If not and the template is large this can become a very difficult task.


· If the same questions are shown in many templates try to ensure the column id is the same in each template. This will make data-sets much easier to create in the Analyzer module when data is gathered across many versions of a template or between different templates. As an example if surgery date in one template is called, PA_DateofSurgery but is called SurgDate in another it may be difficult for an analyst to map these 2 fields together. Being consistent with column id's will make data-set creation much easier and faster.


· Do not change column id's from one template version to another. Questions can be removed and added as needed but do not change a questions column id unless it is absolutely necessary from one version to another. Keeping the column id's the same makes data-set mapping much easier as the Analyzer module tries to match columns from one version to another based on the column id. If you change the column id then this automatic process cannot be done and the analyst will have more work to do in trying to match up questions.




How to use these guidelines


Review each of the items in the list and mark your site as either conforming or not conforming to the guideline.

 

Remember that all guidelines are context specific. If you feel that a guideline does not apply to your site, it's OK to ignore it.

 

 

 

For additional information see these references, Microsoft Layout, User Focus Layout.