It’s widely known that images catch people's attention much faster than text, as well as that people tend to remember information from images more than written text. The same stands with illustrations: they’re great was of grabbing and maintaining peoples attention much faster than text. Designers can use illustrations create and hold peoples interest.
Illustrations can give something a sense of clarity and softness by showing features of a UI as visually pleasing, while they’re a part of functionality. For example, the majority cow apps will have a home button somwhere on their interface as this is as essential part of functionality. Many designers illustrate a home button to make this core function something that is fitting and visually pleasing so that is dosen’t stand out as purely there for functionality.
However, illustration should be used carefully. We looked at an example of a travel apps interface of this and I notices a range of minor details which had an impact on the overall success of the design. Mixing different illustration and levels of detail styles can make the design look less consistent and thought through. Furthermore, replacing images with illustrations may not always be suitable, particularly when real-like products are being reflected. The travel app that we looked at had replaced destination images with illustrations, and although they were visually appealing, it defeated the purpose of showing the location.
An example of this that I found really effective was itg.digital’s loading screen. This uses an animated illustration of a sausage dog as the loading bar, with it walking and getting longer as a normal loading bar would progress. I absolutely love how innovative and creative this idea is, and found myself not even thinking about how long the site took to load. This shows that when used in a certain way, illustrations can be used to direct people’s thinking and how they perceive something.
Another example of this that we were shown in class was DropBox’s illustration to advertise larger subscription packages, which give users more storage to send and store files of larger sizes. It shows the amount of space that buyers would gain if they upgraded using al illustration of a large fishtanks bside a much smaller one. Although very simple, this marketing technique was effective.
Mascot illustrations are often the face of a brand. This form of illustration can be very beneficial for branding, as a mascot is such a recognisable figure that people will be more likely to recognise it and remember the brand. For example, Duolingo’s brand is very successful, with much of this coming from consumers appreciation for the recognisable ‘Duo’ mascot.
Thematic illustrations are used to convey a message or theme. For example, we looked at a healthcare app I which customers can order prescriptions and medicine. Once a product is purchased, a large tickbox illustration appears; This is a functional way of including a thematic illustration, as it ensures that people can clearly see their purchase was successful.
Icons are a very common form of interactive illustration used in interfaces. Most often, these are used as buttons on an interface to tell users why then should click that area; such as a home button.
Diagrammatic illustrations are used to show and break down a product or concept.
Illustrations can be used for data visualisation, such as a chart or table to present information. These illustrations are particularly useful for presenting real facts and figures.
Hyper realistic illustrations are less simple illustrations. Due to the high level of detail they contain, these are more often used for decorative rather than functional purposes.
Hand drawn illustrations can give something a more authentic touch. I really liked the example of carsonified’s website which we were shown in class, as the hand-drawn illustrations against the vibrant background.
Illustration has a number of functions in User Interfaces:
Onboarding: Illustrations are often used on the home or sign up screen of apps as a way of drawing users in with a reflection of what the service may provide. I can see how an illustration may be superior to an image in some cases here, as designers can ensure that it is consistent with the theme and enhance what they want users to see.
