(917) 797·0983
About Craig Webb

User Experience Case Study

Contact Page

Purpose: Demonstration of solutions to user experience design problems.

Craig Webb Art Contact Page Desktop View

Contact Page Desktop View

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.

Craig Webb Art Contact Page Sketch

Contact Page Sketch

  • Test pages were made with the map and the address side-by-side at page top but the form was buried below.
  • Technically the form might be eliminated because users could just send an email.
  • For business reasons it was important that clients see a form.
  • Also important – people with an impulse to send money should not have to think to do it.

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.

Craig Webb Art Contact Page Tablet View

Contact Page Tablet View

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.

Craig Webb Art Contact Page Mobile View

Contact Page Mobile View

About the Form

Design and coding for the Form is very complex because of the fluid nature of the page. Competing considerations include:

  • Having inputs such as first and last name appear side-by-side as much as possible to keep the Form “above the fold”.
  • Eliminating the impulse to add questions yet to provide a space for potential clients to provide information
  • Labeling typography for mobile devices

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.

About the Modals

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.

In previous iterations of the website the mailing list button was contained within a JavaScript pop-up window but Mozilla blocks pop-up windows. Making a separate sign-up page was rejected. Having the sign-up process not interrupt the user’s page-flow was important.

The modal buttons achieve access to added content for users that want it. Bootstrap offers a modal JavaScript but bootstrap is rather large and is only used on pages with interactive functions that need it. Because the “Join Our Mailing List” button appears on every page, a pure JavaScript modal was found that was short and sweet.

Concept, design and creative development.

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.

Craig Webb Art

Communications that move consumers.