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 displays 1. more information (such as news headlines), or 2. 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 Studio Click 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 <StackPanel Grid.Column="1“ HorizontalAlignment="Right“ Orientation="Horizontal"> <AppBarButton HorizontalAlignment="Left“ Label="Päivitä" VerticalAlignment="Top" Icon="Refresh"/>

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/2 ComponentPictureDescription 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/2 ComboBox 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.";

Assignments 1.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 1 Visual 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).

Questions and answers 2 I 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.