Interactive solutions - Web Usability.pdf

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

www.ideoagency.com 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; Strategic task:  designing a new version of the Ministry of Finance website (mf.gov.pl). 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) Client: Problem: Objectives:

www.ideoagency.com Practical use of prototypes in designing portals 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 On the agency side: - 3 person team - knowledge, experience, commitment Client and order - problem, goals, resources

www.ideoagency.com Practical use of prototypes in designing portals Definitions: 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. Prototypes - their types and characteristics

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

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 Analysis of the situation, surroundings, materials and customer needs STAGE 2 Service analysis, benchmarking, recommendations, communication strategy STAGE 3 Design of service structure and information architecture STAGE 4 Design prototypes of services and develop functional specifications

www.ideoagency.com Practical use of prototypes in designing portals 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 (and the experts performing the analysis and analysing the results) - Usability testing based on expert audit. Both groups contain a number of methods, techniques and research tools that are used in the research process. Methods and tools used in the project

www.ideoagency.com Practical use of prototypes in designing portals 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. Methods and tools used in the project Analysis of the situation, surroundings, materials and customer needs. Service analysis, benchmarking, recommendations, communication strategy Steps 1 and 2:

www.ideoagency.com Practical use of prototypes in designing portals 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 the conclusions and recommendations necessary to write a report with recommendations. All collected test material is analysed. Methods and tools used in the project Analysis of the situation, surroundings, materials and customer needs. Service analysis, benchmarking, recommendations, communication strategy Steps 1 and 2:

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, recommendations, communication strategy Steps 1 and 2: Results: - 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.)

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

www.ideoagency.com Practical use of prototypes in designing portals Interview For this stage, the method was used to use the knowledge of the Client Team regarding the preferences, needs and legal requirements associated with the information posted on the site. This information was confronted with expert knowledge, recommendations and targets set in previous steps. 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. Methods and tools used in the project Designing the site structure and information architectureStep 3: Research Methods:

www.ideoagency.com Practical use of prototypes in designing portals 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 Methods and tools used in the project Design the structure and architecture of the service informationStep 3:

www.ideoagency.com Practical use of prototypes in designing portals Methods and tools used in the project Design the structure and architecture of the service informationStep 3: - 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 Results:

www.ideoagency.com Practical use of prototypes in designing portals Methods and tools used in the project Design the structure and architecture of the service informationStep 3: 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 Design prototypes of services and develop functional specificationsStep 4:

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

www.ideoagency.com Practical use of prototypes in designing portals 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 Methods and tools used in the project Design prototypes of services and develop functional specificationsStep 4:

www.ideoagency.com Practical use of prototypes in designing portals - 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) Methods and tools used in the project Design prototypes of services and develop functional specifications.Step 4: Results:

www.ideoagency.com Practical use of prototypes in designing portals 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 Some information about the project - curiosities

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 Some information about the project - curiosities