MS801 Web Design & Development

MS801 Web Design & Development

Galway Arts Festival Final report DANIELLE AHERNE

16232332

ABDULMAJEED ALSHEHRI

16231020

SARNEEK TIWARI

16231899

MS801 Web Design & Development Planning Report

1

Table of Contents Introduction ............................................................................................................................................ 4 User Analysis ........................................................................................................................................... 4 Target Audience .................................................................................................................................. 4 User Expectations and Needs ............................................................................................................. 4 Approach ................................................................................................................................................. 5 Brainstorming...................................................................................................................................... 5 Paper Prototype .................................................................................................................................. 5 Storyboard Diagram ................................................................................................................................ 6 Project Management .............................................................................................................................. 7 Overview of Project Stages ................................................................................................................. 7 User Analysis ................................................................................................................................... 7 Conceptual Design .......................................................................................................................... 8 Implementation .............................................................................................................................. 8 Website Design ....................................................................................................................................... 9 Components ........................................................................................................................................ 9 Layout................................................................................................................................................ 11 Navigation ..................................................................................................................................... 15 Basket Glyph icon & Shopping Cart .............................................................................................. 17 Colour Scheme .............................................................................................................................. 18 Fonts & Formats ............................................................................................................................ 19 Computer Literacy......................................................................................................................... 20 Logo ....................................................................................................................................................... 21 Image Editing ........................................................................................................................................ 22 Step 1: Brightness/Contrast Adjustment .......................................................................................... 22 Step 2: Adjust Levels ......................................................................................................................... 23 Step 3: Image resizing and sharpening ............................................................................................. 23 For example: ................................................................................................................................. 24 Editing with Dreamweaver CC 2017 ................................................................................................. 25 Banner Blindness............................................................................................................................... 26 Software ................................................................................................................................................ 26 Language / Code ........................................................................................................................... 26 MS801 Web Design & Development Planning Report

2

Functional Features .............................................................................................................................. 27 Screen Reader ............................................................................................................................... 27 Usability ................................................................................................................................................ 28 Scenario presented to user ............................................................................................................... 28 Heuristic Evaluation .......................................................................................................................... 30 Summary ............................................................................................................................................... 33 Team Task ............................................................................................................................................. 33 Bibliography .......................................................................................................................................... 52 Appendices............................................................................................................................................ 34 Appendix 1 ........................................................................................................................................ 34 Crediting ........................................................................................................................................ 34 Appendix 2 ........................................................................................................................................ 36 Scripting ........................................................................................................................................ 36 Events 2017 (1) ............................................................................................................................. 36 Event 1 (1.1 page) ......................................................................................................................... 38 “Visit” (3.0 page) ........................................................................................................................... 40 Appendix 3 ........................................................................................................................................ 42 Desktop Testing............................................................................................................................. 42 Tablet Device Testing .................................................................................................................... 45 Smartphone Testing ...................................................................................................................... 46 Appendix 4 ........................................................................................................................................ 47 Preliminary Interface Design ......................................................................................................... 48


3

Introduction Festivals in Galway take place right throughout the year from St. Patrick's Day in March to the Comedy Festival in October. These festivals include many themed events within the categories of theatre, music, literature and comedy. The identified aim of this project is to promote the Galway Art Festival, and so this will be the focus of the project. Since Human Computer Interaction (HCI) has moved beyond simply designing for desktop use, the website will also allow the user to access the website through multiple devices such as laptop, the smartphone, as well as tablet i.e. with a view to responsive design and a screen reader option will make the website more accessible for users with a visual impairment.

User Analysis Target Audience The Galway Art Festival has many events and associated activities which cater for different age groups. However, the promotional website of Galway Arts Festival aims to target the age group from 18-35 who have an interest in ‘The Arts’ such as; music, theatre, art, etc. Many of the ticketed events available are targeted this age demographic. The aim of the website is to attract a local audience i.e. Galway community, as well as a national audience travelling from all parts of Ireland and for that reason we have also provided a page with tourist relevant information on the website.

User Expectations and Needs A contextual inquiry was undertaken by interview with an annual attendee of the Galway Arts Festival and a persona was drawn up on the user identifying user goals. Since the aim for the site is to promote events taking place, communication of these events, as well as their details, venue, times, etc. and their availability, including the ability to buy tickets online needs to be clearly indicated and the navigation through the website needs uncomplicated and consistent.


4

Approach Brainstorming The team brainstormed by coming together to put ideas on paper and thereafter created a low fidelity paper prototype to formalize the initial design concepts . Firstly, the user’s functional requirements were defined; e.g. searching for a event, viewing event details and purchasing tickets. Then the website was designed in a sharp and engaging format to appeal to our target audience but with a very clear navigational framework to make the website as user friendly and seamless to use as possible.

Paper Prototype Paper prototyping is a very effect low fidelity method of getting initial ideas of design on paper. It is in essence a very basic throwaway prototype and it enables developer to brainstorm their ideas without specific design restraints. Alteration can be easily made to a layout based on the feedback provided (Zeng, L., 2009). A sample of these is in Appendix 4 This was one of the initial tasks undertaken by the development team to get a broad understanding of what the website would look like based on user needs and further define all the user requirements for further developing the design of the website.


5

Storyboard Diagram

Figure 1.0: Storyboard

The figure above contains a storyboard diagram of the navigation through our pages on the site. The main pages of the menu bar are labelled (1,2,3,4) and the pages which are navigated According to labelled see above i.e. 1.1 ,2.1 ,3.1, etc.).


6

Project Management Evolutionary Prototyping was agreed upon as the method for the developing this website. Prototyping is an excellent method to ensure your project stakeholder is satisfied with your product. The users can be actively involved when using this method which is very important for a project involving website building [6]. By using Evolutionary Prototyping specifically, the end product is a working model of your website and so this can give the developers a clear indication to show if they have met the user’s needs for the website. If the website fails to function as conceptualised by the user, this can provide timely feedback to the developers [7]. This methodology requires the developers to check errors and deal with them as they develop the system with is the potential risk when undertaking a project doing this. Time management will have to be strictly enforced to ensure the team can produce the end product within the set deadline. The prototyping can be iterative and so if the stakeholder is not happy with the test prototype, it can be refined to produce the final product.

Figure 1- Evolutionary Prototyping

Overview of Project Stages User Analysis User analysis was the primary focus for the team: the target audience and market were clearly identified. Based on this information the team brainstormed to gather ideas of how we could meet these user requirements. Roles, responsibilities and associated schedules were put in place to guide the team and to initialize time management. Policy and security issues were addressed at the start so that guidelines would be followed through the prototyping. Quality assurance and testing took place through the prototyping to check for errors and defects. The stakeholder was consistently involved in the design and implementation, as was communicated with regularly to review risks.


7

Conceptual Design The team collated information from a collaborative brainstorming and conceptualised a design using paper prototypes. This low fidelity prototyping allows the team to be creative and allow a free flow of ideas. Storyboards and Interface Design by using website wire framing helped to concrete our conceptual design of the website. The Interface design screens were presented to the stakeholder and any partially complete requirements were identified at this stage.

Implementation The team refined their design based on changes to initial requirements. At the first stage of implementation when system design is formed the quality assurer will create tests and will be responsible for debugging the system throughout. As this project was undertaken and guided by an evolutionary prototyping methodology. Testing will take place throughout and not at the end of the development. Testing Testing is an essential when creating a responsive website. Testing took place throughout the project as the prototype was developed. The website was accessed in different browsers and updated accordingly. Multiple Device Resolutions were tested testing using the online quirk tools website [25]. This allowed us to verify the website in resolutions for multiple types of phone, tablets and monitor screens to verify content images and banner images responded correctly with the adjusted screen view. In the case failure of an image loading, all images have an alt tag so if the image does not load the user knows what the image was supposed to represent. We also verify the resolution of content was maintained when undertaking the device platform testing. The code for the main components of the website, like the navigation bar are repeated on every page and we needed to test to make sure no pages were missed when a change was required. We develop a plan for testing all of the website content on each page to make sure it was consistent and had not been broken by any updates made to the code. Refining After the prototype of the website was successfully created, we ensured that it was fully functional with no errors or defects, and then it was presented to the stakeholder. The website was intensely tested to ensure complete functionality before producing the final version of the fully functional prototype. Completion The final product fully met the requirements set out by the stakeholder and the user experience was highly rated.


8

Timeline

Period Project Plan

# Days

Project start

1

Planning and project proposal

9

Analysis and design

8

Development and Coding Testing

24 25 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

14

Documentation

1

Poject Endna Final project

1 Actual date Paln date

Website Design The website was designed with the target audience in mind. Utilising good website design from consulting well established guidelines such as Jakob Nielsen’s Designing Web Usability: The Practice of Simplicity, 1999, [1] and IBM’s visual design layout principles [2], contributed to the design of the website being, clear, concise and attractive to the key end user group. The use of bright and vibrant images reinforces this and resonates with the ethos of the Arts Festival itself. In order to achieve a finite definition of the market audience requirements, contextual inquiry was used when interviewing a regular Galway Arts Festival attendee and prospective end user. This provides a key insight into understanding what the user’s expectations are in relation to the website and how the home page should be designed. This information gave direction to highlight the upcoming events for 2017 on the homepage. In defining the pages required within the site other user needs were considered. These included an ‘About us’ page to give a background into what the Galway Arts Festival, a ‘Visit’ page which provides useful tourist information and promotes local Galway businesses and finally a ‘Find us’ page which provides travel information and contact information for the box office and the festival itself. Standard website features including a search facility, shopping cart and checkout were also included.

Components Page template It is important to maintain a consistent layout of web pages of a website but websites usually have an average of 5-10 page templates [4]. Of the 12 pages were created, the website has 5 different templates which are slightly different in layout but with a standard navigation template on each page to ensure the user is not disorientated. MS801 Web Design & Development Planning Report

9

Figure 2- Page template

Meta Tags Meta tags were used in order to make the website Search Engine Optimization compatible and visible to search engines to direct as much internet traffic to the website as possible.


10

Figure 3 - Meta Tags

Layout The following principles were followed for the design of the website: ●

Orientation All webpages are automatically be displayed in the orientation of portrait (set by the media query) and breakpoints delineate the points at which the user’s view will change according to the device i.e. (usually at 320px and 480px), tablet (768px and 1024px) and desktop (above 1024px) [1];

Figure 4 -Smart Phone


11

Figure 5 - Desktop View

Figure 6 -Tablet View

●

Balance: All the elements on each web page are symmetrically balanced and have conformal alignment.


12

Figure 7- web page is balanced


13

Figure 8 - web page is balanced

●

Rhythm: The webpage adhere to the same rhythm in layout. We have chosen flowing rhythm directing the user to view left hand side until bottom of the page and then view right hand side until bottom of the page;

Figure 9 - Flowing Rhythm

●

Proportion:


14

Images are displayed as placeholder links and are present across slide shows in the banner. Each of these will be sized uniformly according to each other taking into account where they will be located on the page. The margins and padding will be adjusted accordingly also for each feature; ● Dominance: Elements in the foreground, middle ground and background will be identifiable on each page where appropriate to draw the user’s attention to the most important features.

Navigation The website has been designed so that the user can access any of the webpages from a single click. The only exception is the Order confirmation page as of course a succession of web page clicks needs to be followed to process an order. Navigation bar For the navigation bar we implemented Bootstrap's navbar template. We incorporated UI Design when developing this feature as the nav bar, setting it to static (so it stays at the top of the page as the user scrolls) ensuring that the navigation links are always easily accessible this insures ease of navigation for the user as well as efficiency of use which ultimately contributes to a positive user experience. We utilised this feature based on the available bootstrap navbar static example code [15]. Glyph icon Hamburger Navigation When the resolution is reducing, on a mobile device for example, the built in Bootstrap navbar is designed to collapse and make a hamburger styled icon visible. This makes the menu bar compact for a mobile screen resolution but still easily accessible for the end user. We developed this feature based on openly available bootstrap navbar functionality and glyph icon [26]. Dropdown There is a dropdown option on the navbar which makes more links accessible to the end user. The dropdown allowed for extra links to be included in the navbar but prevented the it from becoming too cluttered. The drop down is segmented into three parts to make it easier to read by grouping content pages like current events together. Call to Action Buttons Social media Call to Action buttons were included on the navigation menu bar to direct the user to follow us on the links (Facebook, Twitter, Instagram, etc.). We chose these links as they are popular with the age of our target market. On each ‘Event’ page, there will be a ‘Book Tickets’ and 'Checkout' call to action buttons in orange to make this stand out and urge the user to click. On the order confirmation page, no items are added to the basket and the using default Bootstrap style, the checkout button is disabled and cannot be clicked (as there are no items to checkout).


15

Textual Links Textual links were included at the bottom of the web pages in the footer. These will include: terms and conditions, privacy & cookies policy). After researching other pages found online of similar theme, we deduced that it would be important to include these in our pages. Textual links have also been included in the paragraph text of the event panels and on the find us page for email links. The links were identified as suggested by Nielson’s guidelines [3], but using a different colour and “>>” indicators to also make the links more visually symbolic and easily identifiable so that it will make it clear to the user that these are clickable. Link rollovers occur when a user hovers over a link it changes colour. The current page selected by the user is highlighted to ensure clarity. Links were created for social media (they are hard coded to the root website pages for demo purposes e.g. www.facebook.com) Image Placeholder Links Image Placeholder links were displayed in the Homepage - “Events 2017”. Each event has a placeholder image defined by use of panels which when clicked on will direct the user to a page detailing information on this event. We used bootstrap container example tutorials [16] and bootstrap grid, breakpoint code examples [17][18], to help us understand and implement these layouts in our website [19].


16

Figure 10 - Image Placeholder Links

Basket Glyph icon & Shopping Cart We used the basket glyph icon as an easy to use way for the user to see their purchases and change the quantity of their selection conveniently. Selecting this icon will bring up their


17

shopping cart selection and enable the user to proceed to payment. This feature was selected as part of UI design and it is hoped this will greatly improve user experience on the site. This feature was intensively researched, through tutorials and blog provided the team to decipher what code would work particularly to get the quantity to change, we used Java Script to complete this function [20]-[24] (see crediting and reference for detail). Although this was not essential to include this for the purposes of this project we felt it gives a better picture of the design thought process that went into usability and UI Design for the end user. A bootstrap badge was used to identify to the user when ticket was selected. Glyph icons and badges were used for the purpose of controlling sizing as these elements will never pixelates and it is better practise than using images which are not as predictable when creating a resolution responsive website. We have hard coded one product into the shopping cart for the purposes of this demo.

Figure 11- Basket Glyph icon

Colour Scheme The background, middle ground and foreground colour schemes differ slightly between pages according to the layout of each page. For the most part, the images reflect the colour necessary MS801 Web Design & Development Planning Report

18

to stand out, and so these needed to be carefully considered when presented in the background. The font colour of content is set to a dark colour throughout the web site to aid readability. The colour scheme is consistent across all the webpages so as to ensure it is legible, easy to navigate and thus not disorientating for the end user. For the detailed pages on evening events images with a dark colour scheme were selected to conceptually represent a ‘night out’ feel to the page. There is substantial contrast between dark and light colours on each page to convey the vibrancy of the festival itself and reinforce the engagement with the target audience.

Figure 12 - Colour Scheme for the home page

Figure 13 - Colour Scheme for the event details


19

Fonts & Formats The font type has been set to belong to the family of sans serif. This is a commonly used font type for website which is considered to be easy to read [8], particularly for the visually impaired as the characters are more easily recognisable [9]. The website was tested to ensure readability was consistent across all platforms. Media queries were used in the CSS to enable elements of the pages to adapt when viewing the site using different devices. A minimum font size of 16 pixels was advised by many guidelines [9] [10].

Computer Literacy It is anticipated that the website target audience will be highly familiar with internet usage but even so, we have designed the website to in-keeping with current webpage dominant design in relation to the page flow and structure. For example, on a desktop view menu bars are normally expected to be located at the top or left-hand side of the page. This reduces the need for the user to familiarise themselves with an unanticipated layout and thus makes navigating the website more efficient. Icons have also been used to increase efficiency due to an end user’s immediate and pre-defined expectation of what an icon represents. Examples include: ➢ A speaker icon represents a screen-read functionality. When this function is activated a voiceover, message is played based on the page element the user is hovering over or the paragraph of text they click on. This may make the website more accessible for a visually impaired user. For the purposes of the demo we only used this sample functionality in the index.html on the events icons and text. For a full Implementation, this could be expanded for all elements.


20

Figure 14 - Speaker icon

➢ A basket icon represents a link to the shopping. When an item has been already to the basket, a small number is placed over the basket to highlight items have been already to the basket (for the purposes of a Demo, a set of tickets has been added to the shopping cart by default to demonstrate this functionality)

Figure 15 - Basket


21

Logo We used a website online logo maker, online favicon maker, as well as Photoshop to create the logo for this project. When designing the logo, we kept the design simple and clear so that it is suited to responsive design i.e. when accessing the site across many different platforms, the logo is distinguishable. The blue colour was chosen which can describe city by sea. The colour of the logo is also blends with different images displayed on the site, we did not choose very strikingly bright colour for this reason as we do not want it to clash with the overall colour scheme of the pages. We included the quaver in the ‘G’ to hint at the musical theme and the flowing dash crossing the ‘A’ and circle for the ‘F’ to hint at the artistic theme of the festival events.

Figure 16 -Online Logo Maker

The favicon is visible on the internet tab (figure 1.3) this allows the user to quickly identify the webpage tab if they have several tabs open in their browser. Figure 17-favicon displayed the internet tab

Image Editing Step 1: Brightness/Contrast Adjustment Most images used for the website were of a high resolution and often did not require adjustment. Where applicable a static adjustment was made to images where the brightness and or contrast were altered.


22

Figure 18 - Adjusting Brightness/Contrast

Step 2: Adjust Levels Any images which did not use full tonal range were altered by adjusting the shadow input slider and the highlight input slider to give an overall sharper appearance to the image.

Figure 19 - Adjusting Levels

Step 3: Image resizing and sharpening The images were resized by using the image resize option. The images for the banner had to fit the correct dimensions for responsive design.


23

Figure 20 -Image Resizing

For example: The image above was selected from the Galway International Arts Festival webpage. The image had to be adjusted in size as it’s dimensions were too large. Adobe Photoshop CC 2017 was used for this task. We resized its width to 240 Pixels and height to 148 Pixels. It was also necessary to crop the image to fit them within the html div panel. Additionally, filters were used to sharpen their appearance.


24

Figure 21 - Image Resizing

Figure 22 - Image Sharpening

Editing with Dreamweaver CC 2017 To get an idea of size the design and live view tool view was used in Dreamweaver. This was essential so that each image on each page would look identical in sizing to keep a level of consistency throughout.


25

Figure 23 -Using Dreamweaver

Banner Blindness It is important to be aware of user instincts and natural behaviours of a user and indeed a consumer. Studies from eye tracking studies indicate that if users have a pre-determined focus going on a webpage or are engaged by a story or content on a webpage they will not focus on banners on the webpage [35]. However, moving objects can cause a user to focus due to coevolutionary prey predator responses [37]. This was considered in our final prototype before going live and so we made our static timeline banner into a carousel slideshow to attract the user to images from some of the past events of the Galway Arts Festival to persuade the user to explore the site.

Software Language / Code Hypertext Mark-up Language (HTML) was used to build the web pages for the site. We used Dreamweaver CC 2017 to view, design and code the website. To set styles and apply formatting to the webpages we used some external elements from Bootstrap and the CSS styles for these also. The website contains some elements which have been hard coded (for demo purposes) and JavaScript for functionality purposes to get a full picture of the start to end UI process. MS801 Web Design & Development Planning Report

26

Functional Features Screen Reader We included a speaker glypican to represent a screen read function on each of the pages of the site across all platforms. Theoretically when clicked it would enable a visually impaired user to be able to interact with the site. When the user hovers over the placeholder images or the menu options for example, a screen reader will identify the item and this will be announced so that the user can click if he wishes to navigate. For paragraphs of text the user can click on the text to have it screen read as a hover functionality on every page element could prove annoying to an end user. Other considerations were taking into account in the design also to make it easy for the visually impaired; the font size was set at 16 pixels for the body as suggested according to the Nielson guidelines [1], [11].


27

Usability Scenario presented to user You have heard that the Galway Arts Festival are hosting the Coronas this year. You want to go online to book a ticket. Please select one ticket and continue until you reach the purchasing of this ticket and you are asked for your details. Focus on this task only. When completed you may stop the test.

Usability Test Task Navigate to the purchase sequence: page No Navigation 1 2 3

Homepage-->Coronas link (placeholder) Coronas event page--> shopping cart Shopping cart-->checkout page

Achieved: Yes Expected Response Time 5 seconds

Actual Response Time 7 seconds

5 seconds

4 seconds

10 seconds

7 seconds

The expected response time varied from the actual response time due to factors which the development team were not able to identify by just the design, for example: due to the development team’s familiarity with home page from regular use during testing and development, the response time for task sequence no. 1 resulted in an overestimation.


28

Post- test Interview

Usability Test No

Question

Answer

1

Does the website let you sucessfully do what you expected

Yes

2

Do you think the website's design matches its purpose?

Yes

3

What's the first thing users would want to do on this website? Can you do that?

Find an event - Yes easily

4

When exploring the website, are you confused at any point? Is there anything distracting you or getting in your way?

No,it is very clear and easy to neviagte

5

Are there any features you have completely ignored?

About us page or visit I just need to buy ticket

6

Does the information architecture and navigation make sense? (Can you find what you are looking for?)

Yes,every page is easily accessible

7

Do you feel the website was designed for you or for people from Galway or who would be from same age group ?

I think it works well for people visiting galway or locals.Being easy to use makes it a user friendly webiste for all ages

8

Please rate your satisfaction with the “look and feel” of the website from one to ten

9

9

How easily were you able to navigate to the payment page, please rate out of ten: ten being very easy, one being difficult

10

From the response times, task test and the post-test interview, we can deduce that the user was quite satisfied with the aesthetics, navigation through the site and general functionality of the site for this task. In this scenario, the user had one specific focus and did not need to use other features on the site but we can conclude from the interview that the user felt that the website was suited for others of similar persona who might visit the site.


29

Heuristic Evaluation Heuristic evaluation is a method of usability engineering where design flaws can be easily identified [32]. The interface is analysed by a small number of evaluators who have the expertise to recognise if heuristic principles have been met when examining the website based on a pre-determined set of rules [33]. Nielsen’s Ten Usability Heuristics are well established guidelines for good web design. The figure below highlights the ways in which we incorporated good heuristic design in the development of our website. Nielsen’s original heuristics Visibility of system status.

Match between system and real world.

User control and freedom.

Consistency and standards.

Error prevention.

Implementation of heuristics ✓ Dot slider icon indicates other images will be displayed in slideshow & the webpage will show them in a sequence ✓ Order confirmation page lets user know that order has been completed successfully with a summary of what was ordered. ✓ The number div on the basket allows user to see that they have made a selection and it has been temporarily stored ✓ Basket glyphicon acts as a metaphor: mimics checkout for purchases in real world and ticket purchase on the site. ✓ Content was created in accordance with the interests of the target audience ✓ Navigation menu available to user on any page to switch between pages on the site. ✓ Dropdown menus allows for more links to be made accessible to the user without compromising the clear website navigation design ✓ User can access any webpage on a one-step navigation to another page (except for payment process) ✓ Nav bar is set to static so that is can be seen at all times when scrolling making the links always easily available ✓ Links to social media are included in the navbar allowing the user to interact with the webpage via their social media profiles ✓ Character set -Utf8 ✓ Specified language of the website as English ✓ Set doc type at the top as html ✓ Meta tags with keywords used for Search Engine Optimization ✓ Consistent colour scheme throughout ✓ User can access any webpage on a one-step navigation to another page (except for payment process) ✓ Nav bar is set to static so that is can be seen at all times when scrolling ✓ Tested on different browsers to ensure cross browser functionality ✓ Multiple resolution variance testing ✓ Page elements will re-size in accordance with screen resolution ✓ All images have an “alt” attribute to ensure the image is described in case it does not load correctly ✓ Ensuring compatible page rendering on the end user’s device ✓ Checkout button is disabled when the shopping cart is empty


30

Recognition rather than recall.

Flexibility and efficiency of use.

Aesthetic and minimalist design.

✓ If the user enters a non-numeric value for the quantity in the shopping cart then an error will be displayed ✓ Checkout page will validate that each of fields are correctly populated, e.g. email address has an “@” symbol (this is not currently functional in the demo website) ✓ The website cannot operate correctly without JavaScript enabled on the user’s browser, the use of a html tag allows the website to identify browsers which do not have JavaScript enabled and alert the end user. ✓ On hover over navigation tabs link is highlighted ✓ Rollover tooltip on images to describe them or ensure they are described correctly in case the image does not load correctly ✓ Logo Links to social media ✓ Basket icons allows user to understand by metaphor that this will take them to the shopping cart panel ✓ The Hamburger icon is a common default icon used to represent a menu and is easily identifiable when viewing the website on a mobile device ✓ The screen read icon is a volume icon for being turned on and a mute volume icon for being turned off which is intuitive for an end user ✓ Responsive design: compatible across different platformsmobile, tablet, desktop, etc. ✓ Placeholder links facilitate fast, easy to use navigation. ✓ Hamburger icon allows easy navigation from page to page when accessing the site from a mobile device. ✓ Dropdown menus allows for more links to be made accessible to the user without compromising the clear website navigation design. ✓ User can access any webpage on a one-step navigation to another page (except for payment process) ✓ Nav bar is set to static so that is can be seen at all times when scrolling. ✓ Links to social media ✓ Basket icon allows user to access shopping cart and thus the checkout page from any webpage ✓ Book ticket call to action button on event pages to allow user to add to shopping cart ✓ Quantity box will cause an update when you change the value and click outside the input box. ✓ Delete icon box will cause an update which sets the quantity to zero and the subtotal and total values to €0.00 ✓ Shopping cart has functionality that allows the user to specify the quantity of ticket they want for an event and will update the totals accordingly ✓ Clear design: white background acts to improve contrast and focuses user’s attention. ✓ User can access any webpage on a one-step navigation to another page (except for payment process) ✓ Rollover tooltip on images to describe them


31

✓ Basket icon and hamburger menu icon are examples of minimalist design ✓ UI Design: clear header, image with link and blurb of text, also containing a link- avoids cluttered appearance Help users recognize, diagnose, recover from errors.

Help and documentation.

✓ Inclusion of “alt” tag: labels an image if error occurs in loading image user still knows what image is supposed to represent ✓ No script warning “Your browser doesn't support JavaScript! Please enable JavaScript and reload this page!” tells the user that they do not have JavaScript enabled and that it is required for the website to function correctly ✓ Checkout page will validate that each of fields are correctly populated, e.g. email address has an “@” symbol (this is not currently functional in the demo website) ✓ Footer includes links on copyright, cookies, etc. ✓ Screen read icon enables visually impaired users to navigate through the pages. ✓ The clear menu layout and immediately identifiable icons make the website more self-explanatory and easy to navigate


32

Summary Evolutionary Prototyping was selected as the methodology for this project due to the high level of user involvement required and the detailed user requirements it furnished us with. In depth end user involvement proved vital in developing a robust and user friendly interface design and highlighted useful features that could have been overlooked without end user input during the various stages of design, development and usability testing. Using the evolutionary prototyping methodology, issues were identified sooner and as more of a test-driven development approach was used, defects were addressed earlier in the development lifecycle. This also contributed in achieving fixed deadlines required by the client which was a weighted constraint on the project. Also, the user of existing, industry standard libraries such as Bootstrap and JQuery greatly reduced development time and due to vast amounts of online information, developers had access to a large knowledge base of material for implementing these frameworks The development team examined the design of some of the features within the existing official Galway International Arts Festival website to identify components which were compliant with heuristic principles set out by Jacob Nielsen. The navigational elements of the website were designed to be minimalistic and flexible, allowing users to navigate between web pages with a minimal number of clicks. It was also designed to support both multi-platform use and for end users with visual difficulties via the provision of screen reader function.

Team Task Tasks

Sub tasks Introduction User Analysis and Audience age Project management and development methodology Timeline Planning and Project Proposal Colour scheme and Layout Logo Storyboard Script Interface design Researching Dealing with PhotoShop Changing image Development and Coding Coding html/css/ java script Update the contents Testing Usability Test Taking screenshot Updating the Final Project Documentation and Final Project Formtting the Final Project Technial writing Creating a Credits Page


Assigned To ABDULMAJEED DANIELLE / SARNEEK DANIELLE ABDULMAJEED DANIELLE ABDULMAJEED ABDULMAJEED DANIELLE / SARNEEK The Whole team ABDULMAJEED / DANIELLE The Whole team SARNEEK ABDULMAJEED / DANIELLE SARNEEK DANIELLE DANIELLE SARNEEK The Whole team ABDULMAJEED DANIELLE DANIELLE

33

Appendices Appendix 1 Crediting Development Tools We used a Dreamweaver CC 2017 software as a tool to view, design and code the website. We used Bootstrap components and their css code to develop icons,etc on the website. We used tutorial guide and code from blogs and sites such as html goodies to understand how to add some elements of functionality to our pages. The text below details the source which helped us build the components of our website. We as a team give full credit to the sources of these components and we do not claim this code which we extracted as our own:

Industry standards Research:

http://blog.lemonstand.com/11-website-navigation-best-practices/

Navbar Code:

http://bootstrapdocs.com/v3.0.3/docs/examples/navbar-static-top/

Shopping Cart Glyphicon Code:

http://getbootstrap.com/components/#gylyphicons

Code:

http://getbootstrap.com/components/#badgess

Slider Code

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Code

bootstrap CSS and JS and JQuery

Grid for panels Research:

http://codepen.io/ncerminara/full/omChv/ http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-gridsystem.php

Code:

https://getbootstrap.com/examples/grid/

Panels Code:

http://bootstrapdocs.com/v3.0.3/docs/components/#panels


34

Buttons Placed on Events Page / Shopping Cart / Checkout / Order Confirmation Page Code:

http://getbootstrap.com/css/#buttons

Resolution Research: layout.php

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-responsive-

Code:

media query in CSS

Testing

using online screen resolution simulator

Shopping Cart: Code:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onblur

Updating & Deleting Quantity : https://www.sitepoint.com/community/t/javascript-to-calculateshopping-cart/16925/2

JavaScript Functionality Checkout button & passing total to checkout page: http://www.htmlgoodies.com/beyond/javascript/article.php/3471111 Checkout: Input boxes designed using bootstrap template Code:

http://bootstrapdocs.com/v3.0.3/docs/components/#input-groups


35

Appendix 2 Scripting For this section of the assignment we have just included the homepage (1), an event page (1.1) and the Visit page (3) as a presentation of the content included. We chose these pages as they emphasis our decisions for contents body text which was based on the target audience and their needs i.e. young visitors to Galway will be interested in staying in hostels for example.

Events 2017 (1) The page will be a single column page containing 6 placeholders; “Event 1”, “Event 2”, “Event 3” ,“Event 4”, “Event 5” and “Past Events” . Alternate text will be entered for the images in the placeholders . Header : Logo & speaker icon. Menu: Events 2017 Event 1 Event 2 Event 3 Event 4 Event 5 Past Festivals About us Visit Find us

Footer: © 2016 Galway Arts Festival Ltd. Registered in Ireland no. +353834705715 [email protected] Privacy & Cookie Policy Terms & Conditions Sitemap

Screen Reader If a visually impaired person opens the homepage on a desktop, the user will move the cursor until the user hovers over the speaker icon. The screen reader will announce “click now to activate Voice Over”. When the user hovers over the menu bar the following will be announced: “Events...Click to select page”, “About us ...Click to select page”, “Visit... Click to select page”, “Find us...Click to select page” MS801 Web Design & Development Planning Report

36

When the user hovers over the event placeholders the following will be announced: o Event 1 placeholder link: “Comedy Event ….Dead Cat Bounce...click to access page for information on description, venue, dates or to book tickets.” o Event 2 placeholder link:“Music Event ….The Coronas...click to access page for information on description, venue, dates or to book tickets.” o Event 3 placeholder link:“Comedy Event ….David O'Doherty...click to access page for information on description, venue, dates or to book tickets.” o Event 4 placeholder link:“Theatre Event ….Macnas Parade...click to access page for information on description, venue, dates or to book tickets.” Past Events placeholder link: “Past Events...click to access page on details of past events”...etc.


37

o

Event 1 (1.1 page) Header: “Dead Cat Bounce” & speaker icon. Menu: Events 2017 o o o o o

o

Event 1 Event 2 Event 3 Event 4 Event 5 Past Festivals

About Discover Find us

Content: “DATE & TIME: Thursday, January at 8pm Matinees : Evening Extra tickets now released. TICKETS: €15 VENUE: Roisin Dubh” “An unrelenting, high-energy hour of sketches complete with live music and live sound effects. Dead Cat Bounce's unique blend of sketch comedy and blistering musical performances has won them huge critical acclaim. Guest MC Jarlaith Regan is one of the fastest rising stars of Irish comedy while support comes from Jack Wise - a magician with attitude.” Right Col: Call to action button“ Book ticket” will be identified. Footer:

“© 2016 Galway Arts Festival Ltd. Registered in Ireland no. +353834705715 [email protected] Privacy & Cookie Policy Terms & Conditions Sitemap”


38

Screen Reader If a visually impaired person clicks into an event page, the user will still have the screen reader activated. The screen reader will announce “Dead Cat Bounce Comedy Event…..If you wish to hear description about this event press enter…..if you wish to proceed to buy tickets press the tab button”.This will direct the user to their desired action.


39

“Visit” (3.0 page) Menu: Events 2017 About Visit o Transportation o Where To Stay o Sight To See Find us

Header 1: “Transportation” Content:“There are variety of transportation in Galway: Rail: Iarnrod Eireann operate return services daily from Galway to Dublin. Bus:The GoBus.ie offer some great deals and run up to 19 daily services to and from Galway city with all their coaches offering free wifi and sockets. Car Rental:Most major car hire companies operate from airports and seaports in Ireland. We recommend Festival Friend Europcar. Taxi Company:You can find Taxi on city but they have website like halo Big O Taxis e.t.c. they supplying a fast and friendly service to your door within minutes.” Header 2: “Where to stay” Content: “In Galway there are 5-star luxury escapes, cheerful hostels and friendly B&Bs for the budget-conscious... Galway has the perfect haven, with the perfect price tag, for every traveller.” Header 3: “Sights to see” Content: “Galway is a perfect base to explore the wide range of attractions dotted outside of the city. Within a short distance by bus or car you can visit any of the places listed below. Aran Islands, Cliffs Of Moher, The Burren,Connemara.” Footer:

“© 2016 Galway Arts Festival Ltd. Registered in Ireland no. +353834705715 [email protected] Privacy & Cookie Policy Terms & Conditions Sitemap”


40

Screen Reader If a visually impaired person clicks on the Visit page, the user will still have the screen reader activated. The screen reader will announce. “If you wish to hear description about transportation press enter…..if you wish to proceed to the link to suggested transportation press the tab button”. “If you wish to hear description about where to stay press enter twice…..if you wish to proceed to the link to suggested where to stay press the tab button twice”. “If you wish to hear description about sights to see press enter three times…..if you wish to proceed to the link to suggested sights to see press the tab button three times”. This will direct the user to their desired action.


41

Appendix 3 Desktop Testing


42


43


44

Tablet Device Testing


45

Smartphone Testing


46

Appendix 4

Paper Prototype


47

Preliminary Interface Design Desktop View for first page

Figure 3: Homepage

The figure above displays the preliminary Interface design of the website using a desktop. It opens under the menu tab Events 2017. Each placeholder image will act as a navigation link. It contains the logo, the menu bar and social media links at the top of the page. Footer contains copyright information and links. Speaker icon detailed in mobile view


48

Desktop View for event page

Figure 4: Event 1 page

The figure above details the event 1 page looks like (after clicking the L.H.S placeholder on the homepage). The left column details the desciptive content, the right column details the event details and has a Call To Action link to encourage the user to book tickets. The placehoder banner below dispays other 2017 events. Footer contains copyright material and links. Speaker icon detailed in mobile view.


49

Smartphone view


50


51

Bibliography [1] Nielson, J. (1999). Designing websites with authority. United States: New Riders. [2] IBM Design Language. (2016). IBM Design Language | Visual: Layout. [online] Available at: http://www.ibm.com/design/language/framework/visual/layout/ [Accessed 25 Oct. Nov. 2016]. [3] Nngroup.com. (2016). Guidelines for Visualizing Links. [online] Available at: https://www.nngroup.com/articles/guidelines-for-visualizing-links/ [Accessed 26 Oct. 2016]. [4] Circle S Studio. (2016). 25 Web Design and Development Terms Every Marketer Should Know. [online] Available at: https://www.circlesstudio.com/blog/25-web-designdevelopment-terms-every-marketer-know/ [Accessed 26 Oct. 2016]. [5] Alistapart.com. (2016). More Meaningful Typography. [online] Available at: http://alistapart.com/article/more-meaningful-typography [Accessed 2 Nov. 2016]. [6] Antón, A., Carter, R., Earp, J. and Williams, L. (2001). EPRAM: Evolutionary prototyping risk analysis & mitigation (eCommerce Software Development Process Document). North Carolina State University. [7] Istqbexamcertification.com. (2016). What is Prototype model- advantages, disadvantages and when to use it?. [online] Available at: http://istqbexamcertification.com/what-is-prototype-model-advantages-disadvantagesand-when-to-use-it/ [Accessed 1 Nov. 2016]. [8] Thesitewizard.com. (2016). Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website (thesitewizard.com). [online] Available at: https://www.thesitewizard.com/webdesign/which-fonts-to-use.shtml [Accessed 1 Nov. 2016]. [9] "Tips For Making Print More Readable - American Foundation For The Blind". Afb.org. N.p., 2016. Web. 20 Nov. 2016. [10] "Use Legible Font Sizes | Pagespeed Insights | Google Developers". Google Developers. N.p., 2016. Web. 20 Nov. 2016. [11] Varvy.com. (2016). How to use legible font sizes for all devices. [online] Available at: https://varvy.com/mobile/legible-font-size.html [Accessed 2 Nov. 2016]. [12] Thesitewizard.com. (2016). Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website (thesitewizard.com). [online] Available at: https://www.thesitewizard.com/webdesign/which-fonts-to-use.shtml [Accessed 2 Nov. 2016]. [13] Teach-ict.com. (2016). Teach-ICT A2 Level ICT OCR exam board - The System Life Cycle, prototyping, rapid application development, RAD. [online] Available at: http://www.teachict.com/as_a2_ict_new/ocr/A2_G063/331_systems_cycle/prototyping_RAD/miniweb/pg3.h tm [Accessed 3 Nov. 2016].


52

[14] W3schools.com. (2016). Bootstrap Glyphicon Components. [online] Available at: http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp [Accessed 18 Nov. 2016]. [15] Bootstrapdocs.com. (2016). Static Top Navbar Example for Bootstrap 3.0.3 Documentation - BootstrapDocs. [online] Available at: http://bootstrapdocs.com/v3.0.3/docs/examples/navbar-static-top/ [Accessed 17 Nov. 2016]. [16] CodePen. (2016). Bootstrap 3 Container Examples and Common Misuse. [online] Available at: http://codepen.io/ncerminara/full/omChv/ [Accessed 16 Nov. 2016]. [17]Getbootstrap.com. (2016). Grid Template for Bootstrap. [online] Available at: https://getbootstrap.com/examples/grid/ [Accessed 17 Nov. 2016]. [18] Tutorialrepublic.com. (2016). Understanding the Bootstrap 3 Grid System - Tutorial Republic. [online] Available at: http://www.tutorialrepublic.com/twitter-bootstraptutorial/bootstrap-grid-system.php [Accessed 18 Nov. 2016]. [18] Bootstrapdocs.com. (2016). Components · Bootstrap 3.0.3 Documentation BootstrapDocs. [online] Available at: http://bootstrapdocs.com/v3.0.3/docs/components/#panels [Accessed 18 Nov. 2016]. [19] Tutorialrepublic.com. (2016). Understanding the Bootstrap 3 Grid System - Tutorial Republic. [online] Available at: http://www.tutorialrepublic.com/twitter-bootstraptutorial/bootstrap-grid-system.php [Accessed 18 Nov. 2016]. [20]The SitePoint Forums. (2016). JavaScript to calculate shopping cart. [online] Available at: https://www.sitepoint.com/community/t/javascript-to-calculate-shopping-cart/16925/2 [Accessed 19 Nov. 2016]. [21] Htmlgoodies.com. (2016). A Quick Tutorial on JavaScript Variable Passing. [online] Available at: http://www.htmlgoodies.com/beyond/javascript/article.php/3471111 [Accessed 19 Nov. 2016]. [22] Bootstrapdocs.com. (2016). Components · Bootstrap 3.0.3 Documentation BootstrapDocs. [online] Available at: http://bootstrapdocs.com/v3.0.3/docs/components/#input-groups [Accessed 19 Nov. 2016]. [23] Mark Otto, a. (2016). Components · Bootstrap. [online] Getbootstrap.com. Available at: http://getbootstrap.com/components/#gylyphicons [Accessed 18 Nov. 2016]. [24] Mark Otto, a. (2016). Components · Bootstrap. [online] Getbootstrap.com. Available at: http://getbootstrap.com/components/#badgess [Accessed 18 Nov. 2016]. [25] Quirktools.com. (2016). Screenfly / Test Your Website at Different Screen Resolutions. [online] Available at: http://quirktools.com/screenfly/ [Accessed 20 Nov. 2016].


53

[26] Bootstrapdocs.com. (2016). Components · Bootstrap 3.0.3 Documentation BootstrapDocs. [online] Available at: http://bootstrapdocs.com/v3.0.3/docs/components [Accessed 19 Nov. 2016]. [27] Halarewich, D. and Halarewich, D. (2016). 11 Website Navigation Best Practices for Smooth UX. [online] LemonStand eCommerce Blog. Available at: http://blog.lemonstand.com/11-website-navigation-best-practices/ [Accessed 19 Nov. 2016]. [28] Bootstrapdocs.com. (2016). Static Top Navbar Example for Bootstrap 3.0.3 Documentation BootstrapDocs. [online] Available at: http://bootstrapdocs.com/v3.0.3/docs/examples/navbar-statictop/ [Accessed 21 Nov. 2016]. [29] W3schools.com. (2016). Bootstrap JS Carousel Reference. [online] Available at: http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp [Accessed 19 Nov. 2016]. [30] Mark Otto, a. (2016). CSS · Bootstrap. [online] Getbootstrap.com. Available at: http://getbootstrap.com/css/#buttons [Accessed 19 Nov. 2016]. [31] Tutorialrepublic.com. (2016). Working with Bootstrap 3 Responsive Layout - Tutorial Republic. [online] Available at: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrapresponsive-layout.php [Accessed 18 Nov. 2016]. [32] Nngroup.com. (2016). Heuristic Evaluation: How-To: Article by Jakob Nielsen. [online] Available at: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/ [Accessed 22 Nov. 2016]. [33] Sceviour, J. (2010). Undergraduate. Worcester Polytechnic Institute. [34] Zeng, L. (2009). Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition) by B. Shneiderman and C. Plaisant. International Journal of Human-Computer Interaction, 25(7), pp.707-708. [35] Nngroup.com. (2016). Banner Blindness: Old and New Findings, 10-year research overview. [online] Available at: https://www.nngroup.com/articles/banner-blindness-old-andnew-findings/ [Accessed 23 Nov. 2016]. [36] Anon, (2016). [online] Available at: http://psy2.ucsd.edu/~mckenzie/Shah%26Oppenheimer2008PsychBull.pdf [Accessed 23 Nov. 2016]. [37] Out of sight out of mind: The role of eye movements in consumer behavior. (2016). .


54