4.1 CHAPTER 1 INTRODUCTION
Contents
1. Rate This a gt Map Sat Ter Earth Lon Men lt st Vy Da HIY ote Phu Cat Tay Lc Thuan Thanh Phu H a Thuan H a Phu HO Xu Kim Long a H Phu Thuan 4 wa Phu Nhu n ste Phuong Nauyaa Hue Duc E Ga Hue l Ga An C Etau Phuoc Vinh hk a An Cyu PARANA An POWERED BY Thuy Xu i 2012 Google oogle Map data 2012 Google Terms of Use View Larger Map Figure 4 35 Mapping page Research page screen If tourists are willing to participate in our survey they will be directed to reseach page as shown in Figure 4 36 Here we offer 10 questions These questions were designed as a separate block Each block of questions including content question 4 answer choices In the four answer choices we provide closed answering T1 options agree disagree no opinion the users can click to select one of three and an open answer The other answers or suggestions will be entered by text into the first blank cell In the end of each question the surveyor clicks on the button vote The results will be linked directly to our system admin gt m po S m Navigation v Users Evaluation for PTgSp System Interacting with video and audio was easy Agree O Disagree No opinion O Other Navigating through the map was easy Agree Disagree No opinion O Other Figure 4 36 Research page 4 7 Responsive web design Responsive web design often abbreviated to RWD is an appr2. 0 Night Destination To Visit Hue Within one day trip would offer visitors stunning natural views as well as wealth of flora Leave a Reply and fauna species in Bach Ma National Park i j lt Your email address will not be published which is regarded as among the wettest Required fields areidtked locations throughout Vietnam Tour program Gathering at hotel to start off one and a half hour drive to Bach Ma National Park at 08 30 Email AM It is a great chance to capture the views of tranquil local settings and lives nearby along the road Website Upon arriving the park Do Quyen Waterfall is selected as the first destination Observing silver water running into the bright red of water rail flowers is great therapy to escape from scoring heat especially during the summer in the Central region For hours of leisure we would walk for a while to a really nice restaurant to sample local cuisine delicacies About the Author Back to Top T Figure 4 34 Information page 76 Mapping page screen When tourists need to locate for the place they are traveling they can come up with mapping page of PTgSp system as illustrated in Figure 4 35 Not only to locate the tourist location mapping function also guide the next route for tourists as their request provide the necessary information to route help the users to observe next destination under 3D model via google earth ra OBS
3. 7 i bee eee Figure 4 46QR code labels in the clear space design The QR code labels are arranged placed or paste in the visible location within the nearest place with information object but at the same time they do not ruin the landscape of the travel destination as illustrated in Figure 4 47 If we placed it too far from the information object it likely causes confusion and tourists difficult to identify what is a QR code of the information object But we put it too close it will 90 affect tourism destination Finding out the best limit is the problem that we always pay attention during the QR code label designing _ Figure 4 47Example for the place that put the QR code column Like the QR code label layout in the process of content strategy building we always try to create an environment of diverse information Especially the variety forms of information text image video etc It helps to understand the information diversely and easily Sometimes tourists must not to read the text but they can feel the beauty of tourist destinations through photographs photos that can tell stories Travel information by text is brief and made it more concise and comprehensive It does not take too much time as you only want to know about the destination It makes us capture information quickly and in accordance with the majority of tourist objects 91 Information architecture of website is made simply Only specifically new content
4. U S revenue from services for food and beverage in hotels accounted for 30 of total revenues So information on cuisine culture which promotes the image of the unique of cuisine art in Hue 1s the fifth unique option that web site hueidea presents Final unique in Hue Uniques is the unique in natural scenes In modern industrial society the need is closed to the natural environment enjoying the natural beauties has always been a great demand Being favor bestowed by nature Hue has a beautiful and diversity natural landscape system Tourists can explore the tropical forest can visit the beauty of the white sandy beaches on the blue beaches enjoy the beauty of the Huong river with blue water located in the heart of the city They can aim at the sunset on the lagoon and floating aquatic vegetation We can be said that natural tourism resource is one of the rare and unique in Hue All travel information is encoded by the QR code The QR code is located in the tourist destination will bring the convenience of tourist information searching through PT gSpsystem In addition with these online users they can easily access information through the search function of this system as shown in Figure 4 20 below Figure 4 20Searching function of PT gSp system 61 Navigation systems of mobile website design is focused on fitting the small screen of the mobile phone space In Figure 4 21 shows button functions navigation is arranged in the first are
5. been designed to satisfy these factors users will get much interesting experience through interaction with it Tourism resources will become more attractive It contributes to increasethe experiences needs of tourists and it will promote the development of tourism destination where this system will be applied 6 ORIENTED OF PTGsp SVs Tey lt content strategy information architecture usability information location functionality responsive web design user interface Figure 4 4The orientation factors in PTgSp system design Vietnam Tourism goverment 2012 Kh ch qu c t d n Vi t Nam thang 11 va 11 thang nim 2012 Online Available http www vietnamtourism gov vn index php cat 202037 amp itemid 12305 27 November 2012 47 4 2 The design and place of QR codes s information In tourist destinations there are many types of tourism objects TO which need to provide information for tourists so putting QR code labels should be designed in accordance with TO The match will be shown in four factors the first one is the QR code labels are organized in a reasonable position not affect TO and easy to see The second one is material QR code label must be consistent with TO not to ruin TO and to be sustainable with environmental change climate The third is the appropriate size QR code label with the space where TO appear not be too big to affect TO and not be too small making user
6. is selected to become the main category Simple category structure makes easy for users to navigate and access the content Navigation of our web is attended specially Beside navigation list which is placed at the top we were extra to add the button Back to Top to help mobile phone users can return to the top page easily and quickly To match the usability of many tourists of different nationalities we plan to provide more language choices for tourists With this language function we hope to create an information space to be close to many potential tourist groups The function for information sharing through social networks or comment of information is located just below the content information makes it easy for users to manipulate From which information has also been widely introduced opportunities been promoted more and more By that way information becomes richer RWD is exploited as an element that raises the value of using for web of PTgSp system Web interface is layout fix well with multiple electronic devices desktops laptops tablet PCs or smart phone The change of order and designed format makes the great convenience for travelers as they learn information in a variety of different digital devices To create the awareness about good intuitive for the users we use the division method for information block in a grid design style for full screen page Therefore the information on the layout web guides the visuality of the users
7. six most unique symbolsto introduce to the tourists These are festivals architectural monuments traditional music traditional fashion food and landscape The third that we introduce is Service information In our third category we divided into five sub categories include the famous tours hotels and resorts restaurants 59 systems shopping sites transportations The forth one is the function directory guide tourist routes tourist map on Google map platform The fifthcategory is the part about travelling guide We guide our customers to use the system and answer any questions about travel information for the users The sixth category we provide contacts information to the administrator for the users In the age of information overload we can see that users always have tendency to look for simple and consistent source for needs Therefore selectingthe information limiting the complexity of the information Structure 1s always our top focus We hope to bring users one friendly and unforgettablesystem The unforgotten of users is built on the foundation of carefully chosen then we make the most special and unique information So we chose label for the main information introduced of Hue culture is Hue Unique The first unique one is festivals that are held in Hue Hue was selected as the city of festivals in Vietnam Every year there are more than tenlarge and small domestic and international festivals that are organized in Hue So
8. so as to prevent them from displaying outside their containing element PTgSp system s web uses HTMLS5 framework with its fluid grids based on percentage dimensions The fluid grid does not mean infinite fluid scaling PT gSp system s web had 7 versions for different browser widths 320px 480px 480px 320px 600px 800px 800px 600px 768px 1024px 1024px 768px 1024px as shown in Figure 4 39 4 45 respectively Between those widths our content can keep 7 fixed layouts For each layout we specially focus on arranging information so that logical content important information is always in an important position prominent easily accessible and aesthetic satisfaction Figure 4 39 4 45illustrate the modified location of information block in accordance with 7 fixed layouts 82 The Nine Tripod Cauldrons of Nguye Figure 4 39Layout for Mobile portrait 320x480 83 Pe i S a E ta Q s gt O Fo amp Pe She ee E Fo a Ta EA N ON BA er ie aA Figure 4 40Layout for Mobile landscape 480x320 84 Hue Unique im Bronze Vesels December 13th 2012 by admin Hue Royal Antique December 14th 2012 by odmian F st in bronze are Palace and in some other places Figure 4 41 Layout forSmall tablet portrait 600x800 85 Mapping How To Contact Us Q 25 C Feels like 25 C Partly Cloudy Today 26 C 21 C Ao dai Festival Hue Festival 2012 Bei
9. this is the first unique culture that we need to introduce to the tourists Hue possesses a historical relic of the last feudal dynasty in Vietnam The architectures hadrecognized by United Nations Educational Scientific and Cultural Organization means UNESCO by register in the World Heritage List list of special global valueof a cultural or natural property to be protected for the benefit of humanity in 1994 So architectural monuments in Hue that we chosen is the second unique in the referral information to visitors Along with the physical cultural heritage intangible cultural heritage of Hue ancient capital is extremely rich and has a high cultural value In the year 2003 UNESCO has recognized Hue s royal court music as Masterpieces of the Oral and Intangible humanity Traditional music is our third unique selection that we introduced Along with the development of a cultural capital for a long period in Hue jit exist many specialfashion styles That s the costume is different from other regions throughout our country as well as others around the world Showing about Hue traditional fashion is the forth typical that we look towards 60 In development of tourism culinary culturalhas always played a very important role Economists have summarized that as GDP increased by 1 revenues of services to serve food and beverages increased by 1 5 For tourism the cost of food and beverages in the total cost of the trip ranges from 18 20 In the
10. 3 across and 1 5 tall This is a decorative collar accessory that can be fband that slides onto your dog s 3 4 collar E LABEL Tariana lt a se oa Soar wP ee em me e Figure 4 10QR code label for TO group 2 in the real location 5I Group 3 OR code label have no text content which is pasted on one wood seating and is put near the area needs to be introduced a history story as shown in Figure 4 11 For a number of intangible factors such as the historical story about a king a queen or a princess etc the characters are usually placed in the formal positions and away from the tourist areas are allowed to enter So we choose to provide design information wooden columns The top of the column we will stick QR code label This column has average height is 0 75m The column was designed by head square the side of which is 0 2m On body column in Figure 4 11 we use the decoration under mood of the buildings in The Imperial City 0 20m Figure 4 11The design model of QR code label for TO group 3 The information column is designed on two criteria satisfied firstly the overall harmony with architecture and space secondly it is visual but not ruin the tourism destination image as shown in Figure 4 12 52 3 Group 4 OR code label have no text content which is print on formica surface put near big antiques Figure 4 13 illustrates the design for the large outdoor antiques weselect print optio
11. 8 below such as Pinterest Facebook Twitter Flickr Vimeo YouTube etc Figure 4 18The social website was linked from hueidea com 58 4 4 Information architecture As we know to have good information architecture for a system that provides information we need the rational and creative cooperation between the organization labeling search and navigation systems Therefore when building PTgSpsystems information organization is done according to two criteria being easy to make a more usability and being impressive to create excitement and unforgettable for tourists In Figure 4 19 shows information content on the website is divided into six categories ae gal Hue Unique Service Mapping How To Contact Us Research Festivals Tour Architecture Hotels amp Resorts Restaurant Traditional music Shopping Traditional fashion Food Transportation NEL AUT ell are RET S Figure 4 19 The site map of hueidea com website The first is Home this section introduces the most recent posts Inside the first category contains online research content The second one introduces the Hue Unique to the tourists In here we have 6 sub categories that introducesix special characteristics of culture in the old capital Hue Hue city is always recognized as a land with many plentiful cultural symbols by Vietnamese and international tourists Therefore in order to create a simple and impressive information system we only chosethe
12. CHAPTER 4 SYSTEM DESIGN AND USER INTERFACE 4 1 Prototype system description Today tourism is an essential activity of post modern people and post modern society Wherefore tourism has become an important way in use of spare time and leisure time of the people With the advanced level of education and culture awareness the improved tourism solvency reduced travel costs demand of tourism has become so popular The tourism industry has been constantly evolving In parallel with the development of tourism industry there is the development of tourism resources As we see people often travel for the purpose of tourism resources that do not appear on their permanent accommodation If people want to use tourism resources in another tourist destination they must find out those travel information firstly But tourism information is not always clear Tourists are not usually easily accessed tourist information This problem stems from a fundamental reason that tourism resource 1s a huge block with plenty of different kinds of information The reasonable systematization of information is a necessity need in providing travel information Besides increasing the ability to access information quickly and accurately to the personal information needs of each tourist has always been important issues of the tourism industry in the era of information overload To introduce a new solution to overcome the above situation this thesis design a system named Personalise
13. UI components In the following section we will go through the main GWUI components and layout of the prototype s website Layout All page content throughout the site is placed in a single column PT gSp s web also provides ways to create grid based layouts and we use thiswayfor all of the site Header Top bar On top of each page is the header as shown in Figure 4 24 on the top of the header is the language list Tourists can easily select the appropriate language to learn about information Below the language list is the logo of hueidea of prototype Next is the navigation button and search box Figure 4 24 Header of prototype website In Figure 4 25 navigation buttonwill guide users to the categorythat they are finding and can redirect access to other categories 67 Home Hue Unique Service Mapping How To Research Figure 4 25 The navigation list The main purpose of the prototype is providing a solution for tourist information it helps tourists to find travel information quickly and efficiently so we select to organize search box in the header main section of web interface as illustrated in Figure 4 25 below Footer The footer is at the bottom of every page and contains copyright text as shown in Figure 4 26 The main categorylist that is mentioned in a page footer section can help users to navigate information to other categorys easily The end of the footer of the page is Back to Top b
14. a of the page content to help the users to select the category content information easily Figure 4 21 Navigation Button of hueidea com mobile website After click on navigation button tourists will have access to six directories of websites as shown in Figure 4 22 including Home Hue Unique Service Mapping How To Research 62 Y Navigation Home Hue Unique Service Mapping How To Research Figure 4 22Navigation Table of hueidea com mobile website Besides the fixed nature of length when viewing web pages on a mobile phone sometimes makes it difficult for users to return to the top page We have overcome this inconvenience by the Back to Top function In Figure 4 23 Back to Top button appearsat two places the end of each content page and web interface After reading all information content the users can return to the top page easily Or after viewing more functions under the article until the end of the web interface the users can return to the top page easily This is asmart navigation function of website system the PT gSpproject 63 Khai Dinh Royal Tomb May 18th 2012 by admin Traditional fashion Hue Unique Traditional music Mapping Uncategorized Natural landscape a ir Truong Tien bridge May 18th 2012 by admin Hue Unique Service How To Mapping Festivals Food Hotels Natural landscape Shopping Back to Top Back to Top Figure 4 23The Back to Top fu
15. ch is suitable for each location The design plans for each group was designed as follows Group 1 OR code label have no text content which is pasted near small antiques area as shown in Figure 4 7 change the way you go Figure 4 7The design model of QR code label for TO group 1 49 With small antiques in the Figure 4 8 shown that we put the QR code label next to the antiques This arrangement helps tourists can easily find the QR code to connect and find out relevant information a A ORCODE LABE Figure 4 8QR code label for TO group 1 in the real location Group 2 QR code label have text content which is pasted on glass box The QR code label of this group is designed by our rectangular mold landscape as shown in Figure 4 9 The color of the title is designed to change according to the classification category on the web system The color codes are in compliance with the dominant color on the entire PTgSp system This can also be seen as a factor for identity recognition of our information systems Besides in order to create favorable conditions for the visual identity we always arrange QR code label on the right hand side bottom corner of the glass case containing TO as shown in Figure 4 10 50 Anfield Plaid Eco Coat This dapper little bow tie is made entirely from remenant plaid fabric same as the Anfield Piaid Eco Coat This listing is for the SMALL bow The bow measures approximately
16. d Tourist guides on Smart phones PT gSp This system is formed on the combination of mobile website technology and QR code technology In the proposed model of the system the QR codes was connected with travel information be pasted at all locations where need to provide information With the advantage of the free Wi Fi on the entire Hue city in early 2013 travelers use personal smart phone can scan the QR code immediately PTgSp system will automatically connect with information that tourists need with PTgSp s mobile website Structure of PIT gSpsystemis modeledinFigure4 below 43 Internet QR code aa Web server amp database Smart phone Figure 4 1 Personalised Tourist guides on Smart phones system The whole travel information on this website is a system of diverse data types good quality and be organized logically In addition this information will be streamlined beautiful and friendly designed with user experience Through systems PTgSp tourists will quickly get the information in accordance with their needs on a smart phone In order to support introduce and guide tourists using PTgSp system at the information center of every tourist destinations we will offer a poster as shown in Figure 4 2 tointroducing the PTgSp system This poster will instruct how to use the system and how to install QR code scanning for smart phone 44 PTGSPSYS EM the innovation solution for personalist tourist guide on smar
17. en in Tam Giang Cau Hai lagoon are the poor and disadvantaged community and have unstable life Their livelihood entirely depends on the lagoon exploiting aquatic products processing aquatic products and i i 5 The main information have unstable life Their livelihood entirety depends on the lagoon exploiting aquatic products processing aquatic products and aquatic product services Nowadays the natural resources reduce less and less the weather is changeable the lagoon environment is more and more polluted the lagoon population increases more and more quickly Therefore they have caused many difficulties and increased the insecurity about livelinood for fishermen around the lagoon About the Author admin 6 The author Related Posts Hue Royal Antique Bronze Vesels b 7 Related information Royal clothes in the The Nine Tripod Nguyen Dynasty gt Cauldrons of Nguyen Dynasty Back to Top T 8 Back to Top button 72 16 C _ Feels like 1 Moderate rain 1 9 Weather information Today eae 20 C 16 C T Tomorrow Wednesday Thursday ater 21 19 21 20 Recent Posts BACH MA NATIONAL PARK TOUR December 29th by admin PTgSp System December 29th by admin 1 1 10 Recent information Hue Royal Antique December 14th by admin Hue Imperial City Architecture December 13th by admin re we Recent Comments Hai
18. er 2 in The Top Web Design Trends for 2012 by net magazine Although PTgSp system is built to operate the target device that is mobile phone to add more value to this system we also pay attention to designing for PTgSp s web has interface to be suitable for all intelligent devices nowaday So we have applied the technology solution RWD for PTgSp s website system When visitors move from using desktops computer to using smart phone in Figure 4 38 PTgSp s web interface will automatically switch to accommodate for resolution image size and scripting abilities gt net Magazine 2012 15 top web design and development trends for 2012 Online Available http www netmagazine com features 15 top web design and development trends 2012 27 November 2012 80 Responsive Web Design 1024 1024 600 480 Desk tops Bele Smart Phones Tialieen E Figure 4 38 Responsive Web design for hueidea com We uses CSS3 media queries to adapt the layout to the viewing environment along with fluid proportion based grids and flexible images Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on most commonly the width of the browser The fluid grid calls for page element sizing to be in relative units like percentages rather than absolute units 81 like pixels or points Flexible images are also sized in relative units up to 100
19. in area order most often focus on big more than little direction order usually to be looked before being looked down that are script before by us Besides the area of information is highlighted by system of colors On PT gSp system web we do not use too many bright colors to make a simple vision for the users Our web is used a neutral grayish color for 85 interface In Figure 4 48 shows the remaining 15 is used 5 colors in impressionism color palettefor these factors need the high visual focus as button category list function bars etc 92 FROM THE IMPRESSIONISM COLOR PALETTE R 69 G 39 B 105 452769 R 50 G 16 B 30 32101E R 195 G 105 B 40 C36928 R 24 G 96 B 132 186084 R 88 G 90 B 64 585A40 THE NEUTRAL GRAYISH COLOR PALETTE R 35 G 31 B 32 231F20 R 51G 51B 51 333333 R 120 G 119 B 121 787779 R 220 G 219 B 219 DBDBDB Ri 255 G 255 B 255 FFFFFF Figure 4 48The colors system in PT gSp
20. inks for sharing the information to the social network the list of category Additional information is always located at the bottom of the page by default 75 Information page screen If tourists scan the QR code at the travel destination the QR code will link to the information page as shown in Figure 4 34 related directly to the tourism destination Sothe information page contains just information of the destination Beside the written content information page also provides a compelling visual images and sometimes video Following the main information content is the introduction to the author To help users can easily navigate to relevant information we arranged random related posts below the main content Below related posts users can comment on articles through social networks Facebook Yahoo AQLetc Then the users can access the other comments of other users or can comment without going through any social networks by providing an email address and user name Related Posts LNR S Royal clothes in the Nguyen Dynasty Comment using v E Faced ok soci y Yahoo aor Hotmail 2 Responses to BACH MA NATIONAL PARK TOUR Published on December BACH MA NATIONAL PARK TOUR Hai says Rate This Toi chua boa gio den Hue nhung toi quyet dinh se du lich Hue trong mot ngay gan nhat Rates 40 140 i Cam on nhung thong tin bo ich cua ban Departure Hue Return To Hue Duration 1 Day
21. ion on the home screen The next block will be hidden in the order page below Following the brief introduction to the information block is the extra information The extra information is starting with weather information recent posts recent comments archives hyperlinks for sharing the information to the social network and the list of category At the end of main information and footers are layout button Back to the Top so that the user can navigate to the top of the page 74 continued a sm 235 C The Nine Tripod Cauldrons of Nguy an i IVIIS Today p bs Hue Unique _ 19 C 17 C T PIs i Ke Tomorrow Tuesday Wednesday TONGE i ae 5S ae a aa 20 16 20 19 21 20 Recent Posts Hue Royal Antique De ber 14th 2012 by admi Gri iag BACH MA NATIONAL PARK TOUR Long An Palace Hue Royal Antique Museum at 3 Le December 29th by admin Truc Street in Hue City will reopen on January Recent Comments Hai on BACH MA NATIONAL PARK TOUR December 2012 May 2012 Hue Imperial City Architecture December 13th 2012 by admin For nearly 400 years 1558 1945 Hue was the metropolis for nine king dynasties which was first established since Tran dynasty Back to Top T Back to Top T Figure 4 33Home screen of PT gSp s web As the home page all other pages on the web of PTgSp system also have extra information about the weather recent posts recent comments archives hyperl
22. m in this website Let s join our survey to build the complete PTgSp system Please choose the answer which you consider to be the most reasonable or give us your opinion Thank you hue idea com is website of PTgSp system Website was built with different languages will help you to access information easier if you are a foreign tour ist In addition to providing tourism information systems about Hue city through writing images and sounds the website also has many other func tions such as weather travel guide map etc Let s experience PTgSp now Figure 4 2Posterthat is referred system and user manual for PTgSp System To be able to serve the needs to find out information for the tourists do nothave smart phones we propose to set up tablet table systems as shown in Figure 4 3 in every information center of the tourist destinations These tablets always display the website of PTgSp system Tourists can find tourist information on this site before they begin their travel itinerary 45 Figure 4 3The tablet table introduces website under plans of PT gSp system Website of our system is named hueidea Because this is a solution derived from a variety of new ideas for promoting tourism image introduced tourist information enhance the exploitation of tourism resources in Hue city hueidea website was born is derived from the desire to bring an idea superior technology to contribute to the development of Hue City i
23. n general and tourism development in this particular locality hueideawebsite is a core component of PTgSp system not only fit for the mobile phone but the interface also design the website is flexible automatically change on many platforms The main thing that has helped website hueidea can serve the information needs for all cyber tourist all over the world want to know about Hue Beside English language system website hueideawas translated 6 different languages by specialist editors including English French Japanese Chinese Korean and Thai tourists from these countries is the highest proportion of international 46 tourists to Vietnam Language diversity can facilitate information search on PTgSp system is easy for groups of potential tourists who travel to Vietnam With the purpose of introducing tourists a perfect system of travel guides solution we especially focus on seven factors in system design include the design and place of QR codes s information the planning development and management of informational content content strategy the combination of organization labeling search and navigation systems within websites information architecture the function of website the user interface responsive web design and usability To create a sense of satisfaction excitement with PT gSp system our research team focus on strategic goals through seven basic design elements as illustrated in Figure 4 4 When PTgSp system has
24. nction of website hueidea com 4 5 Functionality In former times to access the point information to tourists they used other forms of old media These old media often exists in forms such as tourist guides guidebooks information plate at tourism destination etc With the old way to learn about information there are many restrictions The most obvious restriction isthe term of the volume of information storage capacity of the old media is always lower than other forms of digital media The next restriction is the low ability in finding without the help of digital media tourists will take a lot of time to find and access any information in tourist destination The updatedand highly interactive functionsdo notexistvirtually in the old form of the tourist information giving Based on the development of new technologies PIT gSpsystem has overcome the limitations of the old information givingform and has addedsome new functions that are more modern and it has broughtmore conveniencefor tourists PT gSp system is built with basic function and innovation as follows 64 The whole data on tourist information was stored in the web server with large storage capacity That gives visitors a treasure amount of data All information is systematized by computer engineering technologies so information should be navigated clearly and logically Besides tourists can search for information by using the search function of the web system Or through
25. nformation in PTgSp system is planned from many collaboration forms such as text image video and audio Therefore the information content that is introduced to touristsis always vivid and attractive For example in Figure 4 17 withone introductory article about Imperial Night in Hue Festival 2012 we combined the introduction of just the text video and images 56 EWI te Fifer a v Video Imperial Night Published on May 27th 2012 by admin Rate This imperial Night is the program displaying the splendor of the Imperial city with madarins soldiers eunuchs concubines and daily activities behind the gate of palaces A variety of royal arts such as ceremonial court music royal dancing classical drama Hue 1 Texts folksongs royal poems and so forth will be showcased The royal culinary art together with royal and folk games will also be introduced in programs of royal banquets Hue s tea ceremony Poem Recital performances of poem calligraphy on lanterns Hue traditional lucky tag and the game Dau Ho These activities will be revived on the background of romantic lights of torches and candles in association with exhibitions and installation arts 1 1 Images gallery Figure 4 17Information about Imperial Night in Festival Hue 2012 on website hueidea com 57 Information in PTgSp system is control through admin editor and contributor Information content is always checked
26. ng grac ee Soy Sunday 24 20 25 21 24 22 Hue Unique Hue Unique ze Figure 4 42Layout forSmall tablet landscape 800x600 Home Hue Unique AETA Si 86 Service Mapping Bie ads Hue Court Music Nha Nhac Cung Dinh Hue Hue Unique Hue Royal Antique December 14th 2012 by odimin Hue Royal Antique Truc Street in Hue on january Hue Unique Figure 4 43Layout forTablet portrait 768x1024 Hue Unique Bronze Vesels December 13th 2012 by odmin How To Contact Us 25 C Partly Cloudy 26 C 21 C 24 20 2 21 24 22 BACH MA NATIONAL PARK TOUR December 29th by eamin PTgSp System December 29th by odmian Users Evaluation for PTgSp System December 17th by eden Hue Royal Antique December 14th by admin Hue Imperial City Architecture December 13 h by adain 87 r m paS m Home Service Mapping How To Contact Us 25 C Feels like 25 C 7 Partly Cloudy E NS TT Today 26 C 21 C Tomorrow Saturday Sunday a ee 24 20 25 24 24 22 Recent Posts i BACH MA NATIONAL PARK Hue Royal Antique Bronze Vesels oie December 14th 2012 by odmin December 13th 2012 by odmin December 29th by odmin Long An Palace Hue Royal Antique These v als castin bronze are Museum at 3 Truc Street in Hue DO the Can Chanh PTgSp System City will reopen on January lace and in some other place
27. ns QR code on Formica materials The QR code label in this group is high production cost investment but this is to ensure sustainability for all outdoor climate conditions Also QR code label for the four groups are often larger than the QR code label in the first group to suit large sized artifacts as shown in Figure 4 14 53 FORMICA Figure 4 13The design model of QR code label for TO group 4 QR CODE LABEL Figure 4 14QR code label for TO group 4 in the real location 54 Group 5 QR code label have no text content which is pasted on information board Now at the tourist destinations in Hue it has existed for a number of information plates With these restrictions on the size and material this information plate has yet to meet the information needs of customers In order to provide more needed information add more vivid illustrations we have carried out additional information through links with PTgSp system with QR code label on the information panel as shown in Figure 4 15 below In the Figure 4 16 shows QR labels are compact simple does not affect the overall aesthetic layout of the current information paltes Y gt ot SS 4t w y 4 A AP f i N NNN A Vied nA LH See a nG QR CODE LABEL Figure 4 15QR code label for TO group 5 in the real location 55 Figure 4 16The design model of QR code label for TO group 5 4 3 Content strategy The content of i
28. oach to web design in which a site is crafted to provide an optimal viewing experience easy 78 reading and navigation with a minimum of resizing panning and scrolling across a wide range of devices from desktop computer monitors to mobile phones or other small electronic devices RWD is one of the designed elements on which we specifically focus when designing website hueidea com In the past as designing a website for mobile phone web designers typically write a separate version for mobile phone it is an independent system of web sites on desktopscomputer Websfor mobile often havegraphics display resolutions fixed and suitable with some type of smart phone But with the rapid growth of electronic devices such as Desktops Laptops Tablets Smart phone etc and alsothe various electronic brands such as Apple Samsung HTC Sony Blackberry etc it becomes more complex about graphics display resolutions as shown in Figure 4 37for web designers Device Horizntal Vertical Diagonal Resolution pixels pixels inches in ppi 480 35 163 iPhone 4S iPad iPad 2 Samsung Galaxy Note 10 1 Microsoft Surface RT Google Nexus 10 Figure 4 37The most significant devices screen characteristic 79 Web designer cannot write many systems in order to each system appropriate for each type of equipment or of each manufacturer RWD has become a preeminent solution to overcome this problem Responsive Web Design was listed as numb
29. on BACH MANATIONAL PARK TOUR 11 Recent comments admin on BACH MA NATIONAL PARK TOUR December 2012 May 2012 12 Archives by time 13 Hyperlink 14 Copyright sign Hue Unique Service Mapping How To Research Contact Us 15 The list of category Back to Top Tf 16 Back to Top button Figure 4 32Picture about the arrangement of information structure on website All the basic components of user interface that are arranged in blocks on mobile website correspond to the order of the importance of the content On hueideawebsite of PT gSp system we have four basic types of page home pages information page mapping page research page Depending on the page category that the information blocks layout on screens satisfy these above requirements Home page screen When visitors scan the QR code introduced about PTgSp system they will land at the home screen in Figure 4 33 The home page screen will start with the function of language option Following that tourists can see an overview of the web if 73 they scroll down to the bottom of the page or they can go to the category through the navigation list or can use the search function through the search box The main information of the home page will provide theimage blocks and text which are summary of all the content on the web they are displayed in order from the newest tooldest We selected two blocks to display the latest informat
30. rs can find their tourist group through the exchange of information they also have the most updated and latest information which relating to Vietnam Tourism goverment 2012 Kh ch qu c t d n Vi t Nam thang 11 va 11 thang nim 2012 Online Available http www vietnamtourism gov vn index php cat 202037 amp itemid 12305 27 November 2012 65 their tour So the tourism information on PTgSp s web will more and more plentiful based on the contributions of users With positioning and guiding function for tourist route through Google Map tourists can find by themselves the shortest route and their routeinformation Besides tourists can also travel through cyber space on the system associated with Google 3D map They will have an overview of tourism destination before making a decision to the actual location Weather is always an important factor for the travel itinerary so our weather information is linked from the Weather Center of Vietnam s National system With the weather forecast functions users can know the weather information at present and 3 days after Online survey on users reviews for PTgSp system is an important function which programmed on the web of PT gSp system With this function we recorded the data and feedback from users to the system Through the regular studies we have many opportunities to develop PT gSpsystem more complete day by day We have built PT gSp system based on criteria navigate to
31. s December 29th by odmin Figure 4 44Layout forTablet landscape 1024x768 88 Mapping How To Contact Us Search gt 25 C Feels like 25 C Sunny Today oa 26 C 21 C War Tomorrow Saturday Sunday r m in _ o aaa 24 20 25 21 24 22 Imperial Night Imp Night is the program displaying tt of the Imperial cit ns soldiers eunuchs concubines vities behind th Recent Posts Hue Royal Antique December 14th 2012 by odmin An Palace Hue Royal Antique Museum at 3 Street in Hue City will reopen on January Hue Unique a Se Bronze Vesels December 13th 2012 by admin ze are positioned in front of the Can Chanh Palace and in some other places inside BACH MA NATIONAL PARK TOUR December 29th by admin PTgSp System December 29th by admin Users Evaluation for PTgSp System December 17th by admin Hue Royal Antique December 14th by admin Figure 4 45Layout for Desktops 1024 89 4 8 Usability Although usability is the last key designed factor that we mention it has always been important criteria that existed in the entire process of designing PT gSp system Starting from designing QR code labels the labels are designed simple clear space covers QR code always obey the compliance standards as shown in Figure 4 46 the materials of label paper is always white to help electronic equipments can scan the QR code easily change the way you go 1
32. s difficult to see The forth one is information on the QR code label should be clear eye catching style and synchronized with the entire design the whole PT gSp system QR code label is designed in two basic forms the first is thelabelsdo not accompany text contents the second one is thelabels have text content together with QR code as shown in Figure 4 5 and Figure 4 6 respectively change the way you go Figure 4 5QR code label does not have text content 48 Anfield Plaid Eco Coat This dapper little bow tie is made entirely from remenant plaid fabric same as the Anfield Plaid Eco Coat This listing is for the SMALL bow The bow measures approximately 3 across and 1 5 tall This is a decorative collar accessory that can be fhand that slides onto your dog s 3 4 collar Figure 4 6Thelabels have text content together with QR code In terms of research topics we focus on a solution to design and place of QR codes s information in area Hue s Imperial Enclosure We use the method to classify by the size of the TO So the QR code label was appropriate with each TO Group 1 Small antiques Group 2 Antiques which have glass box to preserve Group 3 History story Group 4 Big antiques Group 5 Campus of structure or building The size of the QR label in each group is not fixed We always conduct actual research before making a QR code label size whi
33. t phones in Hue city Vietnam WHAT IS PTgSp SYSTEM z Mobile services support various situations in everyday life and with the m Tt m spread of mobile internet and better equipped mobile devices mobile ser vices are becoming increasingly important especially in tourism Our person a alised tourist guides on Smart phones PTgSp system based on the connec tion of HTML5 website and QR codes provide an integrated solution for m Fu searching destination information in Hue city Vietnam PTgSp prototype that l hueidea com applies an advanced markup language for mobile web to provide a friendly tourism information structure for personalised tourists The prototype has three main functionalities recommendation tourism information the faster accessibility of destination information by QR Codes technique online assessing for survey the opinion of users about prototype HOW TO USE Let s use your smart phone or other electronic device tablet ipod etc to experience of this system JAI Observe the QR code label in tourism location where or what you need to know tourism information J14 Scan the QR code with a QR code scanning software if you have it or free download for your electronic device via the following link www hueidea com howto DE Travel information displayed on your electronic equipment welcome to PTgSp system s information Step 4 Find out more information and other functions of the syste
34. the QR code at the travel destination the access to information becomes easier At website of this system visitors can choose the appropriate languageformat The languagestake from the results of research and statistics of Vietnam government travel agency We have chosen sevennational languagesfrom seven of most tourists to Vietnam including English French Japan China South Korea and Thailand Overcoming the limitations of the monotony of information just with simple text or an image we especially focus on image systems and videosystems which have high aesthetic quality The graphic designmethods can highlight the beauty of the tourist destination Besides with the backward mobile website as users want to see the motion picture video or audio they need to download the Adobe Flash plug in or any other software to play video audio But with PTgSp system we programed for browsing to motion pictures video or audio simply Tourists do not need to download the Adobe Flash plug in or any other software to play video audio PT gSp s website can simultaneous be used on desktop laptops tablet PCs and smart phones It 1s added new function automatically transfer computer interface to mobile interface based on one system Compared to the past write two separate systems for computer web and mobile web this is a step forward Users can share all their travel informations on PTgSp s web through social networks single travele
35. the advanced functions with the aim of bringing a solution of looking for the best travel information for tourists in Hue Viet Nam 4 6 User interface The user interface is the space where interaction between humans and machines occurs The concept of user interface is one large concept that is related to many different scientific and technical professions But in this thesis we use the concept user interface in the way that is related to computer science and human computer interaction majors the user interface of a program refers to the graphical textual and auditory information the program presents to the user about control sequences to control the program We focus ongraphical web user interfaces GWUI design GWUI accept input and provide output by generating web pages which are transmitted via the Internet and viewed by the user using a web browser program GWUI allows users to interact with electronic devices using images rather than text commands GWUIs can be used in computers and hand held devices also 66 GWUI design is about how to design the interface that is the bridge between a system and a user In general the goal of GWUI design is to allow the user to reach his her goal with the minimum amount of resistance or frustration If we use a well designed interface the user do not think about what he she is doing but is rather able to achieve what he she wanted without thinking explicitly about how to do it 4 6 1 GW
36. the reliability and quality before being posted to the system All the information published and used on PTgSpsystem comes from two main sources the first one is offered from good quality materials by Hue s Cultural and Tourist Institutions the second source is from the contribution by users through the comment of the user onhueidea com website The information from the first source is written to be short simple be easy to understand This criterion is consistent with the need to find out information of the tourists when visiting many places at the same time The information from the first source accounts for 81 of the amount of information that we referred 129 160 articles count on 01 12 2012 The second source of information that we selected and used is mainly in short term information for example weather season the latest price etc The reference information is used about 19 of all the information we selected and used 31 160 contributions count on 1 12 2012 As we expected we will develop the content of the information according to our time schedule Planning route 1s two years Number of posted articles in the entire systems is expected to be 1 000 posts by the end of year 2014 if the system is actually used and developed Beside making the strategy development information content of quantity and quality we also plan to spread the information by sharing information content through the popular social networking sites in Figure 4 1
37. used in mobile applications to provide navigation and to present hierarchically organized information PTgSp website Supports numerous types of lists view variations in the Figure 4 31such asbasic nestled and time list We use list views on multiple places on the site to structure content and to group buttons Y Navigation Home Hue Unique Service Mapping How To Research December 2012 May 2012 70 Sharing information through Prototype was easy J Agree Disagree No opinion Other Figure 4 31Picture showing different types of lists 4 6 2 Screens We have focused on the design plan for the structure of web pages so that it can not only brought information but also give the easy access for users Information is classified into group the most important information in a page will be located in the central location the first after the header that is the most accessible the largest area the most impressive about color and impression image as we can see in Figure 4 32 The less important information on the extent will be arranged in order from top to bottom So the more important information as close to the header page the barrel less important information close to the footer page 71 1 Language list 2 Logo 3 Navigation list and Search box 4 The main picture of information Social work with fishermen community in Tam Giang Cau Hai lagoon Rate This Fisherm
38. utton With the pages contain a lot of content if the users want to return to the top page they will be uncomfortable as if scrolling back up So we have designed Back to Top button at the footer Users just have to click on this button instead of scrolling up to the first page Hue Unique Service Mapping How To Research Contact Us Back to Top T Figure 4 26 The footer of website hueidea com 68 Button Figure 4 27 4 28 and 4 30 show the buttons are mostly used for navigation Figure 4 29 shows the buttons be coded as hyperlinks The buttons in hueidea website are big graphically they might even seem over dimensioned but the size of them makes them easy to tap As we know today 2012 most of the smart phones using touch technology If these buttons 1s designed too small they will be hard with finger tapping So we provide the large design which has enough stimulation to tap the button by fingers We used a neutral grayish color for all interfaces only the color system of the buttons 1s programming to change colors specific to the main categorys as shown in Figure 4 29 and 4 30 This way to use color makes the buttons always visual attract be recognizable easily across the whole interface Figure 4 27Navigation button T Figure 4 28Language button Figure 4 29 Linking button 69 Back to Top f Figure 4 30Back to Top button in the purple color group Lists List views or menu are heavily
Download Pdf Manuals
Related Search