Purpose: Demonstration of solutions to user experience design problems.
Web pages vary in purpose and are composed of different components. How each component fits within the page and each component's relative precedence is an important usability consideration.
The question of precedence becomes more acute when designing a responsive website. The component which is most important in a mobile context may not be the same in desktop context.
The CraigWebbArt.com Contact Page presented this kind of conundrum. The desired asset components where too many for clean design. Various purposes vied for precedence.
Design components under consideration included the address, telephone and email component, a contact form, a google map, and a PayPal link. Each component has importance for different users at different times and there was a strong desire to display them all at the top of the page. This of course is not possible on mobile.
A sketch was made to think through the various competing design and business considerations.
The solution lies in the ability to change the order of precedence of page elements. This technique had been worked out earlier with the primary page template design.
The technique of changing the order of precedence can be seen by resizing the width of the browser window. In the HTML the central main content area is typed first, the left column is below and the third column comes last (on pages that have it).
Using CSS, the left column is caused to appear in front of (to the left of) the main content in the desktop display width. Media queries for tablet and mobile widths release these CSS declarations. The main content box widens and clears the second and third containers below.
On the Contact Page this technique is repeated within the main content box. The Contact Form is the first component typed in the HTML, followed by the address and PayPal information. In the desktop view, the address and PayPal components appear first, stacked to the left of the form. At the tablet-width the form takes precedence at the top of the page, and the address and PayPal modules re-align side-by-side below.
Experiments were conducted to try putting the map, the address or the PayPal modules in the left-side column but those tests failed because the components looked lost and the page looked junky.
A decision was made to jettison the map from the page but not quite – a link to the map is located under the address which opens a modal. The address and PayPal are repeated on the modal.
Thus the address, telephone and email address appear top and center on a desktop browser and the form assumes the primary position on tablets and mobile devices.
Design and coding for the Form is very complex because of the fluid nature of the page. Competing considerations include:
The contact form is built using CSS3 input properties which control the user interface on mobile devices. Certain inputs are mandatory and other inputs are optional.
A stand-alone prototype was built to resolve much of the coding. It contained enough media queries to act as a proof of concept but it was not necessary to perfect the test module.
Instead the form was inserted onto the page and CSS styles and media query coding proceeded from there. The form actually appears thinest in the desktop view where it shares the main content area with the address and PayPal modules. Care was made to chose a minimum width where the address had room to breathe and the form remains comfortably a two-column layout.
On the page, the form CSS also needed to contend with CSS associated with the Bootstrap framework. An additional stylesheet is included on the Contact page with unique declarations specific to the page.
At the tablet width the form is comparatively wide and it reformats in stages to the mobile device layout, with input labels stacked above the inputs. The label typography actually gets larger at the mobile device width.
Modals are often loathsome, especially when they pop open when users land on a page, but they were embraced for this website. A modal appears within the footer of every page, the “Join Our Mailing List” button.
Build a core identity and message tailored to your target audience.
Craig Webb Art provides all aspects of New Business Communications Development including project management, creative development, copywriting and graphic design.
Communications that move consumers.
© 2005 – 2014 Craig Webb Art. All Rights Reserved.