Category: User Interface

Android Design Guidelines

January 12th, 2012

Android Design Guidelines

No soy un entusiasta de Android y posiblemente nunca lo sea, pero si hay algo de lo que soy fanatico, es del diseño de interfaces de usuario, es por eso que las nuevas Android Design Guidelines me resultan muy interesantes, Android contaba ya con unas guiás, pero eran muy limitadas y se centraban mas en el diseño de iconos que en otra cosas (mas importantes), estas nuevas guiás van un paso mas allá, tratando de transmitir la visión que de ahora en mas el equipo de UX de Android quiere imponer tanto a los fabricantes de dispositivos como a los desarrolladores de aplicaciones, explicando como usar y donde aplicar los diferentes patrones de interacción “aprobados”, como así también cuestiones relacionadas con el diseño visual de las apps, que tienen como objetivo unificar el lenguaje visual y terminar con el zoológico en el que se ha convertido el diseño de interfaces de usuario en Android.

El diseño de las guiás esta muy logrado y a pesar de haber leído y analizado muy poco de ellas, he podido comenzar a entender lo que el equipo de UX de Android quiere transmitir a sus usuarios, esperemos que tanto los OEMs como quienes desarrollen aplicaciones para Android empiecen a aplicar estos fundamentos tanto en sus dispositivos como en sus apps y que dejen de reinventar la rueda con paradigmas y diseños que nada tienen que ver con la plataforma o con “mejoras” en la UI (TouchWiz, MotoBlur, Sense) que lo único que agregan son problemas a los usuarios a la hora de actualizar de versión.

Mas información: Android Design Guidelines

Design, User Interface 3 responses

Un vistazo a Boot to Gecko (B2G)

January 7th, 2012

Boot to Gecko, B2G para los amigos, es un proyecto que surgió a mediados de 2011 dentro de la Fundación Mozilla, la idea detrás de este proyecto es la creación de un Sistema Operativo para dispositivos móviles (smartphones, tablets), por ahora se encuentra en una fase exploratoria y de experimentación, en el mismo se están usando y llevando al limite las mas actuales tecnologías y estándares web abiertos. En primera instancia el objetivo de B2G no es crear un producto para luego ser ofrecido a fabricantes OEMs, pero si las cosas marchan bien, todo lo aprendido y desarrollado con B2G puede terminar convirtiéndose en un producto que podrá ser usado por fabricantes es sus dispositivos.

La conexión Android

En esta etapa inicial se están usando algunos componentes comunes con Android en el proyecto (Linux kernel, drivers, libusb y algunos componentes mas), esta decisión tiene como objetivo minimizar el trabajo que puedan llegar a tener los fabricantes de dispositivos que quieran utilizar B2G en los dispositivos Android que actualmente fabrican y venden, la conexión entre Android y B2G se limita a ciertas zonas del core y no pasa de ahí, esto quiere decir que B2G no es compatible con las aplicaciones Android, B2G no usa Dalvik ni ninguna otra tecnología de desarrollo de Android, ya que el modelo de desarrollo que la Fundación Mozilla quiere impulsar se basa en usar APIs Web actuales y futuras.

Show me the code

A diferencia de Tizen, el código de B2G esta disponible en GitHub desde el mismo momento en que fue anunciado, esto permite que el proyecto gane en credibilidad, y permita a gente testear B2G desde etapas muy tempranas del desarrollo.

Actualmente es posible probar B2G en el emulador que viene junto al SDK de Android o bien si tienen un Samsung Galaxy S2 o un Nexus S 4G pueden flashear la imagen en el dispositivo, el proceso no es complicado, aunque requiere de bastante tiempo y algunos cuidados, en mi caso no cuento ni con Galaxy S2 ni con un Nexus S para hacer pruebas, por lo que opte por compilar la versión que corre en el emulador, lamentablemente he fracasado miserablemente las dos veces en las que he intentado compilar B2G, espero hacerme un tiempo pronto para poder encontrar los problemas que me impiden compilarlo y así poder probarlo personalmente para compartir mis impresiones con ustedes.

Gaia

Gaia es el nombre de la phone experience en la que se esta trabajando para ser usada en B2G, por el momento esta todo muy verde, en la wiki del proyecto pueden ver algunos conceptos que han presentado algunos miembros de la comunidad.

Ben's interpretation of description of UX team's ideas

En el siguiente video pueden ver la UI en funcionamiento, lo que ven es una prueba de concepto, por lo que no se puede tomar nada de lo que se ve como definitivo, lo que si resulta extremadamente interesante es la función a la View Page Source que permite ver el código html + css + javascript usado en cada uno de los componentes y aplicaciones usadas por la UI.

Como ven el proyecto pinta interesante y esta avanzando a paso firme, el numero de personas que están trabajando en el mismo paso de 2 o 3 personas a 20, y según algunos rumores, es posible que el próximo mes en el Mobile World Congress 2012 la Fundación Mozilla haga una presentación del proyecto, lo que con seguridad nos permitirá conocer mas acerca del futuro y la dirección que va a ir tomando el proyecto.

Recursos

Si están interesados en el proyecto, a continuación les dejo algunos links con recursos que les serán de utilidad para ir conociendo mas del mismo.

Architecture, User Interface , , , No response

Marko Ahtisaari – Patterns of Human Interaction

September 8th, 2011

Días atrás, en el marco de la Copenhagen Design Week, Marko Ahtisaari (@moia) presento una versión mas evolucionada de la charla que tuvo con Loïc Le Meur en LeWeb 2011, recuerdo que mientras veía esa presentación trataba de imaginar cuales eran esos patterns de los que hablaba y como iban a aplicarlos, con los pequeños indicios y metáforas que usaba para explicarlos.

Pasaron los meses, se presento el N9 y se puedo ver como todo este trabajo conceptual, se hacia realidad, y eso es lo bueno de esta presentación, ya que ahora Marko no tiene la limitación de la confidencialidad que debía guardar en LeWeb 2011, aquí habla con soltura, exponiendo los problemas que querían de resolver, las soluciones a las que llegaron y el porque de estas decisiones de diseño.

Marko Ahtisaari’s speech about ‘Patterns of Human Interaction’ at Copenhagen Design Week from Nokia Danmark on Vimeo.

Design, User Interface , , , No response

Ya tenemos N9, y ahora?

June 21st, 2011

Nokia N9
Y llego el día, Nokia anuncio por fin el N9, su primer dispositivo MeeGo compatible(*) enfocado al publico en general, quiero aprovechar este post, no para hacer una review del evento de presentación, ni para hablar de las features del mismo, sino para aclarar algunos aspectos sobre la personalidad del OS y sobre los recursos y herramientas que ya tenemos disponibles para comenzar a desarrollar.

Harmattan?, que es eso?

MeeGo 1.2 Harmattan es la implementación MeeGo de Nokia, es altamente compatible a nivel de APIs y arquitectura, lo que permitirá fácilmente tomar los cambios que se hagan en el upstream de MeeGo he incorporarlos cuando se vayan liberando, Harmattan trae integrado, Qt 4.7.?, Qt Quick Components 1.0, Qt Mobility 1.2.0, Qt Webkit 2.1.1, PulseAudio y GStreamer para crear aplicaciones y plugins que hagan uso de audio y video, Telepathy-Qt4 para aplicaciones que usen vídeo llamadas y mensajería instantánea y por ultimo la Qt Games API para el desarrollo de juegos basados en OpenGL ES 2.0.

N9 & N950

Como dije al principio, el N9 es el primer dispositivo MeeGo de Nokia para el publico en general, en cambio para los desarrolladores se encuentra disponible el N950, el mismo no puede ser comprado directamente, sino que Nokia se encargara de entregarlos usando un criterio que aun no se ha hecho publico, pero que seguramente incluirá a los Forum Nokia Champions, los miembros del programa Launchpad y a contribuyentes destacados de las comunidades MeeGo, Maemo y Qt.

Developer and Design Tools

Apenas terminada la presentación del Nokia N9, fueron liberadas las herramienta necesarias para comenzar a diseñar y desarrollar aplicaciones para el mismo.

Qt SDK 1.1.2 Update for Meego 1.2 Harmattan

Este update incorpora una actualización menor de Qt Creator y el toolchain para crear aplicaciones compatibles con Meego 1.2 Harmattan, el toolchain aun esta en fase experimental y no están completas aun muchas de sus herramientas y características..

Pueden instalar el SDK haciendo una instalación limpia del mismo usando algunos de los siguientes instaladores:

Platform Online Installer Offline Installer
Windows 15MB 1.7GB
Linux 32bit 23MB 1.0GB
Linux 64bit 23MB 1.1GB
Mac OS-X 12MB 1.0GB

O si ya tienen instalado Qt SDK, pueden actualizarlo utilizando la herramienta SDKMaintenanceTool y seleccionado Harmattan en la sección Experimental

SDKMaintenanceTool

Harmattan UX Guidelines

Se ha habilitado toda una nueva sección en Nokia Developer para hacer lugar a la nuevas Nokia N9 UX Guidelines, la documentación es realmente muy completa, visual e interactiva, tratando de guiarnos en el nuevo paradigma que acompaña la UI del N9, ademas de la documentación en linea, es posible bajar, las guidelines y templates para el diseño de iconos, como así también un toolkit con los graficos de los distintos componentes que forman parte de la UI para ser usados en el prototipado de aplicaciones.

Icons Guidelines

Creo que con estos recursos y estas herramientas tenemos como para entretenernos un buen rato, conociendo y explorando las posibilidades que MeeGo nos puede proveer y como aplicarlas a futuros proyectos.

Announcements, Development, User Interface , , , 1 response

QML 3D

January 4th, 2011

Qt/3D es un conjunto de herramientas y funciones que permiten crear aplicaciones que hagan uso de gráficos 3D, Qt3D extiende las clases del modulo OpenGL de Qt, estas APIs facilitan escribir código que sea fácil de portar entre aplicaciones de escritorio OpenGL y aplicaciones embebidas o mobile OpenGL/ES, por ultimo pero no menos importante, contamos con un binding para utilizar Qt/3D desde QML.

Para comenzar con Qt/3D lo primero que debemos hacer es instalarlo, los pasos a seguir están muy bien explicados aquí, ya sea en Linux, Windows o Mac OS X, no son complicados, aunque puede tomar algo de tiempo el proceso.

¿Que podemos hacer con Qt/3D y QML?

Con Qt/3D podemos crear viewports, asignar luces y cámaras, crear o importar nuestros propios modelos 3D, ya sea usando las figuras básicas incluidas, creando nuestros propios meshes, o usando algún modelo ya existente en formato 3ds o bzs, también podemos crear animaciones y aplicárselas a los modelos, las cámaras y las luces.

Si han trabajado anteriormente con aplicaciones 3D todos estos términos y conceptos les sonaran familiares, lo que les permitirá reutilizar su conocimiento a la vez de que podrán rápidamente ponerse manos a la obra.

Hello World 3D

El siguiente ejemplo muestra de forma simple, algunos de los conceptos y controles que se usan en la mayoría de la aplicaciones 3D, lo primero es crear los imports correspondientes de Qt/3D, luego sigue el Viewport que define la escena 3D, así como su tamaño, las luces y las cámaras a utilizar y sus posiciones.

Luego tenemos un objeto Sphere que tiene un levelOfDetail de 10 el máximo de su tipo y que mide la cantidad de triángulos necesarios para crear el objeto, en este caso 32768, luego alineamos el objeto al eje Y, para terminar aplicándole una textura usando el elemento Effect.

Para finalizar vamos a animar el objeto 3D, para ello usaremos una Rotation3D, a la cual seteamos el eje que queremos animar y luego en una NumberAnimation establecemos la propiedad a animar, en este caso, angle.

import Qt 4.7
import Qt3D 1.0
import Qt3D.Shapes 1.0

Viewport {
    width: 640
    height: 360
    camera: Camera {
        eye: Qt.vector3d(0,0,8)
    }
    Sphere {
        levelOfDetail: 10
        axis: Qt.YAxis
        effect: Effect {
            texture: "images/land_ocean_ice_2048.jpg"
            decal: true
        }
        transform:[
            Rotation3D {
                axis: Qt.vector3d(0,1,0)
                NumberAnimation on angle {
                    running: true
                    loops: Animation.Infinite
                    from: 360
                    to: 0
                    duration: 6000
                }
            }
        ]
    }
}

Qt/3D QML Demo

Con este simple ejemplo pueden darse una idea del poder que nos brinda la combinación Qt/3D y QML, si están interesados en el tema, pueden profundizar mas en el dando un vistazo a la documentación oficial, o ver un repaso rápido de las principales características en la presentación dada por Sarah Smith en los Qt Developers Days 2010.

Development, User Interface , , 3 responses