Interactive solutions - Web Usability

Interactive solutions e-marketing e-business e-gov e-consulting

Practical use of prototypes in designing portals Case study project site Ministry of Finance www.mf.gov.pl

Practical use of prototypes in designing portals Presentation plan 1. Client and order - problem, goals, resources. 2. Prototypes - types and characteristics. 3. The process of project implementation - from the general to the detail. 4. Methods and tools used in project implementation. 5. A brief presentation of the results of the work on the project. 6. Summary: conclusions. 7. Questions to the teacher. www.ideoagency.com

Practical use of prototypes in designing portals Client and order - problem, goals, resources Ministry of Finance the contractor needs to provide portals specifications before executing it; there are ideas, but lack of resources and knowledge to create a project on your own; the need to use fresh insights on problems and concepts, to introduce new solutions; Client:  Problem:   Strategic task: designing a new version of the Ministry of Finance website (mf.gov.pl). Objectives:  Operational task: enhance the transparency, usability and functionality of the user interface (user experience); design of site structure and information architecture in such a way as to reconcile information between two independent services (MF service and information service prepared by MF)   www.ideoagency.com

Practical use of prototypes in designing portals Client and order - problem, goals, resources On the Ministry's side: - 12-person, multidisciplinary team on the Ministry's side - decision makers in the composition of the team - clearly defined final effect that the MF wants to get - prepared preliminary concepts, analysis of the target group, preliminary project "pro-site" - a definite, unrestricted budget for an advisory project Resources: On the agency side: - 3 person team - knowledge, experience, commitment www.ideoagency.com

Practical use of prototypes in designing portals Prototypes - their types and characteristics Prototype - this is a model design; Visual interface mapping; Used to represent the structure / layout of elements, information architecture, functionality, and product behaviour itself. The basic advantage is the ability to quickly modify (relatively cheap). It is a tool used to test usability with users as well as to present the concept of a projected product to a customer. Mock-up’s are drawings / diagrams of the interface and functionality of the product. Prototypes are interactive mock-up’s where you can interact with a product. Mock-up’s and prototypes are most often accompanied by a descriptive document - a functional specification. Definitions: www.ideoagency.com

Practical use of prototypes in designing portals Prototypes - their types and characteristics - Electronic - Paper - HI-Fi - LO-FI - Static - Interactive www.ideoagency.com

Practical use of prototypes in designing portals Paper does not mean noninteractive ... http://www.youtube.com/watch?v=GrV2SZuRPv0 www.ideoagency.com

Practical use of prototypes in designing portals Project implementation process - from the general to the detail STAGE 1 STAGE 2 STAGE 3 STAGE 4 Design prototypes of services and develop functional specifications Analysis of the situation, surroundings, materials and customer needs Service analysis, benchmarking, recommendations, communication strategy Design of service structure and information architecture www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Usability testing of online services or applications can be divided into two main groups: - Usability studies involving the users of the target audience of the product performing the analysis and analysing the results) (and the experts - Usability testing based on expert audit. Both groups contain a number of methods, techniques and research tools that are used in the research process. www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Analysis of the situation, surroundings, materials and customer needs. Service analysis, benchmarking, strategy Steps 1 and 2: recommendations, communication Interview One of the basic methods used in the research process with users. In the case of a project for MF, the method was used first to deepen the knowledge of the client, his preferences and expectations. Qualitative analysis Technique is based on expert judgment. The expert team (at least 2 independent auditors) analyses and evaluates the sites through prism defined before the survey areas, for example: aesthetic senses, layout of elements, functionality, usability, marketing and communication, SEM support analysis. Areas are selected individually for each analysis performed. The report includes an evaluation of solutions, a description of positive and negative elements, and recommendations. www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Analysis of the situation, surroundings, materials and customer needs. Service analysis, benchmarking, strategy Steps 1 and 2: recommendations, communication Heuristic analysis This technique is based on the assessment of the conformity of a given project with utility rules (so called heuristics - the most popular are the 10 heuristics of J. Nielsen). Usually used to detect navigation problems. Data analysis Method used at the end of the research process. It consists in systematizing the results and formulating recommendations necessary to write a report with recommendations. All collected test material is analysed. the conclusions and www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Analysis of the situation, surroundings, materials and customer needs. Service analysis, benchmarking, strategy Steps 1 and 2: recommendations, communication - Report on the usability analysis of the current site - A report containing proposals and recommendations for solutions - A strategic document "Global Assumptions of the MF BIP + Project" including: > Service philosophy: goal, task, persona, etc. > Description of the most important functional and graphic assumptions for the site (recommendations and suggestions) > Description of the key functional assumptions for the content management system (recommendations and suggestions) and work flow > Communication strategy for all MF sites (domain policy, exchange of information between sites, etc.) Results: www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Designing the site structure and information architecture Step 3: www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 3: Designing the site structure and information architecture Research Methods: Interview For this stage, the method was used to use the knowledge of the Client preferences, needs and legal requirements associated with the information posted on the site. This information was confronted with recommendations and targets set in previous steps. Team regarding the expert knowledge, Scenarios of use These are sets of defined tasks that users have to perform during utility tests. Such tests should take into account a number of typical situations for which a service exists. In the case of the project, they were internal tests - without user involvement. They used to evaluate the architecture you created for the clarity of the names of the menu items. www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 3: Design the structure and architecture of the service information Tools: Free MIND Mind Mapping Application. Used for: Create a complete, clickable structure for all sites Applying descriptions of contents of individual elements of the structure Apply descriptions of the functionality and use of the template element    www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 3: Design the structure and architecture of the service information Results: - The clickable structure of all services (9 independent structures) - Editable structure in .MM files (Free MIND application format) - A clickable structure with description: > Content of individual elements of the structure > Assign the functionality and use of the template element www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 3: Design the structure and architecture of the service information And if there was more time ... Treejack application http://www.optimalworkshop.com/treejack.htm www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 4: Design prototypes of services and develop functional specifications www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 4: Design prototypes and development of functional specifications Tools: AXURE RP Axure RP Pro is a great tool for creating all kinds of prototypes, user interfaces, automatically generated application specifications. Us used for prototyping due to the extensive capabilities of advanced interactions and the automated generation of functional specifications based on the prototype. flowcharts, and and site web Made: - Mock clickable services - Functional documentation www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 4: Design prototypes of services and develop functional specifications Tools: DRAW - OpenOffice package It is an OpenOffice vector graphics editor, comparable to the first version of CorelDraw. It enables the user to quickly edit and create both simple and impressive 2D and 3D graphics, including artwork and block diagrams, allowing them to be used in other package components or exported to different graphic formats. Made: - Static mock sites www.ideoagency.com

Practical use of prototypes in designing portals Methods and tools used in the project Step 4: Design prototypes of services and develop functional specifications. Results: - A mock up of 9 independent services reflecting the full structure and template links under each element of the structure: > About 377 MB > About 77 500 files - Functional Specification (315 pages) www.ideoagency.com

Practical use of prototypes in designing portals Some information about the project - curiosities Each of the services available at a separate address: - Ministry of Finance: mf.gov.pl - Tax Administration: ap.gov.pl or administration@apodat.gov.pl - Customs service: sluzbacelna.gov.pl or sc.gov.pl - Treasury Control: ks.gov.pl or kontrolaskarbowa.gov.pl Addresses of individual pages: - Customs Chamber: ic.gov.pl - Customs office: uc.gov.pl - Chamber of Taxes: is.gov.pl - Revenue Office: us.gov.pl - Treasury Control Office: uks.gov.pl Each unit in the unit will have addresses in the form of: - Tax Office in Rzeszow: rzeszow.us.gov.pl - Customs Chamber in Krosno: krosno.ic.gov.pl - Tax Control Office in Rzeszow: rzeszow.uks.gov.pl If there are 2 branches of the Customs Office in Rzeszów: - rzeszow.uc.gov.pl - at this address will be a link-page with all the units of the Customs Office in Rzeszów - addresses of establishments: rzeszow1.uc.gov.pl, rzeszow2.uc.gov.pl www.ideoagency.com

Practical use of prototypes in designing portals Some information about the project - curiosities www.ideoagency.com

Practical use of prototypes in designing portals Summary - conclusions Achieve optimal BIP + Website design in line with business goals and technical requirements,  Matching the number of sites and the scope of their information to the information needs of different user groups,  Refining the interests of different groups within the Ministry of Finance  Eliminate - at the usability and design study stage - most potential problems that might occur during implementation  Formalization of knowledge: gathering, arranging and summarizing existing knowledge about the needs and requirements of the Ministry for the BIP + Site,  Providing key data for further deployment,  Increasing the efficiency of the implementation process.  www.ideoagency.com

Thank you for your attention! Wojciech Szymański w.szymanski@ideo.pl tel.: 500 226 626 www.ideoagency.com

Interactive solutions - Web Usability