Mobile friendly user interface (UI) design, tappable user centric

The shift in commerce to online platforms, plus smartphone taken-up has driven a whole new approach to how we’re interacting with devices, whether that’s your phone, tablet or computer. Ease of use, even on the smallest phone is a must as consumers shift away from bricks and mortar shopping, to online. The importance of slick easy-to-use user interfaces (UI) could make a real difference in the success of digital commerce.

The importance of mobile first UI design and touch interface principles

The balance of power has shifted dramatically away from desktop devices to mobile, making the role of the user interface design even more important and challenging for designers and developers alike. Screen sizes on phones have been on the up, which does help increase the screen real-estate to play with. There has to be a limit to phone sizes though; we don’t all have supersized deep pockets!

It’s not only screen space issues that need to be thought through. Touch interface has to be much more space generous. Human fingers and thumbs demand larger tap areas, unlike mouse-driven cursor interfaces. This makes the economical use of the premium space a must. Simplification has to be a priority in any design; not easy if you’re trying to give as much information as possible to the end user and also trying to please Google with search engine friendly copy for it to index.

Menu design – how to drive interactions, navigation, and understanding

The mega menu still reigns supreme on retail desktop websites, the ability to show and select numerous options on a single screen is second to none. Anyone with a large product portfolio should consider using mega menus if they’re not doing so already.

The selection of the submenus should easy, with clearly defined live areas (clickable/tap areas). Heading spacing needs to be generous for tablet device user — this benefits readability too.

The categorisation of product lines within your menu system is key to assisting users journey through any site. The wording, language, and terminology used should reflect users’ expectations, rather than how you as a business refer to your products or services. Think about how your client or customer looking for a specific product or service might think! Keep wording short – menus are pointers, not full descriptions. Simplicity isn’t simple; take your time constructing the words and structure for your menus.

Images and icons within menus can be used to good effect, speeding up recognition, without needing to read a thing. Any visuals you choose should reflect your brand, and be bespoke if budgets allow. As with all design, the colourways should be complementary to your corporate look, call to action buttons, links signposting should be defined and consistent.

Mobile first menu UI design, hamburgers or is there a vegetarian option?

The Smartphone user is now outnumbering both desktops and tablet users. The challenge with a mobile user is getting them to the right section of your site before they swipe elsewhere. Keeping mobile users’ session duration as long possible is a factor in how search engines rank your website; and potentially whether you generate sales.

The default for many mobile interfaces is the Hamburger menu. Introduced in the early days of Graphical Interface Design (GUI) in the 1980s. It has had a revival since Apple, Facebook and Google started using this graphical device on the first-generation smartphone apps.

Hiding information behind layers of screens, or menu devices such as hamburger icons can help. However, this can be counter-productive as it can be easily missed or misunderstood. Having to tap through endless submenus is tedious. ‘Three clicks from anywhere’ used to be the old desktop website mantra – difficult in our smartphone world!

Other options include tabbed interfaces, these are a good option if space permits and should be named with single words, or better still utilising nicely designed, easy to recognise icons. Swipeable menus offer another way of interacting, working with images or graphics, offering a very quick option for driving mobile users to other content within your site. I’m a great believer in tappable images and photographs, we’re becoming pre-programmed to just tap on stuff, and expect it to zoom up, or take us elsewhere.

Logins, form filling and checkouts

The trick is to keep things simple, break tasks down into manageable step-by-step chunks. E-commerce apps need to signpost users to where they are within the process. Any errors, such as an incorrectly inputted email address, should be clearly highlighted and coded to prevent the user from going any further.

Keeping your interaction within reach and consistent

Fortunately, our thumbs aren’t growing at the same rate as our smartphone screens. For most people, gone are the days of driving a smartphone single-handed with your thumb! With phones reaching tablet dimensions it’s worth factoring in the areas that your thumbs can reach and position the buttons accordingly. Think about the prime place for frequent navigation hotspots –  hamburger menus usually sit top left or right. That said, breaking the norms of user expectations is what designing new products is all about. Rules are there to be broken, otherwise, nothing moves on!

Hope the above proves useful. There are loads more to be covered on this topic in future posts. Please get in touch if you need further help or advice. All the best, Ross

Designing a perfect presentation — PowerPoint template branding is critical.

Looking good in PowerPoint is all about understanding masters and your templates — combined with simplicity and design flair!

We work with lots of corporate PowerPoint guidelines that struggle to work in a real-world context. Often promoting overly fussy or overcomplicated presentation designs — frustrating both seasoned presenters and occasional users. And they positively don’t project the right image!

The financial costs in personnel time — often senior — struggling with badly design templates remains overlooked, wasting valuable time and resulting in poor looking presentations, which the branding guidelines are supposed to resolve.

Corporate PowerPoint template branding and design — Does and Don’t

Usually, presentation templates are an afterthought in the branding process, shoved to the back of the design queue — tasked to a graphic artist who has never worked within the presentation or events industry. These designers often have limited experience of PowerPoint — finding it clumsy and frustrating to use when compared to professional design applications. Insufficient knowledge of PowerPoint’s functionality often results in problematic templates.

A presentation specialist is much more qualified when rebranding templates. They will know little tricks to get the best from PowerPoint.

How do you create a great PowerPoint template?

The most helpful feature within PowerPoint is the slide ‘master layout templates’ and ‘placeholders’. Slide masters allow you to style sets of standard master layouts, e.g. bullets slides, charts, images and text.

These layout masters help to dictate the overall appearance (branding) of your slides and positioning of text and tables. Information such as the font choice, styling, sizing, colourways and palettes can be embedded too.

Background image designs, logos become automatically placed in the correct position on each slide. No more headings and logos are jumping around the screen. A consistent look to charts and tables make any organisation look their best. Getting these layouts set-up and branded corrected will save hours!

Working efficiently with PowerPoint

Understanding PowerPoint slide masters function is key to working quickly and efficiently. Most presentation sent to us appears to bypass using master templates. Many users avoid the slide master, mainly due to inadequate training or unfamiliarity with the software.

Most PowerPoint users appear to type text into the first blank slide in the file, then start adding freeform text boxes and pasting charts in from other applications. Then duplicate this slides in the sorter to create yet more poorly formatted layouts, rather than creating new slides and selecting the appropriate designs.

This approach is inefficient and full of error traps. It’s easy to make mistakes. Text sizing goes astray, wrong fonts from pasted in copy appear on your slides. Misalignments issues with logos and graphics make your slides look disjointed — very unprofessional — not right!

How to use PowerPoint masters

For PowerPoint to be able to apply correct styles automatically to content, i.e. fonts, colours, design. Text and images should go into the master Placeholders fields. These are the pre-defined text, image and chart boxes with dotted borders on the blank slide layouts.

Text inserted into these master Placeholders is resettable within the layouts. Making everything line-up and stay in registration and adopting your templates branding.

Apply slide master to existing presentations

Reapplying a new design to an existing slide deck is remarkably quick if correctly formatted using masters and placeholders. That’s why they are there!

Just insert slides from an old styled presentation, choose Reuse Slides from the bottom of the menu that appears. Browse your computer to find the file containing the slides you want to import, and select the file and click Open. Automatically they will be formatted to a new style.

Any elements such as text, graphics or charts pasted directly into a slide in custom text boxes. Will not adopt the branding characteristics (fonts, colours and especially layout) defined in the layout master. Only the text assigned to placeholders will take the correct formatting.

Corporate PowerPoint branding services

Having your corporate presentation templates set-up and designed by us will undoubtedly save time. You’ll benefit from great-looking presentations that are quick and easy to format. The savings in time can be vast for any organisation.

Online PowerPoint training

We offer a full webinar training service for end-users. These sessions run through how to work with slide master and general formatting within PowerPoint. Plus tips on the best design practice for creating stunning presentations.

And for that ‘unique’ presentation or big pitch — a full visualisation, design and animation service is recommended!

TurnRound Presentation Samples

Like to know more? Please call
020 7100 7323 or email today.

Let’s Talk

Travel Management tool App development ‘Know & Go’

Technology is helping take the stress out of business travel for Mondelez International employees. Giving your business travellers the tools they deserve is a priority for any organisation — better-informed travellers are more productive and safer. Plus the extra benefit of helping to keep travel expenditure under control — especially as travel is one of the most significant controllable expenses for many businesses.

In this map driven app ‘Know & Go’ — developed by us in collaboration with Mondelez Global Travel Team — you can find information on preferred hotel and ground transport vendors, find the useful local facility and office information. Search for restaurants, shops and airports. All accessible from a mobile phone while travelling or a laptop in the office. This travel tool makes budgeting and planning trips much more informative for the traveller. Up-to-date information is key to making smooth trips. Tapping into Google Maps content makes sure the data is relevant and timely.

Easy to update through user dashboards

Internal data, such as office and production facilities locations, are managed through admin dashboards. Preferred hotels, useful visitor information, currency and country data can be updated by administrators securely through an (SSO) Single-Sign-On, no passwords required when you’re logged in to their intranet. The Content Management System (CMS) makes updating instant and straightforward.

Complexities of organising business travel information

Mondelez operates in 70 countries across the globe, with nearly 300 locations and over 80,000 employees. All able to access the tool through their intranet. The complexities of organising travel information in an easy to use interface were critical to the project’s success. The user interface (UI) we developed follows the norms of mobile-first design principles. Feedback from users — gathered within the app — has been very positive. App usage has increased 100% over the last twelve months since launch.

Evolving technologies driving new business needs

We designed the original software as a location map website for Kraft offices. Primarily as a database of their European locations, contact details and brand information for their corporate events team in 2005. Pre-Smartphones!

In subsequent years this has been adapted to include hotel and travel information for their employees, or when planning and budgeting business travel. We incorporated information on trip safety guidance for unstable countries and regions.

Mobile-friendliness became a priority for travellers as smartphones became the norm! Hence the reworking of the front-end application interface.

We deliver projects on time and budget!

Rewriting the application for responsive mobile-first smartphone browsing was a considerable task. However, we were able to use our existing database structure and desktop website admin interface, keeping costs down – and more importantly, delivering the project on time and budget!

User-friendliness is a must for any app

User-friendly, data-driven technology solutions are crucial to ensuring every Mondelez business traveller has excellent experience planning, travelling — and more importantly, a safe return home.

We hope ‘Know & Go’ will help them deliver those great travel experiences in the future.

TurnRound have lots of expertise in developing mapping applications in the travel sector. Please do get in touch.