INNOVATIVE USER INTERFACE DESIGN SOLUTION FOR ONLINE STORE CONTENT MANAGEMENT SYSTEM

Size: px
Start display at page:

Download "INNOVATIVE USER INTERFACE DESIGN SOLUTION FOR ONLINE STORE CONTENT MANAGEMENT SYSTEM"

Transcription

1 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

2 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

3 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

4 TABLE OF CONTENTS INTRODUCTION 5 1. ANALYSIS OF THE OLD MANAGEMENT SYSTEM DESIGN Valmiskauppa CMS analysis Overall content build-up Navigation User-friendliness 8 2. SOLUTIONS FOR MAKING FINQU USER INTERFACE FRIENDLY Navigation Dynamic expand sections Light-boxes Logical and unified positions for commonly used elements Easy to use table system Calm and relaxed color scheme Finqu color scheme Following screen optimization standards for better usage SETTINGS PAGE RE-MAKE FROM BEGINNING TO FINAL STAGE The Problem 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

5 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 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

6 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

7 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 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

8 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 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 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

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

10 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 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 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

11 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 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

12 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

13 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

14 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

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

16 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

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

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

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

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

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

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

23 Figure 18. An example of text uses on a colored background 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

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

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

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 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

27 borders and they can take space up to 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 pixels. This is what I used in Finqu design as an optimized fixed-width of 950 pixels. Tallinn University Haapsalu College 28

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

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 s 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

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

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

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

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

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

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 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

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] Gantry Grid System [2012, 29th of April] Laitinen, J. (2009, 12th of October). Kuluttaja ohjeistetaan suosimaan suuria nettikauppoja [2012, 23rd of April]. Limi, A. (2010, 21st of January) Collapse and expand sections with javascript [2012, 23rd of April]. Martin, S. - Effective Visual Communication for Graphical User Interfaces [2012, 23rd of April] Perron, C. and Hooker, J. - Color Choises on Web Pages: Contrast vs Readability [2012, 23rd of April] Tallinn University Haapsalu College 37

37 Peterson, E. (2006, 1st of June) Color Psychology in Logo Design [2012, 23rd of April] Reese, S. (2011, 26th of July) Quick Stat: 72.6% of Internet Users Will Buy Online in 2011 [2012, 23rd of April]. W3Schools - Browser Display Statistics [2012, 29th of April] Wikipedia - Lightbox (JavaScript) [2012, 23rd of April] Tallinn University Haapsalu College 38

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

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

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

+ Create, and maintain your site

+ Create, and maintain your site T4 Basics Version 1.0 + Create, and maintain your site With T4, you are in control of the content of your website. Feel free to be creative, and keep your site up to date. Few of T4 Features Media Library

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades. 28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML

More information

INTRODUCTION TO THE WEB

INTRODUCTION TO THE WEB INTRODUCTION TO THE WEB A beginner s guide to understanding and using the web 3 September 2013 Version 1.2 Contents Contents 2 Introduction 3 Skill Level 3 Terminology 3 Video Tutorials 3 How Does the

More information

Best Practice in Web Design

Best Practice in Web Design Best Practice in Web Design Irrespective of whether you are intending to use a flat 'brochureware' website or an interactive e- commerce site, the overall look and feel of your website will play an important

More information

WebFOCUS BI Portal: S.I.M.P.L.E. as can be

WebFOCUS BI Portal: S.I.M.P.L.E. as can be WebFOCUS BI Portal: S.I.M.P.L.E. as can be Author: Matthew Lerner Company: Information Builders Presentation Abstract: This hands-on session will introduce attendees to the new WebFOCUS BI Portal. We will

More information

Creating and Using Links and Bookmarks in PDF Documents

Creating and Using Links and Bookmarks in PDF Documents Creating and Using Links and Bookmarks in PDF Documents After making a document into a PDF, there may be times when you will need to make links or bookmarks within that PDF to aid navigation through the

More information

To Begin Customize Office

To Begin Customize Office To Begin Customize Office Each of us needs to set up a work environment that is comfortable and meets our individual needs. As you work with Office 2007, you may choose to modify the options that are available.

More information

Website Builder Manual

Website Builder Manual Fasthosts Customer Support Website Builder Manual This is a designed as a definitive guide to all the features and tools available within Website Builder. Contents Introduction... 4 Adding Content... 5

More information

Creating an Email with Constant Contact. A step-by-step guide

Creating an Email with Constant Contact. A step-by-step guide Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here

More information

Chronicle USER MANUAL

Chronicle USER MANUAL Chronicle USER MANUAL 1st Edition 2 IN THIS MANUAL Part One The Chronicle Interface The Overview Screen The Bill Detail Screen Part Two Creating, Editing and Viewing Bills Creating Your First Bill Editing

More information

Triggers & Actions 10

Triggers & Actions 10 Triggers & Actions 10 CHAPTER Introduction Triggers and actions are the building blocks that you can use to create interactivity and custom features. Once you understand how these building blocks work,

More information

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Sage Accountants Business Cloud EasyEditor Quick Start Guide Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing

More information

Creating an Email with Constant Contact. A step-by-step guide

Creating an Email with Constant Contact. A step-by-step guide Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

Setting Up Your Online ecommerce Shopping Cart

Setting Up Your Online ecommerce Shopping Cart Setting Up Your Online ecommerce Shopping Cart Setting Up Your Online ecommerce Shopping Cart Contents o Building Your ecommerce Shopping Cart o Creating Products o Configuring Shipping & Verifying Taxes

More information

Your Blueprint websites Content Management System (CMS).

Your Blueprint websites Content Management System (CMS). Your Blueprint websites Content Management System (CMS). Your Blueprint website comes with its own content management system (CMS) so that you can make your site your own. It is simple to use and allows

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

More information

INSTANT MAGAZINE QUICK GUIDE

INSTANT MAGAZINE QUICK GUIDE INSTANT MAGAZINE QUICK GUIDE Create an online magazine in a jiffy It s great that you ll be working with our tool! We hope you ll enjoy the creative process. Take a moment to read this quick guide and

More information

CMS Training Manual. A brief overview of your website s content management system (CMS) with screenshots. CMS Manual

CMS Training Manual. A brief overview of your website s content management system (CMS) with screenshots. CMS Manual Training A brief overview of your website s content management system () with screenshots. 1 Contents Logging In:...3 Dashboard:...4 Page List / Search Filter:...5 Common Icons:...6 Adding a New Page:...7

More information

Working with the Ektron Content Management System

Working with the Ektron Content Management System Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e

More information

Introducing our new Editor: Email Creator

Introducing our new Editor: Email Creator Introducing our new Editor: Email Creator To view a section click on any header below: Creating a Newsletter... 3 Create From Templates... 4 Use Current Templates... 6 Import from File... 7 Import via

More information

Profitable vs. Profit-Draining Local Business Websites

Profitable vs. Profit-Draining Local Business Websites By: Peter Slegg (01206) 433886 07919 921263 www.besmartmedia.com peter@besmartmedia.com Phone: 01206 433886 www.besmartmedia.com Page 1 What is the Difference Between a Profitable and a Profit-Draining

More information

Netigate User Guide. Setup... 2. Introduction... 5. Questions... 6. Text box... 7. Text area... 9. Radio buttons...10. Radio buttons Weighted...

Netigate User Guide. Setup... 2. Introduction... 5. Questions... 6. Text box... 7. Text area... 9. Radio buttons...10. Radio buttons Weighted... Netigate User Guide Setup... 2 Introduction... 5 Questions... 6 Text box... 7 Text area... 9 Radio buttons...10 Radio buttons Weighted...12 Check box...13 Drop-down...15 Matrix...17 Matrix Weighted...18

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

Guide To Creating Academic Posters Using Microsoft PowerPoint 2010

Guide To Creating Academic Posters Using Microsoft PowerPoint 2010 Guide To Creating Academic Posters Using Microsoft PowerPoint 2010 INFORMATION SERVICES Version 3.0 July 2011 Table of Contents Section 1 - Introduction... 1 Section 2 - Initial Preparation... 2 2.1 Overall

More information

Fortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis

Fortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis Fortis Theme v1.0.0 Magento theme by Infortis User Guide Copyright 2012 Infortis 1 Table of Contents 1. Introduction...3 2. Installation...4 3. Basic Configuration...5 3.1 Enable Fortis Theme...5 3.2 Enable

More information

Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.

Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com. Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.au Index Advanced Features... 3 1 Integrating Third Party Content...

More information

Getting ahead online. your guide to. GOL412_GBBO brochure_aw5.indd 1 10/2/10 10:10:01

Getting ahead online. your guide to. GOL412_GBBO brochure_aw5.indd 1 10/2/10 10:10:01 1 Getting ahead online your guide to GOL412_GBBO brochure_aw5.indd 1 10/2/10 10:10:01 2 Welcome to Getting British Business Online Whether you re totally new to the Internet or already have a website,

More information

Appendix 1 Install RightNow on your PC

Appendix 1 Install RightNow on your PC Appendix 1 Install RightNow on your PC Please do not install the live site unless you have been instructed to do so. 1 Open Internet Explorer and navigate to; http://student.ask.adelaide.edu.au/cgi-bin/adelaide.cfg/php/admin/launch.php

More information

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0 University of Sheffield PART 1 1.1 Getting Started 1. Log on to the computer with your usual username

More information

Shopping Cart Manual. Written by Shawn Xavier Mendoza

Shopping Cart Manual. Written by Shawn Xavier Mendoza Shopping Cart Manual Written by Shawn Xavier Mendoza Table of Contents 1 Disclaimer This manual assumes that you are using Wix.com for website creation, and so this method may not work for all other online

More information

GETTING STARTED WITH COVALENT BROWSER

GETTING STARTED WITH COVALENT BROWSER GETTING STARTED WITH COVALENT BROWSER Contents Getting Started with Covalent Browser... 1 What is the Browser Version?... 4 Logging in... 5 The URL address... 5 Home page... 5 Menu bar... 5 Go To button...

More information

Contents. SiteBuilder User Manual

Contents. SiteBuilder User Manual Contents Chapter 1... 3 Getting Started with SiteBuilder... 3 What is SiteBuilder?... 3 How should I use this manual?... 3 How can I get help if I m stuck?... 3 Chapter 2... 5 Creating Your Website...

More information

Edline Manual Design Guide Version: September 2011

Edline Manual Design Guide Version: September 2011 Edline Manual Design Guide Version: September 2011 Copyright Statements: Edline software is a trademark of Edline. Copyright 2011. Microsoft Windows names and logos are registered trademarks of the Microsoft

More information

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5

More information

Edline Manual Design Guide Version: November 2011

Edline Manual Design Guide Version: November 2011 a Blackboard company Edline Manual Design Guide Version: November 2011 Copyright Statements: Edline software is a trademark of Edline, a Blackboard company. Copyright 2011-2012. Microsoft Windows names

More information

user guide This user guide can be used as a whole manual, or sections, depending on the user s access permissions to AgendaOnline.

user guide This user guide can be used as a whole manual, or sections, depending on the user s access permissions to AgendaOnline. user guide This user guide can be used as a whole manual, or sections, depending on the user s access permissions to AgendaOnline. home page...3 General Features... 3 Other Features... 4 navigating agendas...5

More information

Student Manager s Guide to the Talent Management System

Student Manager s Guide to the Talent Management System Department of Human Resources 50 Student Manager s Guide to the Talent Management System 1 Table of Contents Topic Page SYSTEM INTRODUCTION... 3 GETTING STARTED... 4 NAVIGATION WITHIN THE TALENT MANAGEMENT

More information

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote SiteBuilder (Adding/Editing Content) Enable web pages on your website Add and format text and images Upload images Create Image Links Create Sub Levels Create Hyperlinks Upload Data files (ppt,xls,word

More information

Creating a Restaurant Website

Creating a Restaurant Website 11 Creating a Restaurant Website In This Lesson This lesson looks at the process of creating a small business website, in this case for a restaurant. Starting from a needs analysis, this lesson shows you

More information

SAS BI Dashboard 3.1. User s Guide

SAS BI Dashboard 3.1. User s Guide SAS BI Dashboard 3.1 User s Guide The correct bibliographic citation for this manual is as follows: SAS Institute Inc. 2007. SAS BI Dashboard 3.1: User s Guide. Cary, NC: SAS Institute Inc. SAS BI Dashboard

More information

PowerPoint 2007: Basics Learning Guide

PowerPoint 2007: Basics Learning Guide PowerPoint 2007: Basics Learning Guide What s a PowerPoint Slide? PowerPoint presentations are composed of slides, just like conventional presentations. Like a 35mm film-based slide, each PowerPoint slide

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

How to Edit Your Website

How to Edit Your Website How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing

More information

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe

More information

Module One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface...

Module One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface... 2 CONTENTS Module One: Getting Started... 6 Opening Outlook... 6 Setting Up Outlook for the First Time... 7 Understanding the Interface...12 Using Backstage View...14 Viewing Your Inbox...15 Closing Outlook...17

More information

SmallBiz Dynamic Theme User Guide

SmallBiz Dynamic Theme User Guide SmallBiz Dynamic Theme User Guide Table of Contents Introduction... 3 Create Your Website in Just 5 Minutes... 3 Before Your Installation Begins... 4 Installing the Small Biz Theme... 4 Customizing the

More information

Frog VLE Update. Latest Features and Enhancements. September 2014

Frog VLE Update. Latest Features and Enhancements. September 2014 1 Frog VLE Update Latest Features and Enhancements September 2014 2 Frog VLE Update: September 2014 Contents New Features Overview... 1 Enhancements Overview... 2 New Features... 3 Site Backgrounds...

More information

Create a Google Site in DonsApp

Create a Google Site in DonsApp Create a Google Site in DonsApp 1 Google Web Site Interactive. Constructivist. Collaborative. Communities. WHAT IS GOOGLE SITE? With one single click, you can create a website without any knowledge of

More information

Mail Chimp Basics. Glossary

Mail Chimp Basics. Glossary Mail Chimp Basics Mail Chimp is a web-based application that allows you to create newsletters and send them to others via email. While there are higher-level versions of Mail Chimp, the basic application

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Introduction Thank you so much for your purchase! We're excited to present you with the most magical popup solution for WordPress! If you have any questions, please email us at

More information

NDSU Technology Learning & Media Center

NDSU Technology Learning & Media Center 1 NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Creating a Large Format Poster (Plot) Using PowerPoint 2013 Posters should be designed and created in a manner that best

More information

Blackboard 1: Course Sites

Blackboard 1: Course Sites Blackboard 1: Course Sites This handout outlines the material covered in the first of four workshops on teaching with Blackboard. It will help you begin building your Blackboard course site. You will learn

More information

Facebook Page Management for Beginners Training Manual

Facebook Page Management for Beginners Training Manual Facebook Page Management for Beginners Training Manual Contents 1.0 Executive Summary... 4 2.0 Introduction to Facebook... 4 2.1 Facebook Statistics... 4 2.2. Facebook Pages... 5 2.3 Facebook Demographics...

More information

TABLE OF CONTENTS SURUDESIGNER YEARBOOK TUTORIAL. IMPORTANT: How to search this Tutorial for the exact topic you need.

TABLE OF CONTENTS SURUDESIGNER YEARBOOK TUTORIAL. IMPORTANT: How to search this Tutorial for the exact topic you need. SURUDESIGNER YEARBOOK TUTORIAL TABLE OF CONTENTS INTRODUCTION Download, Layout, Getting Started... p. 1-5 COVER/FRONT PAGE Text, Text Editing, Adding Images, Background... p. 6-11 CLASS PAGE Layout, Photo

More information

PE Content and Methods Create a Website Portfolio using MS Word

PE Content and Methods Create a Website Portfolio using MS Word PE Content and Methods Create a Website Portfolio using MS Word Contents Here s what you will be creating:... 2 Before you start, do this first:... 2 Creating a Home Page... 3 Adding a Background Color

More information

OSCAR-Phoenix Interface Training Guide Procurement Services Phoenix User Interface Training Guide

OSCAR-Phoenix Interface Training Guide Procurement Services Phoenix User Interface Training Guide Phoenix User Interface Training Guide Updated11/2/2013 1 Beginning soon Procurement will enable a new interface within OSCAR call the Phoenix interface. This new interface will replace the original interface

More information

One of the fundamental kinds of Web sites that SharePoint 2010 allows

One of the fundamental kinds of Web sites that SharePoint 2010 allows Chapter 1 Getting to Know Your Team Site In This Chapter Requesting a new team site and opening it in the browser Participating in a team site Changing your team site s home page One of the fundamental

More information

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13

WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...

More information

OnPoint 7.0 Tools and Functionality

OnPoint 7.0 Tools and Functionality P a g e 1 OnPoint 7.0 Tools and Functionality The new version of the OnPoint website has the same functionality as the old site, but the look and feel of the page has changed. This document will compare

More information

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...

More information

A quick guide to... Creating Custom Web Forms

A quick guide to... Creating Custom Web Forms A quick guide to... Creating Custom Web Forms In this guide... Learn how to create well-designed web forms in seconds. Pick your favorite template then color and shape every aspect of your form until you

More information

PORTAL ADMINISTRATION

PORTAL ADMINISTRATION 1 Portal Administration User s Guide PORTAL ADMINISTRATION GUIDE Page 1 2 Portal Administration User s Guide Table of Contents Introduction...5 Core Portal Framework Concepts...5 Key Items...5 Layouts...5

More information

Value Line Investment Survey Online

Value Line Investment Survey Online Value Line Investment Survey Online User s Guide Welcome to Value Line Investment Survey Online. This user guide will show you everything you need to know to access and utilize the wealth of information

More information

Drupal 7 Fields/CCK Beginner's Guide

Drupal 7 Fields/CCK Beginner's Guide P U B L I S H I N G community experience distilled Drupal 7 Fields/CCK Beginner's Guide Dave Poon Chapter No. 5 "File and Image Fields" In this package, you will find: A Biography of the author of the

More information

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1 UH CMS Basics Cascade CMS Basics Class UH CMS Basics Updated: June,2011! Page 1 Introduction I. What is a CMS?! A CMS or Content Management System is a web based piece of software used to create web content,

More information

Content Author's Reference and Cookbook

Content Author's Reference and Cookbook Sitecore CMS 6.2 Content Author's Reference and Cookbook Rev. 091019 Sitecore CMS 6.2 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents

More information

CMS Basic Training. Getting Started

CMS Basic Training. Getting Started The (Content Management System), was designed to allow most people in an organization to contribute to or edit their website(s). Utilizing a set of templates and stylesheets, users can add or edit information

More information

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux

More information

After you complete the survey, compare what you saw on the survey to the actual questions listed below:

After you complete the survey, compare what you saw on the survey to the actual questions listed below: Creating a Basic Survey Using Qualtrics Clayton State University has purchased a campus license to Qualtrics. Both faculty and students can use Qualtrics to create surveys that contain many different types

More information

PASTPERFECT-ONLINE DESIGN GUIDE

PASTPERFECT-ONLINE DESIGN GUIDE PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have

More information

www.quicklessons.com User Guide January 10

www.quicklessons.com User Guide January 10 The e-learning platform for creating online courses fast and easy www.quicklessons.com User Guide January 10 1111 Brickell Avenue 11th floor - Miami, Florida 33131 - United States - Phone +1 305 847 2159

More information

Create your own teacher or class website using Google Sites

Create your own teacher or class website using Google Sites Create your own teacher or class website using Google Sites To create a site in Google Sites, you must first login to your school Google Apps account. 1. In the top-right corner of any apps, you can click

More information

Training Schedule: Third Wednesday of every month from 1:30 PM to 3:00 PM in the ARKU Team Meeting Room ARKU A354

Training Schedule: Third Wednesday of every month from 1:30 PM to 3:00 PM in the ARKU Team Meeting Room ARKU A354 OU Campus 101 Training Schedule: Third Wednesday of every month from 1:30 PM to 3:00 PM in the ARKU Team Meeting Room ARKU A354 Class Description: This introductory course is designed specifically to train

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical

More information

17 of the Internet s Best Banner Ads. Love em or Hate em They Do Work!

17 of the Internet s Best Banner Ads. Love em or Hate em They Do Work! Love em or Hate em They Do Work! Banner Ads What are they? Ever since the Internet started to take off in the mid 90 s, banner ads have been an acceptable way of advertising on the Web. Banner ads come

More information

Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business

Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business 2015 Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take you through all the areas that you are likely to use in order to maintain, update

More information

Content Management System User Guide

Content Management System User Guide CWD Clark Web Development Ltd Content Management System User Guide Version 1.0 1 Introduction... 3 What is a content management system?... 3 Browser requirements... 3 Logging in... 3 Page module... 6 List

More information

Applicant Tracking System Job Aids. Prepared by:

Applicant Tracking System Job Aids. Prepared by: Applicant Tracking System Job Aids Prepared by: Contents System Navigation and My Setup Information for Users... 1 Creating Requisitions... 4 Duplicating Requisitions... 6 Requesting an Approval... 7 Viewing

More information

Single Property Website Quickstart Guide

Single Property Website Quickstart Guide Single Property Website Quickstart Guide Win More Listings. Attract More Buyers. Sell More Homes. TABLE OF CONTENTS Getting Started... 3 First Time Registration...3 Existing Account...6 Administration

More information

Microsoft Publisher 2010: Web Site Publication

Microsoft Publisher 2010: Web Site Publication Microsoft Publisher 2010: Web Site Publication Application Note Team 6 Darci Koenigsknecht November 14, 2011 Table of Contents ABSTRACT... 3 INTRODUCTION... 3 KEYWORDS... 3 PROCEDURE... 4 I. DESIGN SETUP...

More information

Web Design Project Center Project Center - How to Login

Web Design Project Center Project Center - How to Login Project Center - How to Login On your computer, locate and open a web browser program such as Firefox or Internet Explorer. In the address bar at the top of your opened web browser program, type in the

More information

100% Effective Natural Hormone Treatment Menopause, Andropause And Other Hormone Imbalances Impair Healthy Healing In People Over The Age Of 30!

100% Effective Natural Hormone Treatment Menopause, Andropause And Other Hormone Imbalances Impair Healthy Healing In People Over The Age Of 30! This Free E Book is brought to you by Natural Aging.com. 100% Effective Natural Hormone Treatment Menopause, Andropause And Other Hormone Imbalances Impair Healthy Healing In People Over The Age Of 30!

More information

Chapter 15: Forms. User Guide. 1 P a g e

Chapter 15: Forms. User Guide. 1 P a g e User Guide Chapter 15 Forms Engine 1 P a g e Table of Contents Introduction... 3 Form Building Basics... 4 1) About Form Templates... 4 2) About Form Instances... 4 Key Information... 4 Accessing the Form

More information

123RF Corporate+ User s Guide

123RF Corporate+ User s Guide 123RF Corporate+ User s Guide Table of Contents Welcome Message Moving In Corporate+ Users Site Signing In User s Dashboard Searching for Content Viewing Search Results Advanced Search Bar Lightbox Downloading

More information

Have you seen the new TAMUG websites?

Have you seen the new TAMUG websites? 4 For all Cascade Management System request for PUBLISHING please email cms@tamug.edu for the quickest response. For all Cascade Management System request for QUESTIONS or COMMENTS please email cascadeusers@tamug.edu

More information

Using Pinterest with your ecommerce store

Using Pinterest with your ecommerce store Using Pinterest with your ecommerce store Draft White Paper March 2012 Nigel Richardson Volusion Self-Help Specialist 1 Introducing Pinterest Although it's been around since late 2009, it seems as if Pinterest

More information

Website Editor User Guide

Website Editor User Guide CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...

More information

UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130

UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS. Silva. Introduction to Silva. Document No. IS-130 UCL INFORMATION SERVICES DIVISION INFORMATION SYSTEMS Silva Introduction to Silva Document No. IS-130 Contents What is Silva?... 1 Requesting a website / Web page(s) in Silva 1 Building the site and making

More information

USDA Web Standards and Style Guide. Version 2.0

USDA Web Standards and Style Guide. Version 2.0 USDA Web Standards and Style Guide Version 2.0 Table of Contents 1) INTRODUCTION... 3 2) FEDERAL LAWS AND REGULATIONS... 4 3) OVERVIEW OF USDA.GOV... 4 4) REQUIRED ELEMENTS... 4 a) Masthead... 4 (1) Usage

More information

Chapter 3: The Schoolwires Editor

Chapter 3: The Schoolwires Editor : The Schoolwires Editor By the end of this chapter, you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages.

More information

Application Note. Building a Website Using Dreamweaver without Programming. Nan Xia. MSU ECE 480 Team 5

Application Note. Building a Website Using Dreamweaver without Programming. Nan Xia. MSU ECE 480 Team 5 Application Note Building a Website Using Dreamweaver without Programming Nan Xia MSU ECE 480 Team 5 11/16/2012 Table of Contents Abstract... 3 Introduction and Background... 3 Keywords... 3 Procedure...

More information

Chameleon Theme Overview. Figure 1 - Chameleon theme

Chameleon Theme Overview. Figure 1 - Chameleon theme Webpages and Blogging through Wordpress with Chameleon Theme This tutorial is intended for users who already have some experience with Wordpress. It covers the creation of new web pages with the Chameleon

More information

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE 1 TABLE OF CONTENTS Introduction 3 Parts of the Government Web Template (GWT) 4 Logging In and Getting Started 5 GWT Joomla! Module Map 8 Editing the Top Bar

More information

Word 2007: Basics Learning Guide

Word 2007: Basics Learning Guide Word 2007: Basics Learning Guide Exploring Word At first glance, the new Word 2007 interface may seem a bit unsettling, with fat bands called Ribbons replacing cascading text menus and task bars. This

More information

TASKSTREAM FAQs. 2. I have downloaded a lesson attachment, but I cannot open it. What is wrong?

TASKSTREAM FAQs. 2. I have downloaded a lesson attachment, but I cannot open it. What is wrong? TASKSTREAM FAQs Why do I not receive emails from TaskStream? It could be that your email program is interpreting incoming TaskStream mail as spam, which is a term for junk mail Spam is not typically stored

More information

Manual. OIRE Escuela de Profesiones de la Salud. Power Point 2007

Manual. OIRE Escuela de Profesiones de la Salud. Power Point 2007 Power Point 2007 Manual OIRE Escuela de Profesiones de la Salud Power Point 2007 2008 The New Power Point Interface PowerPoint is currently the most common software used for making visual aids for presentations.

More information

MailChimp Instruction Manual

MailChimp Instruction Manual MailChimp Instruction Manual Spike HQ This manual contains instructions on how to set up a new email campaign, add and remove contacts and view statistics on completed email campaigns from within MailChimp.

More information

Creating Interactive PDF Forms

Creating Interactive PDF Forms Creating Interactive PDF Forms Using Adobe Acrobat X Pro Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This

More information