INNOVATIVE USER INTERFACE DESIGN SOLUTION FOR ONLINE STORE CONTENT MANAGEMENT SYSTEM

TALLINN UNIVERSITY Haapsalu College Department of Information Technology INNOVATIVE USER INTERFACE DESIGN SOLUTION FOR ONLINE STORE CONTENT MANAGEMENT SYSTEM Diploma thesis Academical advisor: Ville Tinnilä Master of Philosophy (Computer Science) Co-owner at Suomen Valmispalvelut Oy Haapsalu 2012

TLÜ HAAPSALU KOLLEDŽ Infotehnoloogia osakond Rakendusinformaatika eriala Töö pealkiri: Innovative User Interface Design Solution for Online Store Content Management System Teadusvaldkond: Infotehnoloogia Uurimuse tasand Diplomitöö Referaat Aasta ja kuu 2012, mai Lehekülgede arv 41 Käesoleva diplomitöö eesmärk on luua uus halduse kasutajaliidese disain Valmiskauppa.fi vana e-poe haldussüsteemi asemele. Diplomitöö võib olla hea juhendmaterjal disaineritele ja ka üliõpilastele - mida tuleb jälgida kui disainida keerulisemat veebilehte. Töö peamine eesmärk on anda ülevaade navigatsiooni loomisest, et säästa ekraanil ruumi kui tegemist on mahuka sisuga veebilehega ja teha see kasutajatele lihtsamaks. Tulenevalt probleemist püstitasin järgmised eesmärgid: õppida veebidisaini aluseid, uurida meetodeid ehitamaks töötavat navigatsiooni; uurida ja koguda informatsiooni paljudest teadatuntud veebilehtedelt, millel on keerukad navigatsioonid välja arendatud; luua haldussüsteemi disainilahendus; analüüsida ja mõelda, kuidas teha veebilehed ekraanisõbralikuks; koguda informatsiooni veebiprogrammeerimisest, et luua ruumisäästlikke elemente; analüüsida uut haldussüsteemi disaini ja teha vajadusel muudatused. Disainimiseks kasutan kujundustarkvara Adobe Photoshop CS5. Tänapäeval on suuresti tähelepanu kogunud veebikujundus ja kasutajaliidesed. Olemaks internetis läbilööv peab veebidisain olema tipptasemel. Peamine eesmärk on näidata mõningaid trende veebidisainis et disainerid või tudengid saaksid kasutada materjale oma õpingutel, arendamaks oma teadmisi ja oskusi. Diplomitöö tulem on materjal, mis annab ülevaate teatud elementidest Valmiskauppa.fi vanast haldussüsteemi disainist, selle analüüsi ja näitab kuidas luua paremat disaini. Võtmesõnad: Content Management System, User Interface, User friendliness, Web design Säilitamise koht TLÜ Haapsalu kolledži raamatukogu Töö autor: allkiri: Kaitsmisele lubatud: Juhendaja: Ville Tinnilä allkiri: Tallinn University Haapsalu College 2

HAAPSALU COLLEGE OF TALLINN UNIVERSITY Department of Information Technology APPLIED COMPUTER SCIENCE Title: Innovative User Interface Design Solution for Online Store Content Management System Science Areas: Information technology Level Diploma Thesis Abstract Month and Year 2012, May Number of pages 41 The aim of this diploma thesis is to create a new user interface design for Valmiskauppa.fi old online store content management system. The thesis would be a good study material for other students and designers as a graphic design guide: which things have to be taken under consideration and thought of while designing a more complicated web design. The main goal is to give an overview of how to build a navigation and use various other features that could save screen space while there is a large content and make a complicated site easier to use. According to the problem the following tasks were raised: study the basics of web design; to learn the methods used to construct a working site navigation system: to do research and collecting ideas from various well known websites that have complicated navigation; to create the content management system design; studying website optimization for screens; studying methods for web programming to create space-saving elements; analysis for existing web-design and making corrections when needed; testing design usability of development pages restricted from public access. I designed the given content management system in Adobe Photoshop CS5. Nowadays there is a great attention and emphasis put on web design and user interfaces. To be competitive in the modern world, the design has to be on the edge. The main goal is to show what are the predominant and primary trends of any kind of website so the students or designers can use this material in their studies or daily work to broaden knowledge and improve their skills. The thesis outcome is the material giving an overview of all the elements used in an old Valmiskauppa.fi content management system, analyzing it and showing how to create better webdesign. Keywords: Content Management System, User Interface, User-friendliness, Web design Where deposited Library of Haapsalu College of Tallinn University Author of diploma thesis: signature: Approved for dissertation: Academical advisor: Ville Tinnilä signature: Tallinn University Haapsalu College 3

TABLE OF CONTENTS INTRODUCTION 5 1. ANALYSIS OF THE OLD MANAGEMENT SYSTEM DESIGN 7 2.1 Valmiskauppa CMS analysis 7 2.1.1. Overall content build-up 7 2.1.2 Navigation 8 2.1.3 User-friendliness 8 2. SOLUTIONS FOR MAKING FINQU USER INTERFACE FRIENDLY 10 2.1 Navigation 10 2.2 Dynamic expand sections 13 2.3 Light-boxes 16 2.4 Logical and unified positions for commonly used elements 19 2.5 Easy to use table system 21 2.6 Calm and relaxed color scheme 23 2.6.1 Finqu color scheme 24 2.7 Following screen optimization standards for better usage 27 3. SETTINGS PAGE RE-MAKE FROM BEGINNING TO FINAL STAGE 29 3.1 The Problem 29 3.2 Solving the problem 31 THE CONCLUSION 36 REFERENCES 37 ATTACHMENT 1: Product page 39 ATTACHMENT 2: Promo page 40 ATTACHMENT 3: Development page 41 Tallinn University Haapsalu College 4

INTRODUCTION Online shopping is on its growing in our quickly developing internet based environment. More than 7 out of 10 internet users are online buyers and the gap between is slowly narrowing (Reese, 2011). Due to that more and more retailers utilise online stores to sell their products online. In 1995-1996 e-bay and Amazon were practically the only places on the internet you could buy products online, now almost every retailer has its own online store (wikipedia.org, 2012). In Finland by the year 2009 there is estimated to be over 3500 online stores (Laitinen, YLE, 2008). By now it is believed to be over 5000 but there is no source jet what has officially announced the exact number. This means that there is the same amount of online shop sellers and even more customers. The need for online stores has been rapidly growing, which means that more and more retailers decide to implement online stores. Starting an online shop can be very difficult because there are so many contracts to be made between the shipping services and payment services and which is timeconsuming. Luckily, there are companies which provide an e-commerce service to ease life for the retailers. One of such providers is Suomen Valmispalvelut Oy also known as Valmiskauppa.fi. For an affordable fee they provide payment and shipping as well as an online store website with unique content management system (also known as CMS). To make customers life even more easier Valmiskauppa has decided to develop the content management system to a higher level since the old design was out of date and hard to use. The new project is called Finqu. Luckily, I had the opportunity to join with the Valmiskauppa.fi team to help to design the content management system which I also picked as my final thesis. I chose this topic as my final thesis because designing a new content management system for Valmiskauppa has been a very long and large project and it is still in progress which ends in september. It is also very developing, interesting and challenging to me. Tallinn University Haapsalu College 5

In the first chapter of my thesis I will do an analysis on Valmiskauppa.fi system management design and try to find what is working and not in means of usability. In second chapter I offer my solutions and methods for creating a better environment of the new Finqu.com CMS design. I will present various examples from Finqu.com and also from the internet. In the third chapter I will give a brief overview of what to consider while re-designing CMS of a webpage as an example. Once the design is complete, I believe, that it will be very unique and fresh so it would become an example and inspiration for other designers who have a chance to design a content management system for an online-store. In other words my idea is to revolutionize the look and feel of the online store CMS. The user interface is supposed to be very easy to use and understand. Tallinn University Haapsalu College 6

1. ANALYSIS OF THE OLD MANAGEMENT SYSTEM DESIGN 2.1 Valmiskauppa CMS analysis Valmiskauppa content management system is a old fashioned, complicated and cumbersome. It is so because it was created quickly during the process of building the company. It has logic mistakes there and you have to pretty much learn everything by heart to find things. This is not how a good management system should be like. 2.1.1. Overall content build-up The current build-up is made hastily and is not well thought through. Let s take the Add product (on figure 1) page, where there is an unclear layout and all the information and text areas are scattered around the whole website. Other pages are similar to this page. Everything should be simple and self-evident. The content has poor usability and definitely need a refreshment. Figure 1. Screenshot from Valmiskauppa.fi product add page Tallinn University Haapsalu College 7

The old system consists mostly of tables. No matter where you go there are only tables. Even in the place where they should not be, when you go to edit your online shops css theme elements it is all in one large table which took few weeks to fully understand how it works. 2.1.2 Navigation The navigation is actually not that bad considering the fact that it was made in a rush. One cannot make a comparsion between Finqu.com and Valmiskauppa.fi because Finqu.com has so much more new features to navigate between. The current navigation has its mistakes but the main idea works well. It works like any other drop-down type navigation (see figure 2). Figure 2. Screenshot of Valmiskauppa navigation 2.1.3 User-friendliness Valmiskauppa CMS is not particularly user friendly, because there is not much logic used. Many pages differ from each other creating a discord in the whole content and it makes the page hard to look at. In many pages all the elements are put into a list-style system often without any logic which makes it very difficult to find something you want to edit (for example template editor which is one of the hardest pages to navigate on Valmiskauppa CMS). Also the most frequently occurring problem is that there is no other way but to press back button to go back. Settings page is one of them (see figure 3). Let s say I choose something that I want to edit or look at and then just return to the Settings page by clicking the back button, but instead of that I need to re-choose the settings page from the top navigation. In conclusion there is no work done on building up the user-friendly environment for the customers. Tallinn University Haapsalu College 8

Figure 3. Screenshot from Valmiskauppa.fi settings page Tallinn University Haapsalu College 9

2. SOLUTIONS FOR MAKING FINQU USER INTERFACE FRIENDLY To make everything nice and pretty it is very important to search around the internet and for good examples of each and every well known website there is on the web. Starting from www.amazon.com and store.apple.com ending with bbc.co.uk and volusion.com. It makes no difference which type of websites to look at because the main principles remain the same. While doing that you can get a clear picture of what the trends are at the moment and what elements make websites easy to use. However, it is not only the design elements to look at but also how the websites are composed - how the info is placed around the whole page. A sophisticated user interface as content management system is, placing (a.k.a. composing) is of utmost importance. And in the next topics I will explain first the element and how I used composing to place them right on the site. 2.1 Navigation Navigating a website is a very delicate and important element on every internet site. Therefore navigation is the foundation of everything because the whole webpage basis is its navigation (Krug, 2006). Every large website that has multiple pages must have a very thought through navigation to make the site self-evident and easy to move around environment. Without that system it is very hard or even impossible to find your way on a website. To build a working navigation it is good to go and take a look on another webpages which have big content and already has a working logic to find everything needed on the site. Good examples are www.amazon.com, www.google.com, www.youtube.com, www.wikipedia.org, www.apple.com and other well-known websites. These sites have been building their navigations for many years and have reached to the stage where it is very easy to find things from the content. Everything is so nicely organized and selfexplanatory - going through the web-page there is no need to think how to get somewhere. And making an user think less is the key of a good navigation. Amazon.com Tallinn University Haapsalu College 10

for example has a large content and because of that they have worked out very good navigation for such an amount of data on their page (see figure 4). Figure 4. Navigation preview from www.amazon.com Finqu has also a very extensive content, because of that I had to design a navigation that can manage the content. Navigation is built from hierarchies of content (for example Books: Comedy, Drama, Romance etc). Hierarchies are always divided from primary to sub-levels (Krug, 2006). In Finqu there is a four level hierarchy and it is quite difficult to design it to be very easy to use. 1. The primary level in Finqu consists of Home, World, Services and Credit Account. The only element that has also the second level is World. 2. The second level consists of Merchant, EasySearch, Trust, Newsletter Creator, Analytics and Reports. This hierarchy continues with Merchant which leads to a third level. Tallinn University Haapsalu College 11

3. Third level consists of Overall, Products, Orders, Clients, Marketing and Sales Channels. Each one of these items except Sales channels have the fourth level hierarchy. 4. Fourth level for example in Products are Search, Add Product, Add Product Group, Add Stock. The other elements have almost the same fourth level as Add Product so it is not necessary to look at all of these five. How to deal with this large hierarchy? My solution is to create three navigation bars on top of each other so the hierarchy moves downwards from the top. First level is put on the same level with the logo on a black ribbon. It stays active by being on a white colored background so the user knows which element is selected in the first level. First level also has user profile settings and overall search on the same level. Second level is on a different colored ribbon, at the moment it is blue. All the second level elements are shown there. While clicked, the active element has a different background as do other elements and a little arrow showing clearly that this is an active element and that it connects to the following level. Third level differs from the previous levels. First and second levels were constructed to be as compact as possible because of the third level which contains more than text. This level has tabs with icons and texts on it and it is divided into two: left part of it has 5 tabs with all the elements and the right part is all under Sales Channels, which is a different element and does not do the work of these other five tabs. Tabs while being active appear on different background with an arrow showing downwards so the user knows clearly that the selected tab relates to the content below. Now, the fourth level was very hard to create at first, because it could not look like the first two levels and since it is simply a text-based level it could not look like the third level either. My solution was to make a continuous button-like element where the active one is shown on a different hover and leads you to another page. Now, below there is an image of my designed navigation (see figure 5). Tallinn University Haapsalu College 12

Figure 5. Finqu navigation hierarchy design 2.2 Dynamic expand sections Dynamic expand sections also known as contract sections are very important while trying to save space on a website layout (Wikipedia, 2012). Expand sections are very commonly used element. They work like drop-down menus, but they consist of design elements and a larger content but also can work like custom designed drop-downs showing just a list of elements. Mostly they are used in navigation menus like Amazon.com example in a previous chapter. They are very efficient saving great amount of space and reducing noise on a website for visitors. It is not necessary to show everything you have on your website, but an obvious navigational logic should be evident. The other way to use expand sections is to divide many different content elements into sections and keep them hidden until the the user decides to use them. Expand sections in layout content work almost the same like it works on navigation menus. Now it is not in the navigation section of the layout that is hidden but in the certain areas of the content layout. A good example where this method is used is Volusion.com - an American ecommerce service provider in Austin, Texas. Volusion.com uses that method in various places such as add product page, option pages and so on (see figure 6). Volusion.com keeps the important permanently visible but less primary sections are made expandable and hidden initially. Tallinn University Haapsalu College 13

Figure 6. An example page on Volusion.com where expand sections are used The website with such a massive content as Finqu.com content management interface the expand sections are inevitable solution. That is why I used the same method as Volusion does but unlike Volusion.com in Finqu.com design I let the primary sections (for example Perustiedot - Basic information) to be expanded and at the same time it is not permanently kept open which means that users can also close it on their own will (see figure 7). The first element on top, it is set always to be the primary section. To make it obvious that these are expandable items, I added the arrow button to show the user which way the item opens and closes and that, it is clearly an expand section. When the click is made on a button the section slides down or up - showing and hiding the content. Finqu CMS also remembers which menu has been opened and closed by the user, so when the same user revisits the same page he can simply continue where he left off. Tallinn University Haapsalu College 14

Figure 7. Expand sections in Finqu content management system Tallinn University Haapsalu College 15

Settings/Options button includes minor input forms which are of secondary importance and it is unreasonable to show them on an entirely new page. The solution for this is also a light-box, but this time a larger one to contain more input forms and buttons. This Figure 9. Example of deletion lightbox light-box works just like a settings window, but on a web page (see figure 12). I designed two types of light-boxes: ones that include less information and ones that can contain more content. The larger light-box (figure 10) has a title area (blue) then a header in case of more than one option and buttons to apply or to cancel the procedure (figure 11). The smaller light-box (figure 10) is just for simple elements, for example few text inputs and buttons. Thanks to the effectiveness and because they are so easy to use I attached this type of light-boxes almost everywhere where there were buttons, I called, gray buttons. Figure 10. Smaller light-boxes that contain less inputs and information Tallinn University Haapsalu College 17

Figure 11. Large light-box that has all the elements for containing larger content Figure 12. A light-box that has a larger content than just one picture Tallinn University Haapsalu College 18

2.4 Logical and unified positions for commonly used elements The logic is a very important thing to follow while designing something as big as like content management system. Almost the same principles used as building a navigation for a website, but here we are dealing with the whole content of the site. The main idea is the same - placing elements into a logical and unified place throughout the page system that user knows that from these elements he can choose these well-known actions that go with the current part of the page where he is at. The best example for this is probably the pager. In sites where there are maybe thousands of search results (Google, YouTube, Amazon, Yahoo etc) there is always a pager down in the list where you can go to another page (YouTube example on figure 13). Figure 13. Pager example on youtube.com In Finqu design I had to use this logic quite often, I will bring only one example of used logic. Let us imagine that a user wants to get a report of something, print out some page or change quickly the settings of the content. For that I created an Actions bar which is in every page in the same place just like the pager is in the end of the list (see the picture below). The Action bar is attached always to the content below (see figure 14). This means, if there is two Action bars on the same page then the one on the top is always the major one. Tallinn University Haapsalu College 19

Figure 14. Logic used for the action bar in Finqu CMS There are also some other logically placed elements in the following list such as: 1) Pager - always at the bottom of a list or a table which has multiple pages 2) Arrow buttons in expand sections - always on the right side of an expand section 3) Specified search bar - always placed top right below the navigation 4) Actions bar - always in the right top corner of the content it is attached to 5) Breadcrumbs - always on the bottom right of the content 6) Buttons that act the same after clicking them - some open lightboxes, some small lightboxes etc 7) Sales channels shown as colored buttons all around Finqu CMS - colors are picked by the user Tallinn University Haapsalu College 20

2.5 Easy to use table system Tables are simple to understand, but there is more behind creating tables than it looks from the outside. Tables are used in many ways on the internet, for example pretty common is price and characteristic comparison between different sites or services. The ones used in online store management systems are usually for a product list by showing all the stats for each and every product in the table such as price, tax percentage, stock amount, manufacturer and so on. Sometimes these tables can contain much information and at the same time they have to be as compact and clear as possible. This means that every pixel counts. In my work I had to many tables, because there are many things that are meant to be shown to the user with all the features attached to them, so the user could edit, delete or just have a look at them. Since I had to use a certain logic in all the pages I had to think of creating a table that would suit for small and large amount of information. Also it had to be able to include buttons, sliders, drop-downs and other web elements. Unlike the Valmiskauppa table system which was a great mess and hard to use I designed very simple table type which is easy to understand and pleasant to the eye (see figure 15). Figure 15. The solution for table system that uses buttons and sliders Tallinn University Haapsalu College 21

That is the smaller type table which does not contain that much information. The product page, on the other hand, contains much more features, than the previous example. It had to contain multiple levels, because there are product groups, sub groups (mainly manufacturers), products etc (see figure 16). Figure 16. Product page table design containing multiple elements Tallinn University Haapsalu College 22

2.6 Calm and relaxed color scheme Colors are very important part of web design. Choosing the right color might not be as easy as it looks like. The hardest part is picking the base colors for the whole website. It is important to think first what kind site are we dealing with - is it a business site, is it a site for younger people or trendy people or is it an entertainment site. So it depends what kind of an attraction this website needs. Also it is very important not to overwhelm the site with colors. They have to look nice and calm to the eye depending how bright or dark the colors are. The common sense is that the use of different colors should not exceed three. The more colors there are the harder it is to avoid the disharmony. Different shades of colors in many cases do not count as different colors (in case of gradients where there are two different colors used), but if the contrast is too big they start taking an effect (for example light gray and deep black). Figure 17. An example of a calm color scheme in Finqu CMS While building a site we also need to create some contrast if we want to put an emphasis on something, hyperlinks for example. It is good to use higher contrast between a background and normal text as well as normal text an links. When normal text is not in contrast with the background it is very hard to read and if links are not decorated and do not stand out with the normal text users might not know what is clickable (Color Theory: Contrast & Readability, 2006). Here is an example of right and wrong color choises (see figure 18). Tallinn University Haapsalu College 23

Figure 18. An example of text uses on a colored background 2.6.1 Finqu color scheme Finqu CMS is a site aimed for business-men or merchants and that is why I chose the base color to be grey. Grey is the color of authority, practicality, respect and stability. It is neutral and calm (Peterson, 2009). Most websites still use white backgrounds but light gray in my opinion is calmer to the eyes. I used light gray as the content background and added a bit noise to add even smoother look to it. This kind of background style is noticeable on some known websites such as youtube.com and smashingmagazine.com and the popularity of using light grey grain texture as background is a growing trend. Buttons and other button like elements are also painted to grey so they would blend in with the smooth grey scheme (see figure 19). Tallinn University Haapsalu College 24

Figure 19. The gray base color makes the CMS very calm to the eye Text color I used is not completely black but dark grey because it removes the rough contrast between lighter background and dark texts. It still creates a contrast, but it is better for the eye to read. The other two colors I chose were blue and black: 1) Blue is the color of authority, loyalty, success, security and trustworthiness. The shades I selected are Sapphire and Yale blue. That blue is used on navigations, second level, search buttons and important confirmation buttons and as headers for light-boxes (Peterson, 2009) (see figure 20). Tallinn University Haapsalu College 25

Figure 20. An example of use of blue color as a button and light-box header in Finqu.com 2) Black is the color of authority, classic, seriousness, tradition and formality. Black is used as hovers for normal buttons, as the first level navigation background and all the drop-down backgrounds are also black (Peterson, 2009) (see figure 21). Figure 21. Use of black in Finqu CMS As noticed above all the colors I have chosen for Finqu CMS contain the keyword authority. This matches to also websites user group which is business men or merchants. Tallinn University Haapsalu College 26

2.7 Following screen optimization standards for better usage There are many different sized monitors in use all over the world and while making a webpage it is necessary to optimize the design for all kind of monitors. So let us say I design a website 2000 pixels wide and it is non-scaleable. A user with 27 imac for instance with screen resolution 2560 x 1440 pixels can see it easily. We have to realise are there many people who actually use monitors with such large screen resolution? It is higher than a full high definition (or Full HD) resolution which is 1920 x 1080. In addition, we have to consider there are users who use small monitors for instance people who have older monitors or laptop screens. Nowadays it is very rare case when a user has a monitor with lower than 1024 x 768 pixels. 13% of internet users still have that resolution (w3schools.com, 2012). Despite to the fact this resolution is still taken as the most dominant and average screen resolution today (gantry-framework.org, 2012). But we still cannot design a website being exactly 1024 pixels in width and 768 pixels in length - there is another limit. The limit is the browser. Safari on Mac OS 10.6 for example has its minimum default set to 995 px (see figure 22). Figure 22. Safari window on Mac Os X Luckily, this browser has no borders but there is still the scrollbar which appears when the page is longer than it can fit to the browser window. Scrollbar takes 15 pixels from right so the page size is down to 980 pixels. Some browsers on older engines have Tallinn University Haapsalu College 27

borders and they can take space up to 15-30 pixels depending how thick the borders are and how wide is the scrollbar depending on the operating system. Additionally, portion of heiht is occupied by an address bar and bookmark list and the header, and with buttons. Safari takes 72 pixels away from the height as a default setting. If you add a status bar then it also takes 15 pixels away from the bottom. But the height of a website is not that important, width plays a bigger role because it is annoying to scroll from left to right. A conclusion can be drawn from this analysis that the optimal website width is about 950-960 pixels. This is what I used in Finqu design as an optimized fixed-width of 950 pixels. Tallinn University Haapsalu College 28

3. SETTINGS PAGE RE-MAKE FROM BEGINNING TO FINAL STAGE Since there are so many different pages in Finqu CMS, I decided to choose the settings page as an example, because it is the most complicated one. I am excluding the navigation from this chapter since it has been analyzed already in one of the previous chapters. The graphical elements I use have previously been created long before and I do not talk about creating all the elements. 3.1 The Problem Settings page is very important feature as these pages have to be very clear and easy to understand for any kind of user. If settings page is not designed well it makes it very hard to change anything. The old Valmiskauppa.fi settings page looked like this (see figure 23): Figure 23. Valmiskauppa.fi settings page The problem with this old settings page is that you don t see any of these settings before you have clicked the button. The users cannot probably remember where any of the Tallinn University Haapsalu College 29

settings were when they want to find something specific and as we know about online shop management, it gets specific quite often. As my time working in Valmiskauppa I heard about a great amount of were calls made and e-mails sent to the customer support asking questions about the settings page. This shows how complicated this page is. Another problem with this is when the button is clicked it shows you tables after tables. In some cases it is good to collect information into tables because tables can show a lot. There also a noticeable problem with the same pages changing their look. A good example is the Shipping methods page where at first you see a narrow table in the left of the screen and the right area has grown very wide (see figure 24). When you click on the Edit button the appearance of the page changes a lot (see figure 25). Figure 24. Page before clicking the Edit button Tallinn University Haapsalu College 30

Figure 25. Page after clicking Edit 3.2 Solving the problem To solve problems on a web page, it is very important to get a whole view of all the elements in the old settings page such as the previous example. I had to try and look how everything works and does not work, what things are connected and what the page consists of, what buttons there are, what type of inputs there are etc. Also what I had to consider was to fit all this info into new design and make it look similar to the other pages in Finqu CMS. It was rather challenging. Firstly I did a page investigation after which I collected all the data on the page into another form. I drew the elements (drop-downs, radio buttons etc.) and the text on the paper. So as the data was collected, I started to think how to organize all the data I have collected. I had to look through all the data and still surf around the old page and think through all the elements for any similarities or logic I could make between different parts of the pages. What I found out first was why there were so much tables in use. The reason was there are many elements with multiple parameters such as amount, dates, status and so on and a good way to collect them into one place is by putting them into the tables. The table Tallinn University Haapsalu College 31

style I used is the same type of table that was described in couple of chapters before. It makes the information to be read more easily. To simplify the whole layout of the page I put each and every settings category into an expand section so the page would not be too long. The expand section can be noticed in the previous picture. My design file was over 15,000 pixels high and that shows how large this page was and due to that it was the only way to collect all the categories. Since there are tables it is obvious that there is some place the elements can be added to the table. For that I created the hidden expand section. As you can see on the previous picture above there is a button called Lisää kieli which means Add a language. All the user can see at first is the table and when a click is made on that an expand section opens below it. I got this idea from youtube.com. When logged in to YouTube there is a button with loggers user name in the top left corner of the page right next to the search bar. If the button is clicked an area opens with a preview of users latest likes, playlists and favorites and also links for getting further into the account. It is a pretty brilliant example of saving space on screen until an action is required by the user (see figure 26 and 27) and yet it is not a drop-down, it can contain lots of information. Figure 26. YouTube when user has logged in and yet not pressed the button with user name on it (youtube.com) Tallinn University Haapsalu College 32

Figure 27. An expand section appears after clicking the user button (youtube.com) In Finqu settings page there are many different elements containing various information so this kind of an expand section is probably the best option to choose in this case. The information for adding elements varied from simple text inputs to color pickers. In language and currency sections for example I used thumbnail type tabs to give the user a little different visual look. At other sections users I created a visual color picker which eases picking colors when needed. It is quite necessary to give each section some kind of unique characteristics so the user can easily recognize the one he or she is looking for while scrolling through the settings page (see figure 28). Tallinn University Haapsalu College 33

Figure 28. Screenshot from adding a new stock on Finqu CMS And lastly the way to organize everything and make things easier to find and navigate. This was a major problem in Valmiskauppa settings page where it was hard to memorize where certain things were. To fix that problem I added icons for each top expandable section so when sections are closed a person can easily find their way by recognizing desired section. Each icon illustrates the current setting. For example Payment methods have the icon of the wallet symbolizing payment and money. Shipping methods have a icon of a lorry which symbolizes transportation and shipping. The other thing I designed for better navigation is the quick menu to make things even more easier. Since the page is very long even if the expand sections are closed it is still long to scroll. The button for quick menu found its place in the top right corner of the settings page header right below the main navigation. This includes all the categories of the settings with all the icons. It is very thoughtful since some users like to scroll and the others like quick menus (see figure 29). Tallinn University Haapsalu College 34

Figure 29. The quick menu that helps to get to the wished category fast and easily Tallinn University Haapsalu College 35

THE CONCLUSION The design re-make for the old Valmiskauppa.fi CMS to Finqu CMS was a success. During the process I learned many new things. Some examples what I have learned are how to follow the basic design rules and principles, how navigation actually work and how they can be designed and a lot about designing an user-friendly environment to make user interface very obvious and simple to use. How to use different possibilities of technical elements such as light-boxes are etc. Since the design project is still under development, the practical part of this thesis can be found only on development pages which do not have a public access until September 2012 at www.finqu.com when Finqu will be published officially. Despite that fact I find that the target of the thesis was fulfilled since the fundamental parts of the interface design are ready. This material can be very useful for designers or (design-) students who are interested in or have a possibility to design websites. It gives various tips and explanations of the fundamentals of every design. This material does not only apply to sophisticated web design but it can be used while in need for a design of any kind of websites because many principles remain the same such as navigation and colors. This thesis also gives a brief overview of how to analyze re-designing of websites. My work might be less useful when the reader has no previous connections or experience as a designer. It requires the user to manage Adobe Photoshop and also have advanced knowledge about web design. On the other hand it can still provide the theoretical knowledge for those who are not so advanced managing a design software. I believe that the objective of this study has been completed and successful. Tallinn University Haapsalu College 36

REFERENCES Krug, S. (2006) Don t Make Me Think! A Common Sense Approach to Web Usability, Second Edition. Berkley: New Riders. Freidman, V. (2008, 31st of January) 10 Principles of Effective Web Design [2012, 23rd of April] http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-webdesign/ Gantry - 960 Grid System [2012, 29th of April] http://www.gantry-framework.org/documentation/joomla/advanced/960-grid-system Laitinen, J. (2009, 12th of October). Kuluttaja ohjeistetaan suosimaan suuria nettikauppoja [2012, 23rd of April]. http://yle.fi/uutiset/kuluttajia_ohjeistetaan_suosimaan_suuria_nettikauppoja/1065847 Limi, A. (2010, 21st of January) Collapse and expand sections with javascript [2012, 23rd of April]. http://plone.org/products/plone/roadmap/46/ Martin, S. - Effective Visual Communication for Graphical User Interfaces [2012, 23rd of April] http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html Perron, C. and Hooker, J. - Color Choises on Web Pages: Contrast vs Readability [2012, 23rd of April] http://www.writer2001.com/colwebcontrast.htm Tallinn University Haapsalu College 37

Peterson, E. (2006, 1st of June) Color Psychology in Logo Design [2012, 23rd of April] http://www.logocritiques.com/resources/color_psychology_in_logo_design/ Reese, S. (2011, 26th of July) Quick Stat: 72.6% of Internet Users Will Buy Online in 2011 [2012, 23rd of April]. http://www.emarketer.com/blog/index.php/quick-stat-726-internet-users-shoponline-2011/ W3Schools - Browser Display Statistics [2012, 29th of April] http://www.w3schools.com/browsers/browsers_display.asp Wikipedia - Lightbox (JavaScript) [2012, 23rd of April] http://en.wikipedia.org/wiki/lightbox_(javascript) Tallinn University Haapsalu College 38

ATTACHMENT 1: Product page This screenshot shows the whole page of Finqu.com product search page including the navigation, search bar and a table. Tallinn University Haapsalu College 39

ATTACHMENT 2: Promo page This is a screenshot from Finqu promo section. Tallinn University Haapsalu College 40

ATTACHMENT 3: Development page This is the screenshot from current development page. Address on address bar is secured due to confidentiality. Tallinn University Haapsalu College 41