User experience prototype requirements FINAL REPORT

Transcription

1 Tallinn University Institute of Informatics User experience prototype requirements FINAL REPORT Authors Roger Puks Erkki Saarnit Ekaterina Shafeeva Maria Angelica Medina Angarita Lecturer Peeter Normak, PhD Tallinn, fall 2015

2 Project background and objectives The project in question intended to lay out a set of specific guidelines for developing and designing graphical user interface prototypes that could be used when designing websites on various platforms and devices. The project team consisted of students of the Human-Computer Interaction master s programme at Tallinn University, hence the main objective of the project was to come up with a set of guidelines that could be considered as formal, in contrast to the experimental and informal approaches that are more common in the field at hand. The project would be considered as successful, should the produced guidelines be evaluated as being helpful in terms of how to design and produce website prototypes. The project team consisted of four Interaction Design master s students, each of them specializing in an unique field of knowledge. Hence, although consisting of a limited amount of people, a wide variety of subjects was covered, including user experience design, graphical design, business as well as development. This enabled the team to view and evaluate the project and it s results from different perspectives. The project started on the 1st of October and concluded on the 13th of December, during which all of the necessary phases were covered, in order to produce the objective of the project. The final outcome was evaluated multiple times during the process through interviews with various professionals, which altered the outcome a bit. As a result, the guidelines were altered so that jquery served as the basis of the library. This was due to the framework s popularity as well as the fact that the guidelines had to fill the needs of developers. The Project Manager, Erkki Saarniit, had the overall authority and responsibility for managing and executing this project according to this Project Plan. The project manager also worked with all resources to perform the project planning. All project and additional management plans were reviewed and approved by the project sponsor before they were executed.

3 Objective Using different frameworks and libraries has become increasingly popular amongst developers due to the fact that it allows them to save valuable time and effort on something that has already been done by someone (Web Framework Rankings, 2015). The same logic goes for user interface requirements during each project, even if the UI characteristics remain the same, different teams tend to re-evaluate these interfaces, often coming up with identical results. This is the reason why there is a need to create a set of user interface requirements that could be used every time a certain standard type of UI is bound to be created. The project has been created to fasten the workflow of development & design teams when creating user interface prototypes. The objectives of this project are as follows: To study different interface elements in order to gain input To create a set of user interface prototype requirements through different means To evaluate the final outcome in a hypothetical project The project shall be divided into five standalone milestones, with the final milestone being the successful production of the user interface prototype requirements. The five initial milestones of the project are as follows: Understanding needs, interviewing and further studies Investigating devices and interfaces Developing requirements for designers and developers, writing user stories Feedback, debriefing and next steps The project must be tested thoroughly both UI-wise as well as technically with all current browsers and operating systems. All hardware and software must be purchased in accordance with the allocated budget and timeline. The following deliverables were concluded during the project phases. All changes to these deliverables were approved by the project manager. A detailed study on different UI elements across various devices Set of usable UI prototype requirements

4 The project milestone schedule is presented below. As requirements are more clearly defined, this schedule may be modified. Any changes were communicated through project status meetings by the project manager. Complete requirements gathering ( ) Interviews with idea owners and further studies ( ) Studying devices & interfaces ( ) Developing the requirements & user stories ( ) Feedback, debriefing ( ) Handover, retrospective, next steps ( )

5 Implementation of the project An agile and iterative development process was chosen for the project team. This was mainly due to the fact that although the final objective was clear, many sub-goals became known after certain phases of the project were carried out (such as the interviews with the professionals). Each iterative process has pre-set iteration span lengths (Agile Alliance, 2013) - for the team at hand, a single iteration lasted for a week. In the beginning of each iteration, a stand-up meeting was held between the team, where the whole team reviewed what had been done and what every team member would focus on during the following weeks. Although the process was chaotic at times due to team members switching focus rather often, the end goal was met. This jumping from topic to topic can be explained by the core ideas of agile development processes - since new knowledge was gained after each iteration, the team had to adapt to the newly found information and modify their work according to it. Additionally, simplicity was held in high regard, which means that during each weekly stand-up, all ideas that seemed to give little value for effort, were ruled out. This allowed the team to save time and resources without sacrificing the quality of the project. These meetings were held via VOIP messaging due to the fact that some team members reside in different countries. The project team was rather self-organizing, with each member contributing and proposing how assignments should be shared amongst team members.

6 Results The results and propositions for the prototype requirements were constantly tested on professional web developers, which allowed the team to be more certain that their end result would require only little modification. Had the testing been left to the end, as a last stand-alone part of the project, complications could have arisen, and that would have been rather difficult to tackle in the final stages of the project. More than fifty different websites were analysed, each of them providing examples of online user interface interactions. Some examples of these websites include: The analysis concluded that the existing libraries can generally be grouped to the following categories: Inspirational - just good ideas with one or few sample images based on what has been done by other people. Mobile/tablet - as the interactions of native applications on mobile devices differ from web interactions, many of the sites focused on those possibilities. Flows - sites focusing on user flows through different interactions, for example customer on-boarding flow, login flow, adding a product to shopping cart flow etc. Mostly consisting of screenshots. Code - sites focusing on actual code with examples of possibilities what can be done using this code, such as jquery UI library.

7 All of the sites that were analysed shared some weaknesses, such as not giving enough visual information, not illustrating how an interaction should be carried out etc. Hence, the project team hypothesized that developers require both code-based instructions as well as good design examples to use in their work. This hypothesis was somewhat overruled by the feedback we received from the participants of the interviews. As a result, we detected that the end-users need examples how the interactions can be used together with the flow and graphical design, the main focus being on the how part. We decided that jquery UI will be the basis for the library and graphical design should be left out from the scope of the project. The additional value that is created for the end-users is a set of short user flows, which contain jquery UI interactions with very basic design. The project team together with the external experts chose 3 interaction examples that are very often used in web design nowadays. The requirements of the interaction examples are the final result of the project.

8 Discussion The main goal of the project was to determine and create requirements for preparing, designing and finalising web user interface prototypes with the emphasis on website design, meaning that the requirements could be useful for web applications such as web shops, online tools, games, etc., but it mostly focuses on websites where the user interaction and experience, along with the interface is crucial for the success. As a result of the project, we ended up concentrating on three different prototype requirement examples. These were selected carefully after interviews with different experts who work in the area and have already good experience. These types were drag & drop items (jquery UI, 2015), sortable portlets (jquery UI, 2015) and autocomplete with scrollable results (jquery UI, 2015). The examples were mainly chosen due to three reasons. Firstly, they are highly supported by the widely used jquery, and secondly, they are interactions which are not so often used due to their complexity of implementation, and therefore, designers do not design them at first. Finally, and most importantly, the examples represent a very good way to enhance the user experience, speed up processes and make user interfaces more intuitive. The outcome of the project (the requirements) might have to be updated regularly according to new discoveries, however, they can be submitted to different design companies who prioritise the web user interface and interactions and be useful at the time. In terms of realisation of the project, a different approach to this project could have been to ask for the guidance of a well known web design company and submit this project for their sponsorship, which would have created financial income to the team members and it would have provided more insight and knowledge from other experienced designers and developers. Perhaps the time frame of the project would have been better accommodated to either a summer vacation while working is not an interruption or in a shorter period of time to really focus in the matter and not work on it at the same time as the team members had to work in other type of homework.

9 Different approaches to web interaction requirements Although a specific approach was used for the project, there are many different ways how to look at the problem. Hereby, we discuss some of them. The main topics that could be presented in the future are the continuous advancement and development of completely new techniques of designing websites and ground-breaking discoveries regarding user experience that could shift the way these two are related to each other. In other words, The requirements might have to be updated every year in order to continue being relevant, which at the end could be a great difficulty because the main goal was to establish a sense of perdurance regarding web prototypes. It might also happen that the requirements that are valid and up-to-date today, will not be usable any more in the future. One of the reasons for this might be a shift from jquery to some other library that is better, faster, more reliable, offers more possibilities, and therefore web development community starts using something else. As the examples chosen for this project were based on jquery, they should be rewritten to fit to the requirements and opportunities of another, new library. To look at this issue even more widely, it might happen that libraries in general, such as jquery, will no longer be used, because the front-end development will be focusing on something else. For example, HTML that declares the structure of the pages, might already include elements that define the interactions. Mobile and other new platforms It is today clear that mobile applications that include native code are faster and more reliable than jquery and other similar web-based libraries (Heitkötter, Hanschke, & Majchrzak, 2013). Although there are strong initiatives from JavaScript to speed up its usage, native applications still win the battle. The speed difference mostly becomes from jquery being used on the most front-end side of the web application, whereas the interactions in native applications occur so that they consume processor and memory more on the back-end side, therefore being closer to operation system s memory and process management.

10 The topic of different platforms is very relevant regarding this project, because more and more web traffic is happening through mobile devices (SalesForce, 2014). Our interaction prototype requirements focus on the web only, but on mobile devices a lot of interaction occur inside native applications. Still, it is fair to say that jquery is the most universal as it works the most crossplatform from all libraries. This project does not cover the part of native applications at all. The reason for it mostly being the fact that native applications usually have their own interaction libraries and possibilities, and are built quite differently compared to jquery. Also, many desktop applications have started moving towards a native application instead of being on the web with full functionality. Nevertheless, in 2015 still web-based solutions are most widely used on desktop devices and probably will continue to be so in a few years. In addition to mobile phones becoming smarter, increasing usage of tablets, there is a huge variety of devices on the market, some of them growing rapidly more popular. These include mostly smartwatches and wristbands. Such devices usually also have their own platforms, and more importantly, own interactions and guidelines how to build those interactions (Baker, 2014). The interactions are also different because of the size and shape of the device, input devices used (such as finger instead of a mouse, one finger instead of many fingers, or one hand instead of two). The way how the devices can be used intuitively sets new standards for the quality of good interaction designs. To continue from this background information, our recommendation for future studies is to take also native applications into focus. A good designer and developer uses the platforms that are at that moment mostly used by the target audience. If the target audience is a mobile phone user, it is relevant that the developer develops the system so that it is most convenient to the end user on that particular device, not just averagely convenient on any device. Consequently, we can say that there are two options how this issue can be resolved in the future. Firstly, as there are very many various devices and platforms available, one developer must be constantly learning a lot to keep track with all the possibilities. Another approach is that developers will specialise even more than today. For example, smartwatch applications are mostly designed by people who already know how to develop them for smartphones, because they have most similarities. In the future, probably more designers and developers will specialise on a specific

11 device or a group of devices. From this project s perspective it also means that instead of one good set of interaction examples there must be many of them.

12 Conclusion Nowadays is very easy to communicate online with people who live in different time zones, however, it is advisable to try to meet at least once a week to review the progress and control the tasks and responsibilities of all the team members. As a recommendation to other people or companies in general that would like to work in the field of developing website prototypes or other kind of online applications, it is advisable to count with the supervision or opinion of professionals in the field. The more people you involve, the more different and interesting approaches and ideas you might come up with. The insight from experts is valuable and the fact that they are working professionally on the subject brings a different and unique perspective to the final result of the project and helps orientate the process. We are very pleased with the outcome of the project and we are looking forward to sharing the outcomes of the project with our classmates to help them design better web interfaces. The outcomes do not have to be limited to the course however, since they can find application in the workflow of most people involved in creating online user interfaces. The requirements are useful to orientate the design of online prototypes so that there is a certain uniformity in what it is expected from them and it is better to achieve the user s satisfaction.

13 References Agile Alliance. (8. June a.). What is Agile Software Development? Agile Alliance: Baker, A. (16. April a.). The Design Challenge of Wearables. The Guardian. Heitkötter, H., Hanschke, S., & Majchrzak, T. A. (2013). Comparing Cross-Platform Development Approaches for Mobile Applications. Web Information Systems and Technologies (lk ). Berlin: Springer. jquery UI. (2015). Autocomplete. jquery UI: jquery UI. (2015). Droppable elements. jquery UI: jquery UI. (2015). Sortable elements. jquery UI: SalesForce. (2014) Mobile Behavior Report. SalesForce Marketing Cloud. Web Framework Rankings. (December a.). Hot Frameworks: