In previous posts in this series about UI, we went over what user interface is and why it is critical to a site’s success and tricks of the trade to plan great UI. Next, we are going to show you a few tools our developers and engineers use to program our websites, and we will showcase a few sites from our portfolio that we think have great UI.
Where Is UI?
In the code
The jQuery library is a plethora of code a developer can employ to do a whole range of things. jQuery’s slogan is “Write Less, Do More.” Enough said.
- Sliders
- Accordion drawers
- Tabs
Fancybox is a jQuery plugin that makes overlay pages easy. We use this code on many Etna sites because it is elegant, easy to use and is a pleasing user experience.
- Forms
- Slideshows & photo galleries
- Zooming in on details or big images
Ajax is asynchronous Javascript that allows you to update parts of a webpage without reloading the whole page. This is a really powerful tool with far-reaching potential to improve your UI, especially in a complicated system.
On the screen
http://www.yourfaceinourhands.com/attractive-face/eyes.cfm – This is a beautiful site with a lot of content and complicated programming. These are so gently integrated you probably don’t realize that behind the scenes there is a lot going on.
- A lot of information: the user can elegantly show/hide information about related topics using the accordion drawers, thereby keeping the on-page content manageable
- Treatment Plan form: javascript and browser cookies keep the users’ selections even as they navigate from page to page. The contact form is in an overlaid window, so the user maintains their place on the site.
- The Attractive Face section’s navigation: in addition to the top level navigation, there is a very visual representation of what part of this section you are currently in (large title and intro text, larger text and glowing spot on the face) and what other pages you can visit (action on mouse rollover).
http://www.radiesse.com/ – An informative site with a robust doctor locator, this site is easy to use thanks to a well thought-out layout and clear navigation.
- Rotating images – as users browse the site, a bit of javascript code refreshes a selection of before and after photos (on the right side of the site) every few seconds. This gives higher visibility to this product’s results, which is their number one goal.
- Doctor Locator – users can find doctors in their area using a variety of methods: searching by zip code or practice name, or by clicking through states and cities. Results are quick and informative, with pertinent information available immediately and more information only a click away. Users can interact with the maps or thumb through results in an accessible scrolling div.
Leave a Comment