Responsive Video Game Interface Model

Responsive Video Game Interface Model Jarosław Andrzejczak Lodz University of Technology Ł´od´z, Poland

Hubert Ogrodowczyk 11 bit studios Warszawa, Poland

[email protected]

[email protected]

Abstract Nowadays players want to have a seamless access to their favourite games regardless of the computing device at hand. Creating an individual user interface for every target platform is time-consuming. It can lead to many errors and inconsistencies between individual designs. Many methods and frameworks for allowing multi platform user interface creation have been proposed in recent years but they mostly focus on web and application design. The common goal is to provide models and languages to describe interfaces at a high level of abstraction. Unfortunately none of them became a standard mostly due to strong couplings to specific system architectures. In this paper we propose the model for responsive video game interface design that can be applied in early stage of development for shortening the design process time and reducing the number of assets needed.

1

Introduction

Creating an individual user interface for every target platform is time-consuming. It can lead to many errors and inconsistencies between individual designs. For that, a multi-platform user interface (UI) design approach emerges in recent years in both academic and industry field. When creating a user interface for a system that will be accessed on many platforms like desktop, mobile, web or even game console there are many factors to consider such as screen size, display resolution or input type [31]. Seems that among players input matters the most. whenever he or she use mouse and keyboard or game pad as an input it completely changes the way of interaction. For example, selecting element with a mouse is more precise than via touch input. In the case of the gaming industry the controller diversity is even bigger [34]. Nowadays players want to have a seamless access to their favourite games regardless of the computing device at hand. It is just like users want to check email 1

Andrzejczak, J. and Ogrodowczyk, H. or browse web not only on PC but also on mobile devices and game consoles [1]. For example, games like Hearthstone [18] can be played on PC, tablet or mobile phone. What is more, players can compete on different platforms at the same time. Gameplay on each of those platforms remains the same. It is the user interface that differs to provide the best gaming experience regardless of screen size, display resolution or input type. Therefore, researchers and creators seek cross-platform frameworks and models which will allow creating functional, accessible and consistent UI designs for various platforms and devices. Such solution should support content creation in a fast and easy manner without a need to manually design UI for every target platform [1]. This also applies to game industry. During our research we talk to game UI design and game production professionals across different polish game industry companies. They assure us that there is a need for a multi-platform video game UI design model as well as proposition of the design process for that domain. Modern game engines like Unity [19], Unreal Engine [20], GameMaker [21] and individual engines developed by studios, also technologies such as Universal Windows Platform (UWP) [14] or HaXe [22] with OpenFL framework [23] allow creators to build games for different platforms from one source code1 . Still, differences between UI design for various mentioned target platforms often force designers to create them manually [1]. In May 2010 Ethan Marcotte in his article in A List Apart [15] introduced the term: Responsive Web Design (RWD). It described fluid and flexible layout for web pages using media queries. The main advantage of this solution was a single design and one codebase for various viewing devices. RWD allow comfortable usage of sites on desktops, tablets and mobile phones [16]. That became our inspiration for this work. We have decided to apply the same principles to video game user interface design. Jesse Freeman, Game Developer Evangelist at Amazon, proposes a similar approach in his Responsive Game Design talk at Amazon Appstore Summit [17]. He defines a framework for Responsive Game Design that refers to a whole game design process – not only UI. It is based on the same principles that work so well in responsive design for web apps. This framework includes the following key principles that have to be met to properly support cross-platform game development: • Game graphics and UI support multiple resolutions. • Game mechanics work across multiple types of input. • Publish to multiple platforms with the same codebase. 1 Sometimes it is needed to add additional code for an individual platform to achieve the same functionality (like conditional code blocks and conditional compilation in HaXe).

2

Responsive Video Game Interface Model • Saved data is synced across all platforms. Author placed the UI only in the first principle but in our opinion it suits for all four of them. In this paper we propose the model for responsive video game interface design that can be applied in early stage of development for shortening the design process time and reducing the number of assets needed. The three contributions to multiplatform video game user interface design research presented in this paper are: • The responsive game interface model for creating a high level hierarchy of UI elements with parameters for automatically adjusting layouts on different target platforms. • Four main parameters for that model which form the basis of proposed solution and introduce possible further extensions. • Prototype system that implements a responsive game interface model in a widely used game engine (Unity). Also, its first informal test — verifying functionality, accessibility and consistency of generated responsive designs. We start with a discussion of related work in the next section. This is followed by a description of a main idea of the proposed model. We then present the model components in details and how it was implemented in a prototype system for informal tests. Finally, ideas for further development and final conclusions will be given.

2

Multi-platform user interface design

Multi-platform video game interface design is still a quite novel domain. While there are games targeting different platforms their interfaces are in many cases made individually for every aspect ratio and screen size. During literature review we didn’t find any unified solution for this problem. Therefore our research is based on knowledge gathered in general multi-platform UI design field. We have revised solutions from similar domains to video game design in the context of UI design (such as mobile and web). This section describes some models, design patterns and best practices that can be applied in video game interface design. In the last years different approaches to multi-platform user interface design were proposed. Most of them focused on software development and web sites creation. Previous research on multi-platform and cross-device user interfaces can be grouped into three categories: interactive graphical specification tools, modelbased generation tools and language-based tools [6]. The common goal is to provide models and languages to describe interfaces at a high level of abstraction [3]. 3

Andrzejczak, J. and Ogrodowczyk, H. Unfortunately none of them became a standard mostly because of the issues described in [6]. Among them, the most interesting and the most promising to be widely approved by the industry seems to be the second group – model-based generation tools. UI design professionals reject tools that automatically transform a whole UI from one platform to another [4]. Instead, they propose to automatically transform only some parts of UI for example by supporting parallel design approach [4]. So nowadays some techniques or their parts are used to support manual approach and new propositions are being developed. There are tools for WYSIWYG2 multi-platform user interface design process like GUMMY [1] that uses User Interface Markup Language (UIML) [1] for its elements description and mapping them to final designs using proxy objects. GUMMY was tested in simple card game design to verify its usefulness. Another ModelBased Design of User Interfaces (MBUI) environment is Quill. It enables collaboration between various stakeholders of a web application to adopt UI for crossplatform [2]. Article also describes several other MBUI environments for crossplatform UI design – mainly in a web design domain. Some environments, like Jelly [4], focus on consistency between multi-device interfaces. Jelly supports flexibility in UI design by enabling designers to copy parts of the design from one device to another. In this way, once created elements can be ported to another computing platform and adjusted to meet requirements of that platform. Dynamic support of partial or complete distribution of user interfaces is another approach worth mentioning [3]. Example of the distributed user interface is XDStudio. It allows parallel work in two implemented authoring modes: simulated authoring (working on a single device and simulating other target devices) and on-device authoring (distribution of the design process over multiple target devices) [3]. Some solutions, like W3Touch [5], focus on browsing the web on mobile devices. W3Touch provides page inspection and adaptation for browsing web on devices with touch interfaces. What makes this study interesting is that the authors tried to support multi-device design not at the design stage but after the product is released. They proposed automatically adjusting the UI elements based on user behaviours logged during product life-cycle. Other solutions concern the customization of UI elements. For example, XDBrowser [7] is a tool that targets not the developers but non-technical users. It enable adopting existing single-device interfaces for cross device use. By that means, authors propose meeting user’s needs by offering multiple interaction modes and by guaranteeing freedom of customization. Kennard and Leaney in [6] try to get a broader view of the UI generation 2 What

4

You See Is What You Get

Responsive Video Game Interface Model systems. They conclude the common problems of today’s UI generators. They also identify and describe in details the five key characteristics that UI generation technique should exhibit in order to be widely adopted or even became a standard. Authors pointed that dictation of the system architecture rather than adaptation is one of the main issues of multi-platform UI design techniques [6]. So our aim was not to create a new tool but to develop a model that can be applied to any toolkit or technology with ease. To achieve the same User Experience (UX)3 [12, 13] on different platforms, screen sizes and resolutions usability studies should be conducted [29]. Researchers as well as designers point out that usability studies are a very important part of the UI design process [4, 29]. It is necessary to evaluate the quality of the created product and its suitability for the end user [30, 28]. But creating an UI that provides high level of usability and User Experience is not an easy task for a dynamic and interactive system (that includes video games). It is also worth remembering that platform is a part of context of use in the sense of usability engineering [2, 10, 12, 13]. For game design it is a very important part. Research on how to adopt particular usability techniques for multi-platform design process have been done. For example, Hutching and Pierce in [9] and Bailey et al. in [8] conducted a study for extending paper prototyping [33] to cross-device design. Such approach allow user interface tests to be provided at early stage. Also, other different evaluation methods such as formative and summative evaluation (both formal and informal) can be done [32]. The differences in user interface design for the specific platform are described in [31, 24, 32]. Detailed descriptions of usability and User Experience measures, as well as ways of testing them can be found at [25, 26, 27, 28, 29]. As described in this chapter many methods and frameworks for allowing multi platform user interface creation have been proposed in recent years. They mostly focus on web and application design. Some analysed solutions still can be applied for video game interface design. Despite this there is still a need of individual approach for a video game interface which has a quite different goal than typical application or web interface. This goal is generally to provide entertainment and support the player in his or hers two main goals: having fun and winning the game [31].

3

Model

We propose a model-based design approach for cross-platform deployment. Mostly due to Model-Based Design of User Interfaces main benefits which include: incremental development for a wide variety of technologies, cost reduction of targeting 3 In

case of a video game design we will call it player experience or gameplay experience [31].

5

Andrzejczak, J. and Ogrodowczyk, H. multiple platforms and ability to apply changes at all points in the life cycle [2]. The goal of proposed model is to provide the same or similar functionality and accessibility on different platforms, resolutions or even input types. In order to construct a responsive user interface in separation from an implementation environment, a logical model was defined. The model serves as an abstract representation of a structure of objects, each of them with specific properties and mutual relations. An interface described in this manner can be interpreted by a composition algorithm to produce a resulting arrangement of elements. In other words: the main idea is to create a hierarchy and attach rules to that hierarchy to provide similar behaviours on specific computing platforms. Here, only spatial aspects are taken into consideration. Visual style features, such as a color scheme, are not included. An elementary part of the model is a rectangular area. Multiple areas are organised hierarchically — each of them can contain a number of child areas (Fig. 1). During the composition process, each child area is placed within the bounds of its parent, in a way which results in an optimal usage of available space. What kind of arrangement is considered optimal is based on a number of rules set for areas.

Figure 1. A model’s hierarchy defines the inclusion relationships between areas. After the interface structure was defined as a hierarchy, its further configuration is possible by the use of properties. Their role is to specify spatial requirements to be met by each area. Those constraints include size and spacing, as well as more complex behaviours - automatic layouts used for child areas or methods of handling cases of available space overflow. Therefore, proposed responsive model enables UI elements rearrangement during runtime and thanks to that it can be used also for orientation change on mobile devices (when player switches the view between horizontal and vertical by rotating the device). Many papers pointed out importance of WYSIWYG editors in UI design process [1, 2] so it was important to us that our model supports viewing changes as they happen. Authoring tool or model should be also flexible [1, 2] to allow easy adaptation for different context of use – that includes computing platform. Flex6

Responsive Video Game Interface Model ibility is important to fulfil one of attributes of a reliable tool according to Olsen which is: to reduce solution viscosity [11]. So our model enables adding extensions, new elements and easy changes in layout hierarchy. So far proposed model was used only for game UI prototyping and lightweight projects as simple games described in further section. We hope to verify our solution in commercial game development environment in the future.

4 4.1

Properties Size

The most basic properties of each area are its minimal and maximal sizes. Those are defined by a total of 4 values — widths (MinWidth, MaxWidth) and heights (MinHeight, MaxHeight). The minimal sizes describe the smallest possible space, which should be allocated to an area by the composition algorithm. If there is additional free space, an area can be expanded, but no past its maximal size values. Each size property can be assigned a number, specifing the width or height value (measured in pixels) or one of the special options. First of them — Compact — is also a default state of minimal size properties. It sets a specified value to the lowest possible, while still high enough to contain all child areas. In other words — it creates a compressed arrangement of area’s contents. The other option — Fill — applies to maximal size properties and allows areas to occupy all of the available space, with no further restrictions. Maximal sizes can also be equated with minimal sizes, by the use of AtMin option, disallowing allocation of additional space (Fig. 2). Additionally, it is possible to define a shared value, used by multiple properties at the same time. This makes it easier to introduce extensive changes to the model and to sustain size proportions between areas.

4.2

Spacing

The distances between areas can be customized by the use of external and internal spacing properties — Margin and Padding respectively (Fig. 3). The Margin property is used to separate areas placed on the same hierarchy level, below a common parent element. Two adjacent areas are always moved away from each other by a distance equal to greater of both of their margins. The Padding property refers to the spacing between an area and its children. 7

Andrzejczak, J. and Ogrodowczyk, H.

Figure 2. Example configuration of area’s size properties, including special options and a shared value.

4.3

Layouts

A layout describes an algorithm used for arranging child areas of a specific parent, while respecting constraints imposed by the other properties. In a current state of the model, two types of layouts are available — a one-dimensional sequence layout and a two-dimensional spring layout. Sequence layouts (Fig. 4) place areas one by one along the vertical or horizontal axis. The areas can also be aligned in relation to their parent, vertically (top, middle or bottom) and horizontally (left, center or right), producing a total of 9 possible alignments. Spring layouts (Fig. 5) offer an adaptive structure, which reorganizes itself in response to changes in its size, as well as sizes and positions of its children. Arranged areas are attracted to anchor points and kept out of overlapping with other elements at the same time. If the target position is already taken — the area is pushed away to a minimal possible distance, as on an elastic spring. Each of the areas has to include a number of properties, describing details of its placement. SpringAnchor defines the anchor point within the parent’s bounds, while SpringPivot serves as an alignment point relative to the placed area. SpringDisplacement selects one of the four possible displacement directions for overlapping areas — left, right, up and down. SpringLayer assigns the area to a group and allows for pushing away only from areas of the same group. 8

Responsive Video Game Interface Model

Figure 3. Behaviour of external and internal spacing properties.

Figure 4. Two nested sequence layouts with different alignment options.

4.4

Overflow and variants

If the arrangement space is limited, it is possible that the interface composition will produce overflows. Some areas might intersect with each other or not fit inside the bounds provided by a parent element. For handling those cases, the model includes the Overflow property. Overflows can either be ignored or result in alterations of intersecting area. A conflicting element can be hidden or forced to shrink to fit the available space despite its own size and spacing constraints. It can also be substituted by other areas through the variants mechanism. For areas to be used as variants, they have to share a unique group name and define a priority value. The subgroups of areas with the same priority are then ordered and checked one by one, until the subgroup with no overflowing areas is found. This is the only subgroup that remains visible, while the other ones stay hidden (Fig. 6). 9

Andrzejczak, J. and Ogrodowczyk, H.

Figure 5. A spring layout with multiple anchor points and displacement directions.

4.5

Further development

The proposed model can be extended by the introduction of new properties and improvement of existing ones. A major part of this process could be dedicated to layouts. The sequence layout should support wrapping — moving elements to a new row or column when there is not enough space available. Also, a grid layout could be added, making it easier to align areas with each other. A similiar function could be performed by a general guiding line system, which would make areas snap to user-defined lines.

10

Responsive Video Game Interface Model

Figure 6. Picking a valid area from a variant group.

5

Prototype implementation and testing

To verify the usefulness of the proposed model we conducted an informal use study. Mostly the accessibility was tested: can the player perform the same action on a different platform, screen size and input type. Also, we want to check if the responsive video game user interface model can be easily implemented in one of the most popular game engines. Therefore, a prototype of the proposed model was implemented. It allow defining, displaying and interacting with responsive interfaces. Also, through the selection of an appropriate development environment, the model was made easy to use in the context of video game production. The prototype system that applies the proposed model was built using the C# language and Unity game engine. It allowed to base the implementation on some of the existing solutions and mechanisms provided by this technology. It also created the perspective for further development as well as the use of the model in other game projects. Unity includes a hierarchically organized scene and an integrated user interface system, which was used for visualization and providing interaction with the arranged composition. The engine editor also offers support for extending its functionality with new functions and controls. This allowed for introducing convenience customization options for areas and their properties. The built-in serialization mechanism made it possible to save and load models. In accordance with the entity-component architecture of the engine, an area 11

Andrzejczak, J. and Ogrodowczyk, H.

Figure 7. Unity’s hierarchy and inspector windows, allowing for creation and customization of model-based interfaces. was defined as a Unity component. As a result, assigning arrangement logic to the interface elements placed on a scene can be easily performed with already available tools, such as the game object inspector window. Most of the properties described in section 4 are included as the fields of the component, aside from layouts, which were moved to their own components, due to varying configuration options. Figure 7 shows some of the editor controls used for defining interface structure and rules. In order to test the model’s mechanisms in practice, the example interface was created (Fig. 8). It was designed for a simple turn-based game, in which two players take control over robot teams and battle for resources, scattered on the battlefield. The interface makes use of all of the described features. A spring layout is responsible for arranging the main structure of the composition, placing panels in different parts of the screen. Multiple sequence layouts define horizontal and vertical lists of elements. The hierarchy includes hidden, alternative areas, which can be used as replacements in overflow cases. Areas also vary in terms of their size and spacing. The prototype system responses to different screen sizes had been tested (Fig. 8, 9 and 10). As shown, using a single, responsive model is a viable approach for supporting multiple displays. Since the interface is already implemented in a responsive way and changes dynamically, based on the spatial constraints, it is possible to introduce additional accessibility options like font size or button scale that can be changed by the player in the midst of the game (Fig. 11). Thanks to the responsive nature4 of our model testing can be done on wide 4 Automatically rearranging layout according to configuration of the specific computing platform.

12

Responsive Video Game Interface Model

Figure 8. An example interface, based on the responsive model viewed on a laptop screen (17.3 inch, 1600x900 pixels). All elements fit easily inside available space. variety of platforms and devices even in prototyping stage5 . For example we can check various design ideas with minimal effort and at low cost by applying the ideas from [8] or [9] in paper prototyping stage [33]. Also, conducted tests can provide a useful information for model’s proper parameters values estimation. We can also apply the mobile first design technique known from RWD to our model [16]. That means the design process should start with the most problematic or restricted computing platform or environment. Depending on the project it can be either mobile one, game console, specific resolution and screen size or input type. Possibly there will be still a need for an additional iteration to refine the design but most of the work will be already done. And thanks to the dynamic nature of the proposed model, parameters values can be adjusted easily and fast.

5 Such

as functionality, accessibility and consistency testing.

13

Andrzejczak, J. and Ogrodowczyk, H.

Figure 9. The interface viewed on a tablet screen (8 inch, 1200x1920 pixels), both in landscape (on the left) and portrait orientation (on the right). In the second case - some of the elements were replaced or changed positions, through the use of variants. End turn and menu buttons moved to other corners, and the score panel switched to a more concise, text based form.

14

Responsive Video Game Interface Model

Figure 10. The interface viewed on a phone screen (5.1 inch, 1080x1920 pixels), both in landscape (on the left) and portrait orientation (on the right). In the first case - the initiative queue switched to a shorter version, showing only the next unit to move. In the second case - changes are analogous to those on a tablet screen.

Figure 11. Accessibility options for changing font and button sizes, which might make interaction easier for some players.

15

Andrzejczak, J. and Ogrodowczyk, H.

6

Conclusion

This paper presented a responsive video game user interface model. It allows designers and developers to create layouts that automatically adapt to different computing platforms by rearranging their elements according to hierarchy and set parameters. It is shortening the time needed for multi-platform video game UI design by providing functionality and accessibility within the meaning of usability engineering [12, 13]. First informal tests showed that proposed model can be easily implemented in modern game engines and technologies allowing wide range of applications. Still, further validation is needed to estimate the value of responsive video game user interface model in long-term game production process and game life-cycle. Functionality, accessibility and consistency are the main advantages of applying presented responsive solution. Nonetheless, creators still need to conduct usability tests for their video game user interface designs for every targeting platform to provide high level of usability and UX [29]. We feel that the solution described in this paper opens up interesting possibilities for further research. In particular, the new parameters and visual properties will be examined to provide more complex and universal model. To sum up, pros of proposed model include, but are not limited to: providing functional, accessible and consistent automatically rearranging layouts, being cross-platform and technology independent, time-saving and working in runtime (without the need to recompile to apply layout changes), allowing testing on multiple target platforms even in early design stages.

Acknowledgment The authors would like to warmly thank Dominik Szajerman from Lodz University of Technology for his expertise and many valuable suggestions during model creation and its tests.

References [1] Meskens J., Vermeulen J., Luyten K., Coninx K.: Gummy for multi-platform user interface designs: shape me, multiply me, fix me, use me. In Proceedings of the working conference on Advanced visual interfaces (AVI ’08). ACM, New York, NY, USA, 233-240, 2008. DOI=http://dx.doi.org/10.1145/1385569.1385607 [2] Motti V. G., Raggett D., Van Cauwelaert S., Vanderdonckt J.: Simplifying the development of cross-platform web user interfaces by collaborative model-based design. In Proceedings of the 31st ACM international conference on Design of

16

Responsive Video Game Interface Model communication (SIGDOC ’13). ACM, New York, NY, USA, 55-64, 2013. DOI: http://dx.doi.org/10.1145/2507065.2507067 [3] Nebeling M., Mintsi T., Husmann M., Norrie M.: Interactive development of crossdevice user interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’14). ACM, New York, NY, USA, 2793-2802, 2014. DOI=http://dx.doi.org/10.1145/2556288.2556980 [4] Meskens J., Luyten K., Coninx K.: Jelly: a multi-device design environment for managing consistency across devices. In Proceedings of the International Conference on Advanced Visual Interfaces (AVI ’10), Giuseppe Santucci (Ed.). ACM, New York, NY, USA, 289-296, 2010. DOI=http://dx.doi.org/10.1145/1842993.1843044 [5] Nebeling M., Speicher M., Norrie M.: W3touch: metrics-based web page adaptation for touch. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’13). ACM, New York, NY, USA, 2311-2320, 2013. DOI: http://dx.doi.org/10.1145/2470654.2481319 [6] Kennard R., Leaney J.: Towards a general purpose architecture for UI generation. J. Syst. Softw. 83, 10 (October 2010), 1896-1906, 2010. DOI=http://dx.doi.org/10.1016/j.jss.2010.05.079 [7] Nebeling M., Anind K. Dey.: XDBrowser: User-Defined Cross-Device Web Page Designs. In Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems (CHI ’16). ACM, New York, NY, USA, 5494-5505, 2016. DOI: http://dx.doi.org/10.1145/2858036.2858048 [8] Bailey B. P., Biehl J. T., Cook D. J., Metcalf H. E.: Adapting paper prototyping for designing user interfaces for multiple display environments. Personal Ubiquitous Comput. 12, 3 (January 2008), 269-277, 2008. DOI=http://dx.doi.org/10.1007/s00779-007-0147-2 [9] Hutchings H. M., Pierce J. S.: Understanding the whethers, hows, and whys of divisible interfaces. In Proceedings of the working conference on Advanced visual interfaces (AVI ’06). ACM, New York, NY, USA, 274-277, 2006. DOI=http://dx.doi.org/10.1145/1133265.1133320 [10] Coutaz J., Crowley J. L., Dobson S., Garlan D.: Context is key. Commun. ACM 48, 3 (March 2005), 49-53, 2005. DOI=http://dx.doi.org/10.1145/1047671.1047703 [11] Olsen Jr. D. R.: Evaluating user interface systems research. In Proceedings of the 20th annual ACM symposium on User interface software and technology (UIST ’07). ACM, New York, NY, USA, 251-258, 2007. DOI=http://dx.doi.org/10.1145/1294211.1294256 [12] International Organization For Standardization: ISO 9241-210:2010 Ergonomics of human-system interaction - Part 210: Human-centred design for interactive systems,2010

17

Andrzejczak, J. and Ogrodowczyk, H. [13] International Organization For Standardization: ISO/IEC 25010:2011, 2011 [14] Intro to the Universal Windows Platform, https://msdn.microsoft.com/enus/windows/uwp/get-started/universal-application-platform-guide, last access: 23.09.2016 [15] Marcotte E.: Responsive Web Design, May 25, http://alistapart.com/article/responsive-web-design, last access: 23.09.2016

2010,

[16] Marcotte E.: Responsive Web Design, A Book Apart, New York, 2011 [17] Freeman J.: Responsive Game Design, Amazon Appstore Summit, 03.11.2015, https://www.youtube.com/watch?v=ZFrppykqttE, last access: 22.09.2016 [18] Sakamoto D.: Hearthstone: How to Create an Immersive User Interface, Game Developers Conference, 2015, http://www.gdcvault.com/play/1022036/HearthstoneHow-to-Create-an, last access: 22.09.2016 [19] Unity Game Engine, https://unity3d.com [20] Unreal Engine 4, https://www.unrealengine.com [21] GameMaker, www.yoyogames.com/gamemaker [22] Haxe - The Cross-platform Toolkit, https://haxe.org [23] OpenFL, www.openfl.org [24] Stellmach T., Caminos R.: Cross-Platform User Interface Development, Game Developers Conference, 2004, http://www.gamasutra.com/view/feature/130498/crossplatform user interface .php, last access: 22.09.2016 [25] Lazar, J. et al.: Research Methods in Human-Computer Interaction. Wiley Publishing, 2010. [26] Nielsen, J.: Usability Engineering. Morgan Kaufmann Publishers Inc., 1993 [27] Sauro, J., Lewis, J.R.: Quantifying the User Experience: Practical Statistics for User Research. Morgan Kaufmann, 2012 [28] Shneiderman, B., Plaisant, C.: Designing the User Interface: Strategies for Effective Human-Computer Interaction. Prentice Hall, Boston, MA, USA, 2009 [29] Tullis, T., Albert, W.: Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics. Morgan Kaufmann, 2013 [30] Hornbæk, K.: Usability of Information Visualization: Reading and Interaction Processes. University of Copenhagen, 2001

18

Responsive Video Game Interface Model [31] Saunders K., Novak J.: Game Development Essentials: Game Interface Design, Delmar Cengage Learning; 2 edition, 978-1111642884, 2012 [32] Bowman D. A., Kruijff E., LaViola J. J., Poupyrev I.: 3D User Interfaces: Theory and Practice. Addison Wesley Longman Publishing Co., Inc., Redwood City, CA, USA, 2004 [33] Snyder C.: Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces, Morgan Kaufmann Publishers, 1558608702, 2003 [34] Wojciechowski A.: 3D Scene Exploration with External Controllers, Towards Modern Collaborative Knowledge Sharing Systems, Studies in Computational Intelligence, Springer Berlin\Heidelberg, pp. 61-70, 2012. Doi: 10.1007/978-3-64227446-6 6

19