Pencil

Herramienta de prototipado de código abierto multiplataforma

Si la austeridad también ha llegado a su ciudad, como el camión del tapicero, quizá guste de conocer esta interesante herramienta de prototipado de baja fidelidad totalmente gratuita y disponible para Linux, Windows y Mac.

Pencil no es nada nuevo ni bohemio ni cool, de hecho la última release es de Septiembre de 2013 y no da la impresión de que el proyecto siga vivo, pero no podemos negar que como herramienta es bastante útil si quieres empezar a trastear con el diseño de pantallas desde ya, además es gratis, es libre y el resto depende de tu imaginación (como siempre). 

Pencil Project nació en 2008 y se distribuye bajo términos de licencia GPL version 2, y es una herramienta muy sencilla que permite hacer cosas tan básicas como:

  • Dibujar diagramas
  • Sketchear GUIs basadas en componentes predefinidos
  • Relacionar documentos de un proyecto mediante enlaces de contenido
  • Exportar los documentos como imágenes o un documento HTML (aunque éste sea bastante precario)
  • Definir tus propia librería de componentes (muy útil para equipos de diseño)

Sobre éste último punto he publicado un pequeño artículor en el que explico cómo hacerlo.  Aquí os dejo el enlace por si os pica la curiosidad: Cómo crear una librería de recursos con Pencil.

Dispositivos móviles ¿Quién necesita un formulario?

Uno de los múltiples motivos por los que la experiencia móvil se ha ido popularizando con los años es por las enormes posibilidades que permite la portabilidad de ciertas capacidades: hay quién dice que la mejor cámara de fotos es la que uno lleva encima.

Si bien es cierto que cuando se trata la necesidad de incluir formularios en un dispositivo móvil en seguida nos vienen a la mente mil y una razones para no hacerlo: se requiere mucho tiempo y puede resultar muy frustrante para los usuarios el uso de teclados reducidos para escritura. Pero ¿quién necesita un formulario?

Si los dispositivos móviles conectados a internet dan acceso a multitud de servicios en cualquier momento  ¿por qué no aprovechar sus capacidades únicas para saltarse las barreras que imponen los formularios estáticos accedidos desde el escritorio?

Los gestos pueden ser un buen mecanismo de entrada de datos así como el reconocimiento de voz cada vez más mejorado en los dispositivos Google Nexus y Siri para iOS. Cada vez nos encontramos más el uso de reconocimiento de la localización del dispositivo o el de la cámara para reconocer objetos (p.e. Google Goggles) los cuales proporcionan a los usuarios un acceso directo a la información. Es en ese momento cuando el dispositivo móvil se convierte realmente en una herramienta que te proporciona información en lugar de en un sistema que demanda y pregunta al usuario.

Cuando estemos diseñando para móviles una buena estrategia es plantear alternativas a los formularios a través del uso de las capacidades para capturar la información de una forma más simple. Aquí os dejo una lista que el autor Luke Wroblewski compartió en el evento UI16 (2011).

Capacidades

  • Posicionamiento y movimiento (acelerómetros)
  • Giroscopio
  • Detección de localización
  • Sensores multi táctil
  • Orientación: dirección de un compás digital
  • Vídeo e imagen: captura desde la cámara
  • Cámaras duales: delantera y trasera
  • Audio: entrada de micrófono, salida de altavoces
  • Conexión entre dispositivos: Bluetooth
  • Proximidad: acercamiento del dispositivo a objetos físicos
  • Luz ambiental: detección de ambiente claro/oscuro
  • NFC: Near Field Communication a través de lectores RFID

Recursos compartidos con Balsamiq Mockups for Desktop

Como sabéis y comentamos hace unas semanas en este vídeo de introducción, Balsamiq permite la configuración de un directorio compartido para los recursos (assets) de todos tus proyectos  a través del directorio  denominado “Account assets”.

Generalmente, cada proyecto mantiene una estructura de dos niveles como se muestra en la captura.

image

Sin necesidad de configuración, los símbolos guardados bajo el directorio “assets” son accesibles bajo la categoría “Project assets”. De forma adicional a este directorio, Balsamiq permite configurar otro directorio para ser compartido no sólo entre tus proyectos, sino incluso entre varios usuarios si éste se encuentra en un directorio en red.

Para ponerlo en funcionamiento tendremos que seguir los siguientes pasos:

  1. Crear un directorio llamado “Balsamiq Mockups” en la ubicación deseada, p.e. “C:Documents And SettingsAdministratorDesktopBalsamiq Mockups”
  2. Crear un subdirectorio bajo “Balsamiq Mockups” llamado “assets”
  3. Crear un archivo con un editor de texto con el nombre BalsamiqMockups.cfg (asegúrate que es texto plano) y guardarlo en el directorio local de datos.
  4. Editar el archivo y añadir el siguiente contenido

<config><documentsPath> C:Documents And SettingsAdministratorDesktop </documentsPath><config>

Existen otras opciones de configuración que pueden añadirse a este archivo, como, por ejemplo, elegir el código de color exacto para los elementos resaltados o activos, la tipografía o el uso de cookies.

Con el uso de recursos compartidos por fin podremos reutilizar elementos generados entre varios miembros de un equipo incluso si éste está deslocalizado. Otro uso interesante es la creación de una librería propia de patrones, muy útil para mantener un mismo vocabulario visual entre varios proyectos.

Windows 8 UX – “Primeras impresiones”

Una de las mejores cosas que se enfatizan en las guías de estilo de Microsoft para diseñar aplicaciones Windows 8 es la importancia que se debe considerar con la “primera impresión” de nuestra solución.

Sugieren varias formas de conseguirlo teniendo en cuenta el concepto y arquitectura de las aplicaciones dentro de su nueva metáfora visual (conocida también como Modern UI).

image

Tiles y Notificaciones

Los tiles son la cara de tu aplicación y hace resaltar tu identidad de marca. Las notificaciones relevantes siempre devolverán al usuario a tu aplicación.

Si tenemos en cuenta que “tu tile” debe ser distinguible entre una buena lista de tiles es importante mantenerlo lo más simple y nítido posible. No sabemos si con el rumor de “abandonar” la actual pantalla de inicio de Windows 8, los tiles van a perder fuerza. En cualquier caso, espero que nunca se retracten de los Live Tiles, seguramente su propuesta más original.

Pantalla de bienvenida (Splash Screen)

Expresa la personalidad y debe cargar tan rápido como sea posible.

Existe cierta confusión entre la resolución que las guías recomienden y el resultado final del logo. La imagen usada en la splash debe tener una resolución 620×300 píxels, lo que no quiere decir que el logo deba ajustarse 100% a esa resolución. En cualquier caso existe total libertad para aprovechar cada pixel como se quiera.

Primer uso (first launch)

Darle al usuario contenidos de ejemplos para que sepa cómo usar la aplicación.

Teniendo en cuenta que cualquier barra de herramientas podría estar oculta por defecto y que los contenidos mandan, los ejemplos de contenidos son un buen punto de enganche.

Sin embargo no estoy muy convencida de que esto pueda aplicarse a aplicaciones en las que el usuario debe generar contenidos o, por ejemplo, en juegos. En este caso, seguiría el patrón de gratificación instantánea y para ello tendríamos que conseguir que el usuario hiciera o interactuara con la aplicación fácil y rápidamente y ser compensado por ello, y no relegarlo simplemente a que viera o fuese espectador.

Página de inicio (Home page)

Usa el contenido justo para mostrar para qué está hecha tu aplicación.

Si tu aplicación está totalmente orientada a contenidos éste debe ser el punto donde ofrecer esa muestra que pertenecería al primer nivel de jerarquía de la arquitectura de la información. Por supuesto, no os olvidéis de que existe el Semantic Zoom y si los contenidos no hablan suficiente de vuestra estructura el usuario siempre podrá hacer “pinch” (zoom out) y verlo todo un poco más claro (a partir de su etiquetado).

La combinación de todos estos elementos refuerzan, como decíamos, el empeño en generar una buena impresión y dejar claro por qué tu aplicación es la mejor para el propósito que se diseña. Aunque están fuertemente ligados al modo de funcionamiento de una app para Windows 8 son extrapolables a cualquier otro estándar, no hay más que ver cómo han evolucionado los patrones en otras plataformas en los que los contenidos recuperan su reinado.

Facebook-like EMR (Part I)

Facebook-like EMR (Part II)

In 2008, Bob Watcher wrote an article called “Why the medical record needs to become more like Facebook” where lay down the idea of having the social network as the mirror for a new Electronic Medical Record (EMR) User Experience (UX). A collaboration and social framework to provide better care to patients while keeping useful information between physicians and nurses.

He was not the only one; already in 2007, Robert Nadler established a high-level model remarking out the core functionalities that it could have EMR software. However, it was not intended to get only a Facebook-like UI but a real social site to connect Patients and Doctors.

The idea is not new; many authors – doctors and software engineers – have continued talking about this idea with no final proposal.

After the latest Facebook re-design I don’t know if those authors would still maintain the same opinion about this topic, anyway I do think it’s a very very interesting approach even assuming any usability issue that Facebook could have. So here are my two cents.

A Design Proposal

Users & Profiles

If a clinical solution would need to completely work like Facebook, every user (physician, nurse, etc.) would have their own user porfile. However, the analysis of having a EMR looking like Facebook timeline suggests that the profile page is planned to show only patient data. Why would we need to see a nurse profile, then?

Following this idea, the Home page would be reserved for (primary) users and the Profile pages for showing the electronic medical records of patients (secondary users).

A possible extension would be allowing the access to the EMRz by Patients, so they could also check their own EMR online by themselves. In this case, we could consider them as secondary users not as part of the network community, but just to contribute to their own medical history and keep a direct communication between them and they’re care providers.

Social network

Social activity will be generated by clinicians considering patient-centred documentation based on Profiles. As suggested before, there are two main social groups: the one created by clinical staff only, and the one where patients and clinicians would interact.

Social interaction is the key point of this proposal and it underpins the main usaibility goals:

Profiles: Patient Timeline

Facebook profile pages have been re-design to look more like a real timeline where any important event is chronologically displayed. In this example, right side will be used to show a summary of the most important event types associated to the patient medical history like Health issues, Allergies, Diagnosis, Requests and Results, Progress Notes, Prescriptions and any other clinical subject. On the left side, any user (doctor, nurse and the patient) could add comments anytime.

Privacy

Privacy should have a strong presence here, since having restricted-access data is a valuable feature that doctors, nurses and patients. They all will need to control the visibility of the data they entered in a fashionable way. Although setting permission in Facebook is pretty hard and unclear to get control about which type of users see which type of patient data or personal comments is still a requirement. This could be done seeing users by their role, applications as domains, and groups as teams. Still, patients are a special kind of user which will have direct access to his own record.

Utility

There’s a weak line which separates the Facebook familiarity advantage into the most confusing UI for a productivity tool and it’s called “enjoyment”. The idea of this Facebook-like EMR was to promote some typical behavioural patter of users when interacting with a social network like:

  • Safe Exploration
  • Microbreaks
  • Habituation
  • News Stream
  • Other people’s advice
  • Personal Recommendations

However, there are some other existing activities that the clinical staff usually does and this UI is not oriented to

  • Changes in Midstream
  • Keyboard only
  • Streamlined repetition activities

Nevertheless, the app integration approach of Facebook suggest me to become a good exercise to imitate outside the UX field.

Content

The content is not about what people think or feels, but what physicians and nurses make, diagnose, treat or provide to patients. The language of the user interface should be adapted to the purpose in order to ease the kind of content expected to be entered.

Data entry is one of the most challenging features in healthcare apps. The smarter the application, the quicker the data is entered. The whole phylosiphy of Facebook puttin atention into every single details should be adopted also to create content such as vital signs, prescriptions, a soap note, or a discharge letter. As an example, below there’s a list of content with different natures which depends on the context of use, the user role and the business model.

  • Task Oriented
    • Notifications
    • Lists of patients
    • Lists of tasks
    • Scheduled activities
    • Events
  • Content Oriented
    • Patient history summary
    • Patient evolution
    • Patient current health status and diagnosis
    • Clinical decisions
    • Procedures
  • Process Oriented
    • Treatments
    • Protocol based care planning
    • Admissions and discharge
    • Scheduling
    • Follow-up

What’s next

This is only the first part of the exercise. For the second part I’ll try more mock-ups and the high-fidelity prototype adding more details also in the content used in this sketch to get a better idea about how crazy (or not) is the proposal of being inspired by Facebook to create an electronic medical record.

There’s also an important gap where Facebook has no direct answer: clinical safety and episode-related information. We’ll talk about it also for the next post.

By now, how realistic do you think it is?