Primadesk is a tool designed for individuals that use several web accounts. The application allows them to manage their personal information, communications, file storage, social networks, and other cloud services from one place.

Giro54 was responsible for the interaction design and visual interface.
Read more about the Primadesk Project.

Solaris Brasil lanza su nuevo sitio actualizando la imagen corporativa en la web, unificando la región bajo un mismo discurso y vinculando los sitios de Argentina y Brasil entre sí.

Trabajamos junto a Solaris para simplificar el acceso a los productos por medio de una navegción organizada y herramientas interactivas que incluyen tablas de especificaciones técnicas y la posibilidad de comparar productos.

La estructura del contenido se planificó para actualizar y alinear la organización de los productos en la web de acuerdo con las necesidades de los equipos comerciales. También se agruparon las últimas novedades y casos de éxito promocionándolos en la página principal, e integrando la información de varias secciones del sitio presentando a los clientes información relacionada y relevante.

RedPanal, el sitio de composición musical colaborativa, inicia una etapa de rediseño y renovación con el objetivo de mejorar la experiencia de uso simplificando la creación colectiva de música.

El sitio permite subir pistas, loops, samples, y canciones, componer sobre ellos, remixarlos, crear sesiones, y licenciarlos bajo Creative Commons y Safe Creative. Si bien el sitio es principalmente una red social para músicos, también es una herramienta para publicistas, técnicos de sonido y amantes de la música, porque permite navegar por etiquetas, descubrir nuevos sonidos y descargar canciones.

RedPanal nos convoca para colaborar en el proyecto rediseñando las interacciones e integrando funcionalidades de microblogging. El desarrollo de backend está a cargo de la cooperativa de software libre, Gcoop.

Giro54 joined forces with the Tenaris team to lay out the roll out plan and schedule. Giro54 was also responsible for the new Information Architecture and Content Strategy, which involved, trainings for editors on writing for the web, search engine optimization, and definition of guidelines.

A printable version of the paper is available in Adobe Reader® (PDF) format: Gestures: Pushing the Boundaries of Touch-based Interfaces

Abstract

Touchscreens have become a key component of digital devices, from mobile phones to laptop PCs. Their characteristics enable new interactions –referred to as “gestures”– that extend beyond the traditional manipulation of elements on screen with a mouse and a keyboard. They also raise is-sues on how these interactions affect the design of digital products such as applications and websites, that must simultaneously serve people using operating system metaphors from different generations and present new challenges on how to standardize and develop best practices and design patterns.

Author Keywords

Interaction techniques, gestures, touchscreen, post-WIMP interfaces, mobile devices, touch.

ACM Classification Keywords

H.5.2 [Information Interfaces and Presentation]: User Interfaces — Interaction styles

Introduction

The introduction and proliferation of touch-screen based devices like the iPhone, the iPod Touch and –to a lesser extent– the touch-enabled PCs, is causing a revolution in HCI –especially in Interaction Design– not seen since the development of the mouse-driven Graphical User Interface (GUI) at Xerox PARC that moved us beyond the com-mind-line interface more than thirty-five years ago [3].

Interactions born with the WIMP (window, icon, menu, pointing device) paradigm such as point, click, double-click, select, drag & drop have been the standard since the early eighties and are as prevalent on the first Macintosh System (Figure 1) as on the last incarnation of Windows (Figure 2).

However, the physical keyboard and mouse are beginning to give place to the hands and fingers as ubiquitous input devices, thus creating a whole new world of interactions called “gestures” [6].

Gestures

In touch-based interactions, a gesture is a quick movement of one or more fingers on a screen that the computer interprets as a command, rather than as a mouse movement, writing, or drawing [9].

Gestures are made up of two components: a “chord” or combination of digits that touch the surface, and a motion associated with a chord that triggers an action (Figure 3) [1].

The multi-touch (multiple simultaneous contact points) interface enables a greater sense of direct manipulation. Using gestures, people feel a greater affinity for, and sense of control over, the objects they see on screen, because they do not use any intermediate device (such as a mouse) to manipulate them [4].

The combination of a multi-touch interface and gestures makes new interactions possible. As Jacob, et al [5] explain “in the [iPhone’s] photo-graph viewing application, zoom functions that would traditionally be accessed through combo boxes, button presses, or other widgets are instead activated by pinching and stretching the display with two fingers using the illusion of a pliable rubber surface”.

The number of chord-motion combinations can get quite large, so much so that Apple Inc. filed a patent for a “gesture dictionary” to potentially help users to learn and remember the meaning of numerous gestures and take full advantage of a multi-touch gesture language.

Among the most popular gestures are: tap, drag, flick, pinch and swipe.

Tap

Tap is the simplest and most commonly used gesture. It is equivalent to selecting or clicking with a mouse. It is performed by tapping on the screen with just one finger (usually the index). It is used to select, open or activate an object such as an icon, a button or an item on a list.

Drag

A Drag consists of placing a finger over an object on the screen and sliding it slowly to a different area. It is used to scroll or pan a screen. For example, if a user needs to see information that is not currently on the screen, she can place a finger on the screen and drag it up, down, left or right.

Flick

Placing a finger and sliding it quickly across the screen is called a Flick. It’s like a faster version of Drag and is used to perform a quick scroll or to move an object on or off the screen.

Pinch

This gesture requires two fingers (usually the thumb and the index finger). It is used to scale objects by placing both fingers on screen and bringing them together (to reduce the size of the object) or by sliding them apart (to increase its size).

Swipe

Place a finger on an item and swipe it across the screen (left or right) to perform a Swipe. It is used as a shortcut to reveal the Delete button on the iPhone, for example when doing it on an email message. In the Firefox browser, swiping left will take you to the previous page (the same as the Back button).

Challenges of the Fourth-Generation UIs

Andries van Dam [8] calls the “post-WIMP” user interfaces that “don’t use menus, forms, or tool-bars, but rely on, for example, gesture and speech recognition for operation” the forth-generation UIs. The main characteristics of each UI are com-pared in Table 1.

This paradigm opens up new possibilities to user interface and interaction design, while at the same time bringing new challenges.

Some methods extensively used on WIMP inter-faces become cumbersome or obsolete. For example, hover (placing the mouse cursor over an item on screen) is not supported by most touch screens.

Portable devices like mobile phones have other limitations:
– Smaller displays and screen resolutions (480×320 vs. 1024×768+);
– One window displays (vs. multiple-window);
– Complex context of use (glare, etc).

The implications for designers are significant as websites and applications cannot be easily adapted to touch interfaces. Besides the aesthetic update, the core functions and navigation systems will need to be redesigned.

It is much harder to target small objects on the screen with a finger than with a mouse. With little success, Windows offers a tool called “touch pointer” to accomplish tasks that require fine movement or hover [10]. It uses an on-screen mouse (with right and left buttons) and a drag area to control the pointer.

On most mobile devices users can visualize only one window at a time. According to the iPhone Human Interface Guidelines “applications can contain as many different screens as necessary, but users access and see them sequentially, never simultaneously.”

The lack of standardization in the names and actions triggered by gestures between Apple’s iPhone OS and Microsoft’s Windows OS brings even more confusion. Gestures with conflictive meanings include:

Press and Hold

Apple: display a magnified view of text (i.e.: for cursor positioning in editable text or to make it easier to read).
Microsoft: similar to a right-click with a mouse.

Double Tap

Apple: zoom in (and center) or zoom out a block of content or an image.
Microsoft: similar to double-clicking on items with a mouse.

Flick

Apple: Flick uses the same motion as Drag, only done faster, to pan or scroll quickly. For example, it allows users to scroll a list of contacts or music tracks rapidly.
Microsoft: defined two categories of touch flicks: navigational and editing. Navigational flicks (up-down and left-right movements) are for dragging up or down and moving back and forward. Editing flicks (diagonal movements) are for copy, paste, undo, and delete (Figure 4).

Zoom / Pinch

Zoom (Microsoft) and Pinch (Apple) are the same, but use different names.

Recommendations

Discoverability

A good touch interface should afford “touch”. Make sure users understand what is touchable and what is not.

Larger is better

Buttons and other UI elements should be big enough to be manipulated with the fingertips. Controls of at least 40-45 pixels are considered comfortable to use. Avoid tasks that require precise cursor placement.

Not great for input

Text input and editing are a lot harder without physical input devices [7] so interfaces should provide alternative input methods or rely on predictive text and auto-completion.

Avoid Hover

As mentioned, the majority of touch screens do not support Hover. Avoid designing tasks that de-pend on it.

Provide feedback

Due to the lack of physicality of touch interfaces (although some already provide haptic feedback) it is extremely important that the system gives visual cues that an action has take place.

Screen size matters

In a large screen it can be tedious to repeatedly move one’s hands between targets that are far apart. It’s better to keep task interactions within the range of a resting hand whenever possible [10].

Conclusion

The aim of this text is to enable a better under-standing of the challenges of designing interfaces and interactions for touch-enabled systems among practitioners in the region and raise awareness of the need for developing design patterns and best practices.

References

1. Apple applies for patent on dictionary of multi-touch gestures http://arstechnica.com/apple/news/2007/08/apple-applies-for-patent-on-dictionary-of-multi-touch-gestures.ars
2. Buxton, Bill. Multi-Touch Systems that I Have Known and Loved http://www.billbuxton.com/multitouchOverview.html
3. History of the Graphical User Interface
   http://en.wikipedia.org/wiki/History_of_the_graphical_user_interface
4. iPhone Human Interface Guidelines, 16-31.
5. Jacob, R.J.K., Girouard, A., Hirshfield, L.M., Horn, M.S., Shaer, O., Solovey, E.T. and Zigelbaum, J., Reality-Based Interaction: A Framework for Post-WIMP Interfaces in CHI 2008.
6. McLaren, L. Swipe and Drag, Tap and Flick – Getting to Grips With Your iPhone 3G’s Gestures
   http://constantcontentsource.com/reference-and-education/swipe-and-drag-tap-and-flick-getting-to-grips-with-your-iphone-3gs-gestures.html
7. Sadun, E. The iPhone Developer’s Cookbook. Addison-Wesley (2009), 10
8. Van Dam, A. Post-WIMP user interfaces. Communications of the ACM, 40 (2). 63-67.
9. Windows User Experience Interaction Guide-lines for Touch
   http://msdn.microsoft.com/en-us/library/cc872774.aspx
10. Windows Vista Help, What is the touch pointer?
    http://windowshelp.microsoft.com/Windows/en-US/help/ba353fd0-a160-4246-9e82-3c82a869d6b91033.mspx

El evento se propone presentar y discutir las principales líneas de investigación en el área de diseño de interacción; promover la vinculación entre profesionales de la comunidad, presentando y promoviendo la disciplina en las más diversas áreas de conocimiento: diseño, ciencias de la computación, arquitectura, señalando la interdisciplinariedad y pluralidad de visiones sobre nuestra forma de trabajar.

El objetivo del evento es incentivar y colaborar con la educación del diseño de interacción en América Latina, para lo que se cuenta con el apoyo de diversas instituciones de educación superior, promoviendo mayor visibilidad entre los profesionales que trabajan en el desarrollo de soluciones interactivas.

The online dating service, Mate1, invited Giro54 to design the interactions of a new eDate Facebook application. The new tool will extend the social network to friends of friends, including quizzes, friends introductions and compatibility detection tools to match potential candidates for dating.

Giro54 is responsible for the application architecture and interaction design to make the online dating experience a success.

SportsMark Management Group is an award-winning global sports marketing, event management, and corporate hospitality company. An authorized agent for the sales of hospitality programs of world class events, as FIFA worldcup among others, renovates the programs management extranet.

Committed to excellence and value, SportsMark hired Giro54 to design the web application interactions and user experience to improve the event hospitality management process flow and efficiency.

Tholön Kunst, el estudio de diseño gráfico especializado en diseño editorial, publicaciones e identidad corporativa renueva su imagen online.

El rediseño incluye una nueva estructura de navegación que permite visualizar rápidamente el porfolio de trabajos y áreas de diseño. Giro54 aplicó técnicas de arquitectura de la información y estrategia de contenido para lograr un sitio atractivo y de navegación intuitiva.

Gabriel Celemin, socio de Giro54, presentó el caso de estudio Tenaris Careers en la conferencia Día de la Usabilidad 2008 en la Universidad de Palermo.

Parte del panel “Buenas Experiencias” los temas de la presentación incluyeron las técnicas utilizadas en el caso: diseño orientado a los objetivos, entrevistas con postulantes, creación de perfiles de usuarios, y diseño y arquitectura de la información.

Ver la presentación: 1ra parte – 2da parte