Software development

Chapter 6 – Advanced interface design

Contents ❷❸• What makes a good Windows 8 interface?• The essentials of Windows 8 applications• Grid system and pixels• Interface component templates• Assignments• Questions and answers

What is a good Windows 8 interface like?

• A good interface consists of several details, it is important to be diligent

• The most essential question can be asked in one sentence: can the interface be learned and used effortlessly?

• Windows 8 applications follow the guidelines of minimalism in both interface design and content

Sample interface

Windows 8 User Experience Guidelines

• Microsoft has gethered the interface guidelines for Windows 8 applications into the 300-page book ”Windows 8 User Experience Guidelines”

• These instructions are primarily for normal XAML or utility applications– The parts dealing with the usability of applications

are also important in games

The essentials of Windows 8 applications

• You must know some essential facts about interface design in order to design good, functioning applications

• We will now talk about matters such as screen resolution, layout, interface controls, and animations

Grid system• Windows 8 applications can be run on different

kinds of devices from traditional desktop PCs to small tablets

• The smallest visible unit on screen is the pixel, but for interface design this unit is far too small

• Windows 8 applications use a grid systemwhich divides the screen into units and again into sub-unit

Windows 8 grid

Unit sizes• Unit

– Size 20 × 20 pixels• Sub-unit

– Size 5 × 5 pixels– One unit holds 4 × 4 = 16 sub-units

• Pixel– Physical pixel on screen, size depends on used

device

Resolutions on Windows 8 devices• The smallest supported resolution for Windows 8 applications in

1366 x 768 pixels– This screen holds 63 × 38 units

• The sharpest modern resolutions are at the 4K level– This kind of screen is typically 3840 × 2160 pixels, which means the

screen can hold 4 Full HD videos at once• The most typical resolution in a Windows 8 device is Full HD

resolution or 1920 × 1080 pixels• You should also be familiar with the concept of dpi

– Dots per inch– The higher the dpi value, the sharper the display

Use of screen space and dpi values• As a developer you may choose whether you want

to display on high-resolution displays1. more information (such as news headlines), or2. to keep the number of visible elements the same and

only make them larger• Windows 8 is able to automatically choose the

graphics based on the display's dpi value– This way sharper displays can display higher quality

images without changing the program code

Designing touch interfaces• Windows 8 applications should be designed to

be primarily used by touch (the touch first principle)

• Once your application functions well with touch control, it is also immediately usable on other input devices– Typically a mouse-keyboard combo or, in some

devices, a stylus.

Event driven applications• Windows 8 applications are event driven• This means that the Windows operating

systems informs applications of notable changes through events– Events include touching the screen, pressing a key,

or turning the device from a vertical position to horizontal

Event handler• An event handler can be programmed for all

these events• Handler will run a piece of code depending on

the type of event• Event handlers can be defined in Visual

Studio's Properties window

Events in Visual StudioClick the lightning icon to view the chosen component's events

Displaying commands• The minimalistic design of Windows 8 applications

means that they may not have any visible command controls– all screen space is used for content

• Commands are essential, however, and depending on the application there may be dozens of them

• Windows 8 offers several different options for displaying commands– The most widely used method is to use an application bar

Application bar

Application bar's functionality• Application bars are horizontal areas that are displayed when

the user swipes at a corner of the screen– The user can also right-click on top of the application, or press the

keyboard shortcut Windows+Z.• You can position the application bar either at the top or

bottom of the screen– The bottom is the more typical choice, and the most common

commands should be placed there– The application bar commands are placed either at the left of right

side of the bar, but never in the middle to make two-handed tablet use easier

Example<Page.BottomAppBar> <AppBar x:Name="alapalkki"> <Grid> <StackPanel Grid.Column="1“ HorizontalAlignment="Right“ Orientation="Horizontal"> <AppBarButton HorizontalAlignment="Left“ Label="Päivitä" VerticalAlignment="Top" Icon="Refresh"/> </StackPanel> </Grid> </AppBar></Page.BottomAppBar>

Interface component templates• There are around 40 component templates for

Windows 8 applications.– All of them can be found in Visual Studio's Toolbox

• A simple application can manage with about a dozen different components– The most common components will now be listed

• Remember that components can be added on screen while the application is being run

Components 1/2Component Picture Description

TextBlock This components displays text in the chosen font and size. The displayed text is defined in the component's Text field. These components are often also known as Labels.

TextBox The TextBox components allows the user to input text. The code can easily read the text by using the component's Text property.

Button As their name reveals, Button components create buttons and switches for different situations. By default these buttons are rectangular, but for example in the application bar they are circular. Buttons are used also on message dialogs.

CheckBox CheckBox lets the user make yes-or-no-type decisions. This component is at its best when there are at most a few choices left.

RadioButton RadioButton works like CheckBox, but allows the user to choose only one option out of several, whereas the CheckBox allows for multiple choices.

Components 2/2ComboBox The ComboBox allows the user to choose one out of

several options. When compared to RadioButton, ComboBox has the advantage of taking much less space.

DatePicker DatePicker lets the user easily pick a date. It's better to use DatePicker to request the user to input a date, instead of using TextBox.

TimePicker TimePicker works like DatePicker, but instead of a date it asks for a time.

Slider Slider is a useful tool for letting the user pick a value from a preset range, for example a percentage from zero to hundred. Slider may be inaccurate for some situations, though, so when great precision is needed, it better to request that the value be input as numbers.

ToggleSwitch ToggleSwitch is suitable for situations where a feature needs to be switched on or off. The user will assume that the new feature is switched on immediately, such as when ToggleSwitch is used to turn a tablet's WiFi connection on.

Required screen space• Primarily each Windows 8 application fills the

whole screen– The user may, if she so wishes, move an application

aside so that two or more applications can fit on the screen simultaneously

• Windows 8.1 is able to display four simultaneous applications side by side– Each application must have at least 320 pixels of

horizontal space

Example

In program code• You can easily find out the available screen space by

using the program code• For example like this: (wirth; heigth = Bounds.Height):int width = (int)Window.Current.Bounds.Width;screenSizeTextBlock.Text = "Current screen width is " + width + " pixels.";

Assignments1. Find out what is the most popular screen

resolution for Windows 8 devices.2. Could all commercially available Windows 8

application be created using only Visual Studio's interface components? If third-party components are needed, where can they be acquired from?

3. Read the Windows 8 interface guidelines and find out what "adaptive layout" means.

Questions and answers 1Visual Studio has several available interface components. How do I know which one I should use?• Each component has a certain use. For example, yes-or-no choices can be

displayed with three different components but depending on the situation, only one them will be a suitable choice.

• However, the choice is not always made between right and wrong, but rather good and better. The best way to get to know the component guidelines is to read Microsoft's recommendation. They can be found in the Windows 8 User Experience Guidelines (see pic. 6.2).

• However, the choice is not always made between right and wrong, but rather good and better. The best way to get to know the component guidelines is to read Microsoft's recommendation. They can be found in the Windows 8 User Experience Guidelines (see pic. 6.2).

Questions and answers 2I would like to test my application on different devices but I only have one laptop. How can I test my application without having to buy all different kinds of Windows 8 devices?• The easiest way to test your application's functions on, for example,

different screen resolutions is to use the simulator supplied with Visual Studio.

• You can use this simulator to try different resolutions and screen positions (horizontal or vertical) for tablets.

• Sometimes you may get the chance to test your application on an actual device. Because of this you should keep an eye on Microsoft's events in Finland, as they arrange special workshops where your applications can be tested on different devices.