БИОНИКА ИНТЕЛЛЕКТА. 2016. №1 (86). С.141‐144                                                                                                                                            ХНУРЭ      141  UDC 621.398. Natalia Gurieva1, Cesar Ivan Garcia Garza2 1University of Guanajuato, Mexico, gurieva.natalia@gmail.com; 2University of Guanajuato, Mexico, cesarigg@gmail.com IMPROVING A QUALITY OF WEBSITE: CONTENT-FIRST DESIGN APPROACH It has been analysed different design and information content factors that have influence to user satisfaction. Content refers to the information of the website, design to the way the content is made available for users. We used information architecture content models and suggest workflow to improve website content quality. CONTENT-FIRST DESIGN, WEBSITE QUALITY, USER CENTERED DESIGN, CONTENT ANALYSIS “Design in the absence of content is just decoration” - Jeffrey Zeldman Introduction Nowadays more and more people are using the features of the new technology to get new knowledge about the world through their electronic devices and World Wide Web. And the way in which they can obtain the information is in the hands of designers. Designers now have the responsibility to make a digital product not only visually attractive but provide a learning experience that means easy to perceive and process information that users are looking for. Usability is basically determining the success of a website [1]. Information architecture, in turn, determines the usability. Users are focusing on tasks and information, not on a structure. Therefore it is so important to get the information architecture right in the design. 1. Evolution of the web design process and content-first design The look and feel of the website was clearly important to the users. Visual appeal and relevant site navigation have strong influence on people’s first impressions of the site. It takes 0.05 seconds for users to form an opinion about the website that determines whether they’ll stay or leave [2]. But focusing only on visual side of design process can become and has become a problem in a way to create a successful website. In [3] it was investigated the user selection of websites. The participants mentioned a number of factors in terms of the sites that they had chosen to explore in more depth. The results indicate that content factors were more important (83%) than design features (17%). Such specific design factors as: clear layout, good navigation aids, interactive features are not so important comparing with content factors: informative content, relevant illustrations, wide variety of covered topics, clear and simple language used in describing trusted or well-liked sites. The favourite sites were usually described in terms of their content. The selection of sites was based on trust. Participants trusted sites that provided informative content on a wide range of relevant topics. Work [2, 3] provides evidence that visual appeal has influence on early decisions to reject or mistrust sites, while credibility and personalization of information content affect to a final selection and trust. Now let's review the traditional web design process. First in a Brief, the client and designer outlines the needs and expectations about the site. After this comes the Research stage where the designer with a client are establishing the schedule, budget, timeline, technical needs, visual style and the structure of the website for the target audience. In fourth place comes the Design process, with many iterations that arise from working with the client. In this phase, the designer works together with the programmer to ensure the implementation of coherent design elements. After the client approves the design drafts, the designer starts work on the look and the feel of the website. To create effective web graphics it should be properly combined efficient use of color and design, compression, transparency. And last the site is ready for Production. After the design and layout of the site is completed, the site goes into the engineering part of the work. The production stage is a point where the actual website is created. The traditional design workflow doesn't take into account the content itself. It takes the info from the interested client and the viewers to be attracted in the future. The content just fill the empty space of a design already prepared and finished. The comparison (see table 1) between the traditional design workflow and a Content-first lies in inclusion of content strategy and early content drafts even before the visual styles or prototypes. In the traditional design this part of the process involves using Lorem Ipsum text to make a final design. In the Content-first strategy the sample text is never used. Table 1. Comparative analysis of traditional workflow and content-first design CONTENT-FIRST DESIGN TRADITIONAL APPROACH 1. Familiarization with problem space 2. Content Strategy 3. Early Content Drafts 4. Visual Style Guide 5. Wireframing and Prototyping with Content 6. Final Design with Content 7. Development 8. Final Content Upload 9. Fine-tuning 1. Familiarization with problem space 2. Visual Style Guide 3. Prototyping 4. Final Design LOREM IPSUM 5. Development 6. Content upload 7. CONFLICT 8. Iterative process of Redesign / Redevelop Natalia Gurieva, Cesar Ivan Garcia Garza      142  The content-first approach means to make quality content, strong structure around which web design revolves. It must be searchable, shareable and the user could understand how to interact with this interface. The visual design process should first centre on information before rules of composition. Today the majority of designers start designing a home page with a style, fonts and colour scheme. Content-first design approach [4-6] starts with the paragraph. Than web design approach focuses on meaningful communication and a great user experience. It goes through content strategy to development, content creation, design, testing and launch. 2. Information architecture for World Wide Web Louis Rosenfeld and Peter Morville [1] were defined the three circles of information architecture such as content, context of use and users. Information architecture is defined as the structural design of information systems, interactive services and user experiences. It is also the organization, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found. So if we act as information architects from the beginning, our content will become a source of understanding and a guide to every decision we need to make about our design. In a basic way, proper for a designer, the content can be separated into a macro level and a micro level. In the macro level we put down all the labels or segments that describe large chunks of the content information. Like a restaurant menu that separates the drinks and the types of dishes to be served. Along with the labels we also put down visual information about the relationships between each of the collections, for example using arrows linking each element with another related to it. The macro level involves the content inside each of the collections, not paragraphs yet but topics inside the elements. In the case of an element called «past works» we can separate the data into years or into clients. These give us more details about our content without the saturation of words. Once we have all of this subtitles we can begin to see relationships between the main topics that we couldn’t see before. To complete this task in an effective and sustainable way we need to know that we are trying to understand how the parts relate to the whole, to this we need to comprehend context. When a person knows the context of the receiving information it is easier separate important from casual information. 2.1. Information Architecture Components Achievements in a field of information technologies open the new possibilities for exponential content growth, which creates a need for innovation in content organization. The informational dimension of websites specifies what information and how should be presented to the users. Below we will describe the tools that could be used to organize the content [8]: 2.1.1 Organization systems help categorize information by subject (some topic, task), audience or chronologically. Normally for a complex site it used multiple organization schemes. An organization scheme defines the shared characteristics of content items and influences the logical grouping of those items. An organization structure defines the types of relationships between content items and groups. Organizing information by subject or topic is one of the most useful and challenging approaches. The schemes oriented on tasks organize content and applications into a collection of processes or functions. These schemes are appropriate when it’s possible to anticipate a limited number of high-priority tasks that users will want to perform. 2.1.2 Labeling systems helping to create a form to represent information. The same web page could have different groups of labels, with each group representing a different item or navigation subsystem. There are two formats of labels that we can find in WWW: textual and iconic. It is very difficult to interpret icons as labels correctly without training or experience that’s why icons normally combined with a text to be more representational of the content they connect to. To design understandable and effective label we need take into account content, users, and context and read a representative sample of site’s content and extract descriptive keywords for each logical part of the information. 2.1.3 Navigation systems help to find a way to browse or move through information, e.g., clicking through a hierarchy. Carefully developed taxonomy that provide context and to allow greater user experience will reduce the chances that users will become lost and leave the website. The foundation of almost all good information architectures is a well-designed hierarchy or taxonomy. It is important to find the balance between breadth (the number of options at each level of the hierarchy) and depth (the number of levels in the hierarchy) in the taxonomy. In extreme cases users have to click through a lot of number of levels to find what they are looking for or select from too many options on the main navigation bar. The process of creating navigation system involves not only information architecture and visual design, but also interaction design and usability engineering. In a case of a complex web content the global, local, and contextual navigation elements exist together, complement each other and provide excellent technical performance and user experience. Also personalization and customization based on a user choice can be used to refine or complement existing navigation systems. 2.1.4 Searching systems describes another form of finding information on a website, executing a search query against an index. Search system allows to search the entire WWW or only through the site-specific content. In case of technical websites the search engine make more sense than in case of service oriented website. The developers should define if it necessary implement searching engine in a website and obviously not like a solution of poorly designed navigation systems or any architectural weaknesses. IMPROVING A QUALITY OF WEBSITE: CONTENT‐FIRST DESIGN APPROACH      143  3. Content-first workflow In case of content-first approach the process of creating a website is a complex process and requires a phased approach. The complexity lays on defining valid descriptive categories for all type of the content and using new mixed multiple media, animation, video, interactivity, mixed hyperlinked structures to provide excellent user experience. First, we need to create Content Inventory. Analyse goals, target audience and success criteria. And finally start producing and make early drafts as soon as possible, since we invest a lot of time on content already so we can speed this part of the process. Once the principles of Information Architecture (described in section 2) are applied, and the content is well structured, the Content Strategy involves how to present the information to the viewer so the message get across the screen and the goals of the site are met. For this purpose the first Content Drafts are essential. In this case there is no dummy text filling up the empty design. This early drafts already contain paragraphs and titles that will be used for the final product. Once the information is presented in a way that will secure the fulfilment of the goals of the site, the next phase it's to design a Visual Style Guide which includes all the tools a designer has at his disposal to create a visually attractive and interesting page design. The Final Design already has content and its ready to develop as soon as finished. The content is already ready, when we solved all problems with titles, logical structure of the content, defined all independent pies of information - articles. All the content now forms the key guideline around which everything else should to align, not only text but all type of the media should be in correct place and presented in a way that makes the content more relevant for the viewer. That means that we were able to create a successful website based on reliability, navigability, efficiency, usefulness, ease of use, accuracy, web appearance. 4. Content strategy: case study of Harvard Business Review Website Content analysis consists in a clear classification and description of your content with purpose to identify potential problems and opportunities expressed in text form or visually. The analysis has done for the Harvard Business Review Page gives a general idea of how the content on the site fulfils its purpose as a large organization. All the legal aspects of the site are carefully attended to. However in the context of content-first design it can help as an example to clarify how the user experience can be improved. Harvard Business Publishing (HBP) was founded in 1994 as a not-for-profit, wholly-owned subsidiary of Harvard University, reporting into Harvard Business School. The mission was to improve the practice of management in a changing world. “What we do here and what we believe is important”. (https://hbr.org/) This website has success because of providing information about the company and assist the subscriber is undeniable, but the real reason the users visit and stay on any site is because of the content itself. Under this concept the site offers a series of articles about a range of topics like Leadership, Strategy, Technology, Innovation, Marketing, among others. We are defined categories and units for analysis based on [5]. Table 2. Analysis of the Harvard Business Review Website adapted from. NAVIGATION INFORMATION Is a navigational bar present on every screen? YES Is the navigation bar consistently located? NO Does the repeated Navigation structure (menus, links in the bottom of page) contain links to: a Customer service policy? YES a Privacy policy? YES a Site map? NO a Search engine? YES the Home page? YES Does the site have a site map? NO PRODUCT/SERVICE INFORMATION Lists of products/services offered by the company YES List of products/services that can be purchased/used at the website YES Prices of Product or Service NO Availability of Product or Service YES Product Description Attributes YES FAQ – list of ‘Frequently asked questions’ NO Static, 2D YES Dynamic, 3D NO New Product Notification NO Product reviews (customer, 3rd party, etc) YES Product endorsement (Celebrity/Expert) NO Staff or service provider profiles/credentials YES PERSONALIZED INFORMATION Customer name appears on website YES Customer preferences tracked/used on site YES Product recommendations/suggestions made YES CUSTOMER SERVICE INFORMATION Customer Service contact info YES Phone YES email YES Customer Service hours NO Indication of customer service online conversation/chat capability NO COMPANY INFORMATION Company logo YES Company contact information YES Phone YES email YES Mail address YES HQ Address YES Company history YES Press Releases NO Company Goal, Mission or Vision NO Celebrity endorsement of company/brand NO MULTIMEDIA Does the site have ‘Entertainment’ content? YES Image YES Game NO Multimedia NO SECURITY Does the site require login with user name and password? NO Does the key/lock display on status bar for insecure pages? NO Natalia Gurieva, Cesar Ivan Garcia Garza      144  The content-first design starts with a organization of information, the Harvard Business Review site accomplish this by organizing its articles under a series of topics. However, once the information is organized the design of a single page fall into the paragraph. The content-first approach gives more importance to the word itself, the message that the page is trying to deliver. So the design cannot start until the written word its completely understood. Following this rules or suggestions will give us very unique looking articles without breaking the overall look and style of the site. The content is not just words, it's about all the possibilities a medium can offer to deliver a message. In the case of the web the multimedia resources can go from images, videos, interactivity to games and the page design itself. The web evolves and grows every passing day and the use of this tools and assets gets easier every day. Although the site has a video section, this segment of the site its completely separated from the main written articles. The content can be best used if the multimedia resources are combined to complement the written information. For this particular website if we want start using a design focused on content we need to read and understand the different central ideas of the text of each article. Once these points are known images, videos or interactive tools can complement them. It's all about the user experience while reading the information. Conclusions Content-first design is basically a change of the perspective and a comeback to the essence of design. When the content is not the fundamental guide for the design work, there always exist problems and repeated iterations that can be solved initially with this manner of work. Investing time, from the very beginning of the job, into familiarization and organization of all the information of the site can make the work more fluent and easiest to create a perfect design. A design is created from the content and for the content. References: 1. Rosenfeld L. Information Architecture: for the web and beyond / L. Rosenfeld, P. Morville, J. Arango. – London: OReilly, 2015 – 486 p. 2. Corritore, C.L. On-line trust: concepts, evolving themes, a model / C.L. Corritore, B. Kracher, S. Wiedenbeck // International Journal of Human-Computer Studies. – 2003. – 58. – Р. 737-758. 3. Sillence, E. Trust and mistrust of online health sites / E. Sillence, et al. // En Proceedings of the SIGCHI conference on Human factors in computing systems. ACM. – 2004. – Р. 663-670. 4. Eelko K. R. E. Huizingh. The content and design of web sites: an empirical study / Eelko K. R. E. Huizingh // Information & Management. – 2000. – 37(3). – Р. 123-134. 5. Hasley, J.P. An Exploratory Study of Website Information Content / J.P. Hasley, D.G. Gregg // Journal of Theoretical and Applied Electronic Commerce Research. ISSN 0718–1876. – 2010. – Vol 5, Issue 3. Р. 27-38. 6. Hay, S. Content- First Design / S. Hay // E-journal A List Apart. – Access mode: http://alistapart.com/blog/post/content-first-design. 7. Lee, J. Trade show websites: An examination of critical websites quality factors and content items / J. Lee, C. Love, T. Han // Journal of Convention & Event Tourism. – 2008. – 9 (1). – Р. 35-59. 8. Neuendorf, K.A. The Content Analysis Guidebook, Sage Publications, London, 2002. Поступила в редколлегю 01.05.2016 УДК 621.398. Улучшние качества веб-сайта: подход, основанный на структурировании информации содержимого сайта / Н.С. Гурьева, И.С. Гарсия Гарза // Бионика интеллекта: науч.- техн. журнал. – 2016. – № 1(86). – С. 141-144. Были проанализированы различные факторы визуальной организации и содержимого веб сайта, которые оказывают влияние на выбор пользователей. Под содержимым понимаем информационное наполнение веб-сайта, а под дизайном - как это содержимое визуализируется и становится доступным для пользователей интернета. Был использован новый подход к организации содержимого для улучшения качества веб-сайта. Табл. 2. Библиогр.: 8 назв. УДК 621.398. Підвищення якості веб-сайту: підхід, оснований на структуруванні информації змісту сайта / Н.С. Гур’єва, І.С. Гарсія Гарза // Біоніка інтелекту: наук.-техн. журнал. – 2016. – № 1(86). – С. 141-144. Були проаналізовані різні фактори візуальної організації та змісту веб-сайта, які впливають на вибір користувачів. Під змістом розуміємо інформаційне наповнення веб-сайту, а під дизайном – яким чином цей зміст візуалізується й стає доступним для користувачів інтернету. Був використаний новий підхід до організації змісту для поліпшення якості веб- сайту. Табл. 2. Бібліогр.: 8 найм.