Presentacion del proyecto

propuesta para la creacion de la web movil de usavi

Sistema creado para el proyecto usavi

USABILIDAD

Podemos definir la usabilidad como la medida en la cual un producto puede ser usado por usuarios específicos para conseguir objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso especificado.

Por efectividad se entenderá la precisión y la plenitud con las que los usuarios alcanzan los objetivos especificados. A esta idea van asociadas la facilidad de aprendizaje (en la medida en que este sea lo más amplio y profundo posible), la tasa de errores del sistema y la facilidad del sistema para ser recordado (que no se olviden las funcionalidades ni sus procedimientos).

Por eficiencia se entenderán los recursos empleados en relación con la precisión y plenitud con que los usuarios alcanzan los objetivos especificados. A esta idea van asociadas la facilidad de aprendizaje (en tanto que supone un coste en tiempo; igualmente, si se requiere un acceso continuo a los mecanismos de ayuda del sistema), la tasa de errores del sistema y la facilidad del sistema para ser recordado (una asimilación inapropiada puede traducirse en errores de usuario).[1]

Otro concepto íntimamente relacionado con la Usabilidad es el de la Accesibilidad, cuyo objetivo es conseguir que el diseño del sitio permita que personas discapacitadas también puedan acceder a sus contenidos. Así mismo, otro requisito para que una web sea accesible es que cualquier persona pueda acceder a sus contenidos independientemente del dispositivo que use (hardware o software).[2]

Aspectos básicos de la usabilidad

A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la usabilidad:

• Facilidad de Aprendizaje
: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la predicibilidad, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.

• Flexibilidad
: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema.

• Robustez
: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.[3]

• Una aproximación al usuario: Usabilidad significa enfocarse en los usuarios. Para desarrollar un producto usable, se tienen que conocer, entender y trabajar con las personas que representan a los usuarios actuales o potenciales del producto.

• Un amplio conocimiento del contexto de uso: Las personas utilizan los productos para incrementar su propia productividad. Un producto se considera fácil de aprender y usar en términos del tiempo que toma el usuario para llevar a cabo su objetivo, el número de pasos que tiene que realizar para ello, y el éxito que tiene en predecir la acción apropiada para llevar a cabo. Para desarrollar productos usables hay que entender los objetivos del usuario, hay que conocer los trabajos y tareas del usuario que el producto automatiza, modifica o embellece.

• El producto ha de satisfacer la necesidades del usuario: Los usuarios son gente ocupada intentando llevar a cabo una tarea. Se va a relacionar usabilidad con productividad y calidad. El hardware y el software son las herramientas que ayudan a la gente ocupada a realizar su trabajo y a disfrutar de su ocio.

• Son los usuarios, y no los diseñadores y los desarrolladores, los que determinan cuando un producto es fácil de usar.[1]

• 
  

•  ¿Por qué es importante la usabilidad?

• ¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender?

• ¿Qué quieren o necesitan hacer los usuarios?

• ¿Cuál es la formación general de los usuarios?

• ¿Cuál es el contexto en el que el usuario está trabajando?

• ¿Qué debe dejarse a la máquina? ¿Qué al usuario?[3]

• Una reducción de los costes de producción: los costes y tiempos de desarrollo totales pueden ser reducidos evitando el sobrediseño y reduciendo el número de cambios posteriores requeridos en el producto.

• Reducción de los costes de mantenimiento y apoyo: los sistemas que son fáciles de usar requieren menos entrenamiento, menos soporte para el usuario y menos mantenimiento.

• Reducción de los costes de uso: los sistemas que mejor se ajustan a las necesidades del usuario mejoran la productividad y la calidad de las acciones y las decisiones. Los sistemas más fáciles de utilizar reducen el esfuerzo (stress) y permiten a los trabajadores manejar una variedad más amplia de tareas. Los sistemas difíciles de usar disminuyen la salud, bienestar y motivación y pueden incrementar el absentismo. Tales sistemas suponen pérdidas en los tiempos de uso y no son explotados en su totalidad en la medida en que el usuario pierde interés en el uso de las características avanzadas del sistema, que en algunos casos podrían no utilizarse nunca.

• Mejora en la calidad del producto: el diseño centrado en el usuario resulta en productos de mayor calidad de uso, más competitivos en un mercado que demanda productos de fácil uso.[1]

Por satisfacción se entenderá la ausencia de incomodidad y la actitud positiva en el uso del producto. Se trata, pues, de un factor subjetivo.

La usabilidad, hace referencia, a la rapidez y facilidad con que las personas llevan cabo sus tareas propias a través del uso del producto objeto de interés, idea que descansa en cuatro puntos:

En informática, la ergonomía está muy relacionada con la accesibilidad,

La ergonomía incluye consideraciones como:

El establecimiento de unos principios de diseño en ingeniería de usabilidad han tenido como consecuencia probada:

 ¿En qué momento se ha de considerar la usabilidad?

La usabilidad debería ser considerada en todo momento, desde el mismo comienzo del proceso de desarrollo hasta las últimas acciones antes de hacer el sistema, producto o servicio disponible al público.

Antes de iniciar el proyecto es esencial tener una idea acerca de las características de los usuarios y de los aspectos del producto de mayor interés y necesidad. Teniendo en cuenta estas consideraciones de forma temprana se ahorra tiempo y dinero, dado que la posterior implementación de nuevos aspectos o nuevas interfaces de usuario implican un enorme esfuerzo adicional. Incluso una vez que el producto está en el mercado se debería preguntar a los usuarios acerca de sus necesidades y actitud respecto del mismo.[1]

Ten Usability Heuristics

by Jakob Nielsen    

These are ten general principles for user interface design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use

Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

I originally developed the heuristics for heuristic evaluation in collaboration with Rolf Molich in 1990 [Molich and Nielsen 1990; Nielsen and Molich 1990]. I since refined the heuristics based on a factor analysis of 249 usability problems [Nielsen 1994a] to derive a set of heuristics with maximum explanatory power, resulting in this revised set of heuristics [Nielsen 1994b].

wireframes

Wireframe

 Un wireframe es un bosquejo de la ubicación de elementos en una pantalla. Dependiendo de la etapa de desarrollo del proyecto, generamos el wireframe básico, que expresa los elementos de una pantalla genérica, aplicable a todo un sistema; wireframe tipo, que expresa la estructura de pantallas de una misma categoría, como canales o páginas terminales; y wireframe detallado, que especifica la composición de páginas específicas (se aplica especialmente a pantallas que implican la realización de acciones). A ellos debe sumarse, para ciertos proyectos en que tan relevante como ubicar los elementos en pantalla es simular el funcionamiento, los wireframes funcionales, que no se limitan a una estructura estática, sino que también permiten la navegación. Un wireframe grafica básicamente: Elementos de navegación: menús, accesos directos e hipervínculos. Elementos de información: contenidos de texto e imágenes. Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar. Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o faqs. Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto.


10 herramientas para crear un wireframe

1. Mockingbird

---

Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application.

It’s a clean and user-friendly interface, with drag and drop UI, interactive page linking, smart text resizing and the ability to easily share mockups with clients or colleagues with a direct link, make Mockingbird one of the best wireframe tools available.

As it’s web-based, it means you can create and share mockups from anywhere. It will be interesting to see just how good Mockingbird is when it comes out of beta and the full version is released.

---

2. Lovely Charts

---

Lovely Charts is an online diagramming application, that allows you to create flowcharts, sitemaps, organization charts and wireframes.

One of the key features is the application’s ability to make assumptions based on the type of diagram you’re drawing, and thus streamline the drawing process. The History management feature is extremely useful, keeping 20 states of your diagram in memory should you wish to go back to an earlier version or undo any changes.

There is a powerful yet simple tool set provided, with an extensive library of crafted symbols to suit most requirements.

---

3. Cacoo

---

Cacoo is a user-friendly online drawing tool that allows you to create a variety of diagrams, such as sitemaps, wireframes and network charts.

The drag and drop UI means creating diagrams is relatively simple; there are also a number of stencils to utilize which could make the process even more efficient. Unlimited Undo is a neat feature with the history of all modifications saved, meaning you can undo right back to the start.

Numerous users can also work on and complete the same diagram simultaneously with the application supporting real-time collaboration.

---

4. Gliffy

---

Gliffy is a web-based application which allows you to create process flow diagrams, org charts, floor plans, business processes, network diagrams, technical drawings, website wireframes, and more. It uses a drag and drop UI with the ability to add boxes, buttons, and lines from the tool shape library to anywhere on the page. Then you can easily add text to create a clear, concise mockup.

You have access to a complete library of shapes and can even import your own images, like logos and backgrounds, to complement your diagrams. You can share and collaborate with anyone, on any platform, in any location, while having the ability to protect and track changes.

The Gliffy API (beta) also makes it possible for developers to add Gliffy diagramming features to their existing web-based applications based on a simple to use framework.

---

5. Lumzy

---

Lumzy is a mockup and prototype creation tool for websites and applications. You can add events to controls, place controls inside other containers and emulate your project with easy page navigation triggered by user actions.

Real-time collaboration is one of the key features, with tools for team editing, a chat engine for deliberating over designs and file versioning. Lumzy is also the only mockup tool with a real image editor built-in — simply grab any picture from your drive and edit it, apply hue, saturation, adjust contrast, and so on, and then add it to your project.

The Pro version is white label and can be integrated into an existing platform or hosted on your own server which may be of interest to companies working with confidential information.

---

6. Mockflow

---

Mockflow is a web app based on the Adobe Flash Platform. It has a clean, minimalistic, organized interface and the editing feature-set set is extensive.

You drag and drop components into a mockup to create the wireframe with the ability to add pages and map out an entire site and it’s structure. The built-in components are extensive, from charts and ads to menus and dropdowns. The ability to upload your own images to use, as well as the option to choose from a set of stickers of common site elements, such as social networking and e-commerce images, make the process of ‘building’ the mockup pretty efficient.

You can talk over the real-time chat and invite others as editors or viewers, depending on the level of editorial power you’d like each member to have. Editors have the ability to make changes to the wireframes, while viewers are limited to reviewing and commenting.

The MockStore is a wonderful add-on service that provides third party components and templates shared by the user community.

---

7. Pencil Project

---

The Pencil Project is an open source tool for making diagrams and GUI prototyping that everyone can use. It’s available as a Firefox add-on or as a standalone application (Linux and Windows only). Pencil essentially installs an entire drawing application into your Firefox browser and gives you the ability to display, save, and load an external canvas, together with a palette of shapes.

Of interest is the Stencil Generator which allows you to create your own collection of stencil shapes by pointing the generator to a folder of image files. The Clipart tool lets you search through the library at openclipart.org and directly drop the images right into your Pencil document. Pencil also supports the use of external objects; both raster and vector images can be imported using copy-paste or drag and drop.

The final prototype can be exported as a PNG image, web page, OpenOffice file, PDF or DOC file. If you’re a dedicated Firefox user, then Pencil could be an essential tool for visually expressing conceptual ideas on the fly. It even won the Mozilla award for ‘Best New Add-On’ in 2008.

---

8. SimpleDiagrams

---

SimpleDiagrams is a small desktop application that helps you express your ideas quickly and simply with just enough functionality to describe a thought or capture a process. It’s built on the Adobe AIR platform, so will run smoothly on Mac, Windows and Linux.

You can drag, drop and size symbols from libraries, add photos and post-notes and export your diagram to PNG.

It may not be a fully-fledged diagramming tool, but because SimpleDiagrams is so basic, you will be creating wireframes or diagrams within minutes.

---

9. Denim

---

Denim is a free multi-platform desktop app that supports sketching and allows design at various refinement levels. It’s an efficient tool for early stage brainstorming and wireframing.

Two main features within Denim are Components, which enable you to create widgets that can be reused and Conditionals, which allow you to create transitions between pages depending on the end-users’ actions, resulting in a more interactive experience.

It’s a simple yet effective tool and allows for easy annotation using editing gestures.

---

10. Website Wireframe

---

Website Wireframe is a very simple web-based tool for building wireframes in a matter of minutes. A link to view the wireframe can be sent through email, instant message, or mobile phone, and then the wireframe can be easily updated based on feedback, discussion, ideas and suggestions.

The key to this tool is the simplicity of usage, lending itself to speed, both in wireframe creation and sharing. It is free to register and use and works in most modern web browsers.

It may not be particularly sophisticated, however it’s simplicity and efficiency is perfect for those who want an alternative to tools with a higher learning curve.