Entry Points

Google has an extremely successful and appealing entry point - it makes clear what the highest priority element is (the search box), and through doing that makes it clear to the user why they are there and what they can do there. Other elements are present, but an effective hierarchy ensures that they don't intrude.

The entry point (literally, the place where you start) of a user interface is critically important - if the user is lost as soon as they begin interacting with a system then the experience is automatically negative, and an initial negative experience is difficult to repair. 

"People do judge books by their covers, internet sites by their first pages, and buildings by their lobbies" (Universal Principles of Design, 2010) 

The key elements of a positive Entry Point:

Minimal Barriers
Splash screens, log-in screens and even app drawers can be an intrusive element of user interfaces. Though app drawers are often a necessity, if possible it is always better to display as much of the content in as little steps as possible. In the case of the Hyperloop interface it would be appropriate and applicable to have almost no barriers, as the large screen allows for almost all of the information to be displayed at once, and the top nav bar eliminates the need for separate app drawers. 


Points of Prospect
Points of prospect should allow people to become oriented and clearly survey the steps they can take next. They take shape in the form of effective navigation elements and item hierarchy.  


Progressive Lures
Lures should be used to attract people and pull them through the entry point e.g. an attractive piece of imagery or type, or an engaging navigation element. 

Flexibility-Usability Tradeoff in Interfaces

The flexibility-usability tradeoff is a design principle maintaining that the usability of a system decreases as its flexibility increases. The tradeoff exists because accommodating a greater degree of flexibility makes it increasingly more difficult to create ample filters and regions for the features and information to exist, which then results in a cluttered and unintuitive interface. 

An aircraft/spacecraft cockpit perfectly illustrates this - a pilot needs access to every single individual control and aspect of the system, but this results in a highly esoteric and unintuitive system with very low levels of get-go usability. Though this case is unique in its requirements, the same can be applied to something like a TV remote. Most TV remotes are inundated with myriad features that have extremely low levels of user engagement, but the controls and features remain there just in case the user needs them. Though the remote is made highly flexible, it's also made highly unusable as users have to search for their desired function, and touch-only interaction is rendered void by the sheer number of identical elements. The alternative is to create a remote with only the most engaged-with controls, such as volume, source input, on/off and channel switch. But what if the user actually needs the features which have been removed? You then depend on the TV itself having ample controls, which is rare and creates a more negative overall experience. This demonstrates how difficult the trade-off can be. 

In the case of digital user interfaces, particularly regarding one fit for Hyperloop, this tradeoff can be important in creating a positive user experience. Sci-fi interfaces often favour the flexibility stand-point, and real-life contemporary UI designers tend to favour the usability stand-point. It'd make sense for Hyperloop to find a good compromise between both the excitement of sci-fi and the usability of reality. 

The probable most important elements for Hyperloop interface, in order of priority:

1. System Information (if active) e.g. Delays, Emergencies etc.
1. Current Time
2. Estimated Time of Arrival
3. Location (journey completion timeline)
4. Speed
5. Broader Journey Details
6. Remaining elements 

Inspiration from science fiction

Because of the myriad of dull and uninspiring interfaces in existence, it's worth turning to the many worlds of science fiction in order to get a glance of what makes an exciting and engaging system. 

Interfaces in sci-fi films tend to use dark backgrounds with the most important information displayed in a bright colour like red or turquoise. It's worth remembering that these interfaces have been designed primarily to excite and engage the viewer, and would be almost entirely impractical in real-life situations. This is made obvious by the absurd amount of information displayed on many of them, and the almost complete lack of visual hierarchy. Though these interfaces would be totally impractical in an actual situation, they are made engaging through their use of colour, futuristic typefaces and dramatic visual diagrams and iconography. Some of these elements could be incorporated into the Hyperloop interfaces, though not at the expense of usability and intuition. 

Visual Hierarchy in Interface Design

Alex Alexiev, a designer at McLaren (see above) stated that user interfaces in cars tend to follow a 1, 2, 3 order of priority. The change in location of the first, second and third priority elements changes in accordance with size, typography and colour, as documented below. 

______________________________________________________________

______________________________________________________________

______________________________________________________________

To further assess the impact of colour, layout and typography, some impromptu eye-tracking tests were conducted with a number of people. The darker line is where their eye started, the dimmest one is where it ended. 

______________________________________________________________

 ______________________________________________________________

______________________________________________________________

When the Notification Bar was made red, people's immediate attention shifted immediately towards it first. They almost universally then shift to the progress diagram in the centre. 

The generally accepted principle of the eye moving from the top left downward also applies. 

Typography in Interface Design

Typefaces suited for digital interfaces tend to have a high x-height and easily distinguishable letterforms. 

Gotham

Gotham was never intended for use on user interfaces, but it performs relatively well in use. Though it has a small x-height, its letterforms are all differentiated with ease and often the type is set in the heavier fonts in the family which helps to aid legibility and readability. The typeface allows for rapid reading due to its compact form. Gotham Medium is used by Tesla in the Model S and Model X.

San Francisco

San Francisco was designed in-house by Apple for Apple Watch. It was designed specifically to perform optimally in small screen environments such as a smartwatch, and it achieves this through its high x-height and differential letterforms. Whereas Helvetica performs very poorly in a digital environment because of its similar letterforms, such as i and l, San Francisco was designed specifically to avoid this.  It has been expanded from Apple Watch to both iOS and macOS.

Roboto

Roboto was designed by Google for use in Android software and within the Material Design language. It has a wide usage scenario, ranging from phones to TVs and car infotainment systems. Its high x-height and condensed form make it ideal for small screen environments like phones and watches. It performs well in the space it was built for, and although Google describes it as "modern, approachable" and "emotional", some have criticised its military-esque stern-ness. Even a recent redesign failed to make it feel friendlier. 

Helvetica Neue

Helvetica Neue was used temporarily by Apple in both iOS and macOS. It was used after Lucida Grande and before San Francisco. It received much criticism during its short reign due do its inability to scale well and the similarity of some letterforms. Erik Spiekermann said of it: "Helvetica sucks. It really wasn’t designed for small sizes on screens. Words like 'milliliter' can be very difficult to decipher."

Wireframing

Wireframes are a good way to create order and hierarchy before adding the distraction of visual elements and imagery. 

Wireframes focus on:

• The range of functions available
• The relative priorities of the information and functions
• The rules for displaying certain kinds of information
• The effect of different scenarios on the display

It is good practice to keep as many elements as close to the user as possible. The Hyperloop interface that this concept is being created for would be a 25" adjustable, retractable UHD display. Though not as big an issue as on smartphones, it would still benefit the user to contain as many interactive elements as possible to the bottom of the screen so less arm travel is required. 

It also aids the UX if all the interactive elements are contained to one static screen where possible. This avoids hiding or obscuring content. In multiple feedback sessions, the following wireframe was deemed the most appropriate and so was developed further:

Gotham was chosen as a placeholder typeface because of its suitability for digital environments and its contemporary applications. Tesla employ Gotham for their brand and UI. San Francisco was later chosen because it was designed explicitly for digital use (high x-height, distinguishable characters). 

Finger Travel and Target Size in Touchscreen User Interfaces

Touch Target Size

The size of the interactive elements on a touchscreen interface is incredibly important. Though there are no generally agreed-upon guidelines or rules for ideal touch target size, device manufacturers and system design teams tend to have their own recommendations. Apple’s iPhone Human Interface Guidelines recommend a minimum target size of 44 pixels wide and 44 pixels tall, whereas Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggested that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels. Google's Material Design guidelines (pictured above), recommend 48 x 24 pixels. 

It makes sense then to assess the size of human fingertips. An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest. Of course finger-sized elements are ideal, but not always practical. Most of the touchscreen interfaces we interact with on a daily basis are on the relatively small display surface of smartphones.

Finger Travel 

As seen on the images of iOS 10 above, most of the elements you can interact with are located near the bottom of the device to minimise the travel undertaken by your fingers as you reach to press the targets. Though this is generally abided by, Apple (and Android devices) have a lot of crucial navigation elements right at the top of the device, such as their hamburger menus and back buttons. Most interfaces do the same, but BlackBerry 10 was a system which optimised ergonomic, one-handed UI navigation. As seen on the images below, almost all navigation could be done with the fingers on one hand and with very little finger travel. If space was non-permitting, then gestures would often provide an ergonomic secondary. 

A gesture used to access the BlackBerry Hub from any point in the system

Bottom navigation bar on BlackBerry 10

Seat-back interfaces and lighting

This is the interior experience and back-seat interface on a 2014 Airbus A330. The lighting could be adjusted for a variety of scenes and moods and it had a wide variety of colours. They were only used at the start of the flight and at no other point; it'd be interesting to find out when they're primarily used. It's likely that vehicle and environmental lighting solutions in the future will have benefits linked directly to biological/psychological functions e.g. removing blue light in order to make sleep easier (or vice versa), or using colours to evoke particular emotions. These techniques have often been employed by interior designers, but should increasingly be employed by UI/UX and experience designers too. 

The interfaces themselves are overly small and cramped, with an uninspiring and relatively unexciting aesthetic. Information such as altitude and ground speed is displayed, which is a good step, but it leaves you wanting more and the manner in which its displayed is dull and not futuristic.

General Points and Feedback for the Philips MyHealth app

- In general, the majority of people said they would use the MyHealth app 
- Those who said they wouldn't use it themselves said they knew of many people who would 
- People who would use it said that they were appealed by the flat, clean layout and the rewards aspect
- The rewards aspect should be enhanced
- People were concerned that they wouldn't remember to log information; this would be made redundant if the app was mostly autonomous 
- The app could and should link with fitness trackers such as Fitbits etc. 
- People are in favour of allowing users to change the colour scheme from the default Philips brand scheme
- Uncertainty of how to monetise the app; potential partnerships with other organisations like NHS etc.? In-app purchases would be intrusive and annoying
- Would serve as a beacon of Philips' positive impact on the world
- People are appealed to the idea that the app converges the features of all other health apps, and see that as a viable reason to use it over the others
- Notifications and reminders would work well for some people 
- Clear, interesting and simple layout