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 

Brief for The Good Life 2.0

The Goof Life brief therefore asks you to design a product, service, campaign, or system that facilitates positive lifestyle behaviours in daily life, which will help people to: 

• better prevent the onset of lifestyle-related chronic conditions by modifiying lifestyle behaviours like reducing alcohol intake, eating more healthily or increasing physical exercise; or, 
• detect these conditions earlier so that they may be treated and potentially resolved; or, 
• live longer and enjoy a quality of life through more effective or more personalised treatment for those living with lifestyle-related health illnesses 

Overview

A mobile app by Philips which would combine the best features and uses of all the major health apps. Would work alongside third party fitness trackers, smart devices and medical devices. Would inform the user of their heart rate, activity levels, sleep activity, blood analysis etc., let them keep track of their tobacco/alcohol/calorie/fluid intake, and remind them of when to see their dentist/optician health professional. 

Problem

Many health apps exist, but none exist which perform the features of all in a clear, concise, fun and rewarding way. An app could be developed which would allow people to live healthier, more relaxed and active lives in an easy, fun and rewarding manner. 

Objectives/Aims

The ideal experience of using a health app should be fun and active. It should make you feel as if you are achieving something, reaching your goals and living a better life because of it. It should be customisable and relevant to everyone, and a competitive element would encourage people to use it more extensively and encourage their friends to get it too. Everyone likes to win, and people try much harder when it's a possibility. Fitbit have used competitive elements to their great advantage. 

Target Audience

Generally the app would be targeted at users from the ages of 18-40. This aligns well to the Fitbit target audience. 

Deliverables

Comprehensive interface designs for the MyHealth app. 

Supporting Resources/Information

Apple Health 

Google Fit 

Fitbit

Microsoft Health 

Experience Design in Transport

User interfaces form one part of the user experience as a whole. In order to assess what kind of interfaces and designs would be appropriate for Hyperloop, it would be beneficial to observe and analyse current and former interfaces and experiences seen in transport systems of the past. 

Concorde 

Concorde was the second supersonic passenger jet airliner ever to be built (after the Russian Tupolev Tu-144). Though Hyperloop only just achieves the speed of sound at 760 mph (compared to Concorde's 1,354 mph), it will be the first major ground based transport to come close to this speed, so it seems relevant to look at the kind of experience passengers got with Concorde and whether or not it corroborated the experience of the aircraft being cutting-edge, exciting, 'futuristic' and extremely fast and convenient. 

Note: Photos provided by Business Insider 

The narrow, long fuselage and interior reinforces the impression of speed, as does the relatively limited number of seats. Though there are no backseat displays, it must be noted that Concorde was retired in 2003. It could also be argued that supersonic aircraft allow for such speeds that in-flight entertainment isn't as necessary as on traditional long-haul flights, though in modern and emerging systems such as Hyperloop, digital interfaces are less about necessity and more about providing a beginning-to-end positive experience. 

One of the reasons for the downfall of Concorde was its extremely high tickets prices, made so by its extremely high production costs. This meant that only very affluent individuals were able to afford tickets, and so the in-flight experience was adjusted to reflect this. Though it is easier to create the feeling of luxury with a well-designed physical product such as a champagne menu, it's arguable that in the long term a digital equivalent is now more appropriate, especially for a system such as Hyperloop. Digital interfaces allow us to eschew disadvantages such as a propensity for damage, getting lost or dirty, resources used for continuous production etc. and to create a more exciting and futuristic experience. 

In-flight information such as speed and altitude immediately reinforces how convenient and/or advanced the transportation method is. It would be particularly relevant in the case of Hyperloop to include such information and more e.g. GPS location/accurate ETA/live view? 

Economy Class vs Business Class vs First Class

in subsonic aircraft 

In contemporary subsonic flights, the difference in the cost of the ticket doesn't affect the speed of the aircraft, but rather the in-flight experience. It decides whether you get a small screen or a medium one or a large one. Whether it's bordered by white plastic or gold metal. Whether your seat controls are physical, digital or non-existent. Whether you can adjust the tint of your window or not. Whether you sit in a row with many other people or have your own independent cabin. 

Business Class Seat Controls

Economy Class Displays and Seating

Emirates First Class 

Environmental Mood Lighting can have a great impact on passengers' perceptions of the vehicle and the experience of travelling within that system.  

"Different colours are perceived to mean different things. For example, tones of red lead to feelings of arousal while blue tones are often associated with feelings of relaxation. Both of these emotions are pleasant, so therefore, the colours themselves procure positive feelings in environments. The chart below gives perceived meanings of different colours in the United States."

Functional (F): fulfils a need or solves a problem

Sensory-Social (S): conveys attitudes, status, or social approval

Trains

Though trains are often given a bad reception due to high prices, infrastructure issues and their inability to scale with demand, many people enjoy the experience of travelling on them due their best-case scenario being a medium speed, relaxed, self-contained journey. Often, particularly if you're going somewhere new, the act of looking out of the window can be a positive and entertaining experience for a substantial length of time. Some Hyperloop systems may have transparent surfaces that can be looked out of, but most probably wont at this point, and so an alternative user experience must be created. Perhaps a personal interface could create an even better experience than a window.