background preloader

Web Design, Speaking, Consulting, Music and Art

Responsive Navigation Patterns Update: I’ve also written about complex navigation patterns for responsive design. Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness. Here’s some of the more popular techniques for handling navigation in responsive designs: There are of course advantages and disadvantages of each method and definitely some things to look out for when choosing what method’s right for your project. Top Nav or “Do Nothing” Approach One of the easiest-to-implement solutions for navigation is to simply keep it at the top. Pros Cons Height issues- Height matters in mobile. Responsive navigation breaking to multiple lines on small screens In the Wild Resources The Select Menu The Toggle In The Wild

Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus xeral[arroba] Artículos de Galinus > Esta es una traducción del artículo "First Principles of Interaction Design", de Bruce Tognazzini Otras traducciones de este artículo. Índice Introducción Los siguientes principios son fundamentales para el diseño e implementación de interfaces gráficas efectivas, bien se trate de interfaces GUI de escritorio o de la web. Muchas de las aplicaciones web reflejan una falta de entendimiento de muchos de los siguientes principios. Las interfaces efectivas son visualmente comprensibles y permiten errores por parte del usuario, dándole una sensación de control. Las interfaces efectivas ocultan al usuario el funcionamiento interno del sistema. Las aplicaciones y servicios efectivos realizan el máximo trabajo requiriendo la mínima información del usuario. Anticipación Las aplicaciones deberían intentar anticiparse a las necesidades y deseos del usuario. Autonomía Dale al usuario algo de "cancha". Mantén informado al usuario del estado del sistema. Mal: Bien:

Flat UI - Free Bootstrap Framework and Themes Header 3The Vatican transitions to a Header 4Great American Bites: Telluride's Oak, The Header 5Author Diane Alberts loves her some good Header 6With the success of young-adult book-to-movie Paragraph Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Image Lead Text Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quote Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Small Font Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Diseño Emocional 2.1. Objetivo general.2.2. Objetivos específicos. Introducción al concepto de diseño emocional. Definición del diseño emocional. Objetivo principal del diseño emocional. Principales características del diseño emocional.3.4.1. Fortalezas y debilidades del diseño emocional.3.4.5. Principales exponentes del diseño emocional. Conclusiones. Notas bibliográficas. Introducción al concepto de metodología del diseño emocional(ingeniería Kansei). Definición y origen de la ingeniería Kansei o ingeniería de lasemociones.4.2.1. Principales objetivos de la ingeniería Kansei. Primer objetivo: Diseño centrado en el usuario. Segundo objetivo: Consolidación empresarial. Tercer objetivo: El factor ecológico. 4.3.4. Principales características de la ingeniería Kansei.

Does a UI walkthrough mean they blew it? Last year, an article was making the rounds proclaiming: If you see a UI walkthrough, they blew it Having been continually assaulted by shouting tutorials I was firmly in this camp. It makes sense at face value, since this is should be a good litmus test for simplicity and conveying purpose. My mind was made up, and I vowed to not make the same mistakes. Our story begins with a suggestion — “let’s start an app club.” A month later, we did some initial testing of the mobile app we were building with users. People had seen paper prototypes, and we had talked some focus groups through the initial on-boarding of the app. Wizards and tutorials are a pain to build and even more annoying to maintain. Given that we’re still defining interactions on a mobile touch device, and given our lack of attention I believe it’s okay to give a pass to mobile apps that are trying to bridge this cognitive gap and keep us on track. Coach Marks Microinteractions Progressive Reduction