GUIs and responsive websites
by David Dwyer on 28/12/2013
The importance of creating GUIs to support mobile & tablet platforms
We web developers love our acronyms. Or more precisely, we love our TLAs (three-letter acronyms).
My favourite TLA is GUI, the ‘graphical user interface’. It’s the term we use to refer to the parts of a website that allow users to interact with it. Windows, buttons, forms, menus, icons – they’re all GUIs.
Good GUIs help users access (or give) the information they need quickly and easily. They should also be very clear about what they want users to do, whether it’s ‘click here for more information’ or ‘sign up now for your free trial’.
Some users respond better to audio or visual information than they do to text – so there’s often more than one GUI pathway to the same information. Have a look at our design for React2, an online speech and language therapy company, to see how we balance text with graphics and video: both tabs and buttons take you to useful information, as do hyperlinks within the text.
The React2 site is also what we call ‘responsive’. It automatically adapts its layout to the size and shape of the viewer’s screen and the platform they’re using. It also uses information about that device to make assumptions about what the user’s needs are in order to prioritise that information.
Inspire uses responsive design techniques to ensure that the main features of our clients’ websites are always clear and functional. During development we play close attention to the content we load onto the sites as well as which bits of it are most likely to be needed by different users.
Smartphone users tend to want contact details rather than order forms (so far as our analytics tell us at this point in time, we're continuing to review UX (User eXperience) for changing behaviour on our client websites), for example, so we make sure that those bits of information go front and centre when viewed on one – through the use of good GUIs of course.
Good design ensures that your customers will always enjoy visiting your website no matter which device or platform they’re using. If users find your site easy to navigate, they’ll find what they want quicker; if it's content related, they may stay on it longer; if it's purchase or booking related, they will be more likely to take that key action. It’s that simple.
Sometimes good GUI design is as much about what you leave out as it is about what you show. Take these FAQs from the environmentally aware homebuilders HebHomes: http://www.hebrideanhomes.com/faq.html. It’s natural for potential homebuyers to have a lot of questions; it’s also natural that the answers to those questions might be fairly lengthy. To avoid overwhelming the reader with long columns of text, some of which might not be relevant to their particular circumstances, we’ve broken down the information here into logical ‘chunks’. Opening one question closes the other; readers get all the information they need while the amount of text on the page stays manageable.
We used the same principle when we designed the patient referral form for Blackhills dental clinic https://www.blackhillsclinic.com/referyourpatient.html. Our challenge was to strike a balance between gathering all the information the clinic needs to do their work while not putting users off with lengthy forms. As with the HebHomes FAQs, we used collapse/expand techniques to break down the information needed and give the user a sense of accomplishment as they worked their way through the different sections.
If your business website is confusing for users, or if it doesn't work well on a smartphone or tablet, give Inspire a call ASAP for some GUI SOS!
David Dwyer is Managing Director of Inspire Web Development. He has years of experience in a range of web and IT roles plus seven years in sales and marketing in a blue-chip FMCG company. David’s academic and professional qualifications include a BA (Hons) in Business Economics (Personnel & Ergonomics) from the University of Paisley, an MSc in Information Technology (Systems) from Heriot-Watt University and PRINCE2 Practitioner-level certification. He is also an active member of the British Computer Society, Entrepreneurial Exchange and Business for Scotland.
Developer SOS, Digital Marketing, Digital Trends, Inspire Web Development, Inspire Web Services, Mobile Websites, Responsive Web Design, Smart Phones, The Evolving Web, UI, User eXperience, User Interface, UX Design, Web Design