This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
P O R T F O L I O 1 . 0
gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng
M i T V U S E R I N T E R F A C ED E S I G N & I N T E R A C T I O N
mitv_interface.pdf
1. Unifica el vocabulario visual para designar que es información proveída por el sistema y lo que es contenido aportado por el usuario.2. Botones de colores tienen funcionen constantes y culturalmente intuitivas a su tonalidad.3. Los interfaces se presentan lo más simplificados posible, escondiendo funcionalidad avanzada tras el botón “Opciones” representado por Verdi, el experto técnico de la familia MiTV y apoyo a cualquiera de las otras secciones del producto.4. El menú principal está ahora dividido entre el paquete básico de funcionalidades: MiTV Digital y el paquete MiTV Conecta.
MiTV Interface – Home OptionsInterfaz MiTV – Opciones de Inicio
page 02 of 08
Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com
1. El botón azul está ahora permanentemente asociado al paquete de conectividad, lo cual sirve muy bien para sutilmente recordar que mas funcionalidad está disponible aunque no se haya adquirido previamente. Si el usuario hace uso del botón azul... una sugerencia para su compra aparecerá.2. El menú inferior puede replegarse una vez el usuario no necesite recordar para que es cada botón. Mientras tanto, si el Kit de conectividad no ha sido adquirido, este se difuminará y permanecerá deactivado como constante recordatorio visual.
Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com
1. Zula, representa todos esos servicios acogidos en la oferta de MiTV Conecta. Estos, una vez adquiridos, permanecerán bajo el menú de Zula, activable por el botón azul y apoyado como siempre por el botón verde de opciones avanzadas. 2. Al separar los menúes de TV digital y gestión de intercambio de información, permite recordar al usuario el valor añadido de su inversión y separa los públicos ya identificados como centrados alrededor de la TV, y aquellos más duchos en la comunicación entre dispositivos (PCs, bluetooth, Wi-Fi, ADSL, etc).
OPCIONESTV DIGITAL AYUDA CONECTA
MiTV Interface – HomeInterfaz MiTV – Inicio
page 04 of 08
Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com
1. Al igual que cualquier función dispone del apoyo avanzado de Verdi con solo dar al botón verde, también es posible aprender más y ser instruido en cualquiera de los temas con la ayuda de Amalia, activable con el botón amarillo.2. El sistema de Ayuda capitaneado por Amalia, puede disponer tanto de un manual con explicaciones de la funcionalidad de cualquier aplicación, como ejemplos de usos prácticos para poder imitar como si de un tour virtual se tratase.3. Al modularizar tanto la ayuda como el sistema de opciones e información avanzada, se puede construir un interfaz a la medida del usuario.
Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com
1. La selección de ficheros es unificada a través de todo el interfaz.2. Permite visionar la televisión al mismo tiempo, y la información crece de acuerdo a las necesidades.3. La familia MiTV está vinculada coherentemente a las diversas funciones dentro de sus capacidades.4. Aquella información no necesaria, ha sido escondida y aparecerá ahora con el botón amarillo de Amalia.5. Los iconos reflejan las diversas posibles procedencias.6. La ventana principal confirmará posteriormente en su título de donde proceden los contenidos.
Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com
1. El correo electrónico es una de esas herramientas bajo la custodia de Zula, como exige su condición de experta en comunicaciones.2. El interfaz de correo se ha simplificado aún más desde la primera propuesta, al ser ahora varias de las funciones asumidas por el sistema operativo general.
MiTV Interface – EmailInterfaz MiTV – Email
page 06 of 08
Project MiTV Product DesignClient NetGem S.A.Document MiTV Interface 01 Date July 19, 2004Design Lobe Multimedia S.L.Info www.lobemultimedia.com
1. Todos los recursos dentro de una procedencia (Pen Drive en el ejemplo) aparecen con una miniatura de sus contenidos. 2. Se evitarán tecnicismos de formato como “.jpg”, “.mp3” o “.mpg” en la nomenclatura de los contenidos. Cuando sea necesario, Verdi o Amalia siempre podrán aportar más opciones y mayor información.3. Se evitará el desplazamiento parcial de ítems a favor de unidades enteras con un clic del mando momentáneo, o pantallas completas con un clic continuado.
Graphics of symbolic nature, as well as all icons, bullets, functional marks, navigational aids, etc. Should be "carved-out" of a matrix grid composed of 2x2 pixel squares with 1 pixel separation among them. Any color with sufficient contrast with the background is allowed.
The matrix-based iconography applies even to large graphics of functional nature, such as this map of the world utilized on the Global Gateway.
In addition to the guidelines stated on left. Icons of functions, calls for action or info notices (such as bullets, buttons, drop-down menus, warning signs, phone numbers, e-mail addresses, check marks, download files, etc. Must be defined out of 4 x 4 squares (2x2 pixels each with 1 pixel separation among them).
Please be aware that these illustrator graphics cannot be safely used as templates for final GIF images as PhotoShop will not respect the proportion between pixels, even if imported as "aliased' or as a "path". Therefore, make sure you recreate any matrix-based iconography within that program, observing clean square edges and solid colors throughout.
2 pixels
9x
1 pixel
N I K E . C O M G U I D E L I N E SW E B , E C O M M E R C E & C R E A T I V E G R O U P O R G2001
User Exper ience gu idel ines , des ign and strategy for Nike .com and i ts U .S . Web store . Lead ing a team of 37 profess ionals
nike.zip
P O R T F O L I O 1 . 0
gomez-rosado.comcode in teract ionux arqu i tec ture des ign d i rec t ion des ign wr i t i ng