SlideShare una empresa de Scribd logo
1 de 7
Interfaces de Usuario
(consejos de diseño)

Asignatura: Metodología de sistemas 1
Curso: 4B

Alumnos:
Luna Jesús
Deliens Manuel
Miércoles 13 de Noviembre de 2013
VENTANAS
● Deben soportar la resolución minima efectiva de 800 x 600 pixeles.
Para las interfaces de usuarios criticas que deben trabajar en modo
seguro la resolución minima efectiva debe ser de 640 x 480 pixeles.
asegurarse de tener en cuenta el espacio utilizado por la barra de
herramientas que se reserva 48 pixeles verticales, para las ventanas
que incluyen la barra de herramientas.

●

Si la ventana es hija de otra ventana, en un principio mostrarla
"centrada" en la parte superior de la ventana propietaria. Nunca debajo.
Para la visualización posterior, considere mostrarla en su última
ubicación (relativa a la ventana propietaria), haciéndolo de esta manera
es la forma mas conveniente.
● Si una ventana es contextual, siempre que aparezca cerca del objeto
desde el cual fue invocada. Sin embargo debe estar colocada de
manera estratégica (preferiblemente abajo, hacia la derecha), de modo
que el objeto no quede cubierto por la ventana.
Palabras
● Es recomendable usar términos ordinarios con los cuales el usuario este familiarizado,
“entablar una conversación con el usuario”, cuando sea posible. Centrarse en las
necesidades y objetivos del usuario, pensar que es lo que el usuario necesita hacer y no
centrarse en la tecnología. Esto es extremadamente eficaz si se está explicando un
concepto técnico o una acción compleja. Imagínese estar en el mismo lugar con el
usuario mirando y guiándolo para llevar a cabo la tarea a realizar.
● Elimine las palabras redundantes. Buscar las palabras redundantes en los títulos de las
ventanas, las instrucciones principales, instrucciones suplementarias, áreas de
contenido, enlaces de comandos y botones de confirmación. En general, dejar el texto
principal completo en
las instrucciones y los controles interactivos y eliminarlo de cualquiera de los otros lugares.
Sugerencia: Mostrar texto incompleto o truncado en una ventana o una página con espacio
sin utilizar indica una mala administración del espacio o un tamaño de ventana por
defecto incorrecto y que es demasiado pequeño. Esforzarse por lograr diseños y
ventanas con tamaños predeterminados que eliminen o reduzcan la cantidad de texto
truncado.
● No utilice el texto de color azul cuando no se trate de un enlace, ya que los usuarios
pueden suponer que se trata de un enlace y esto podría causar confusión. En vez de esto
Utilice negrita o un tono de gris.
● Utilizar negrita con moderación, solo para llamar la atención de los usuarios cuando se
presenta texto que requiera ser leído por el usuario.
Barras de progreso
● Utilice barras de progreso solo para determinadas operaciones que requieren una
cantidad limitada de tiempo, incluso si esa
cantidad de tiempo no se puede determinar con precisión. Aún no sabiendo la cantidad
de tiempo que requiere cierta operación las barras de progreso muestran que el
programa se esta ejecutando y no dan la sensación de que el programa se colgó,
pero estas no deben proporcionar ninguna otra información.

● Proporcionar una estimación del tiempo restante para la finalización de un proceso es
conveniente, si puede hacerlo con precisión mucho mejor, las estimaciones del
tiempo restante precisas son muy útiles, pero si estas estimaciones son erróneas el
impacto en el usuario seria altamente negativo de manera que lo frustraría y el
software perdería credibilidad. Puede que tenga que realizar algún tipo de
procesamiento antes de poder dar estimaciones precisas. Si es así, no muestre las
estimaciones potencialmente inexactas durante este período inicial.

● No reinicie el progreso. Una barra de progreso pierde su valor si se reinicia (tal vez
porque un paso en la operación no esta completo), ya que los usuarios no tienen
forma de saber si la operación se completará.
En cambio, todos y cada uno de los pasos de la operación deben representar un
porcentaje de la barra de progreso y tener la barra de progreso completa
a la finalización de la misma.
Antelación
● Los desarrolladores deben esforzarse en realizar aplicaciones que "lean la mente del usuario“,
que se anticipen a sus necesidades de manera contextual. que la aplicación sea una ayuda y
no un estorbo a la hora de que el usuario deba realizar sus tareas. Muestra al usuario toda la
información y herramientas necesarias para cada etapa en su trabajo. No hay que esperar a
que el usuario busque algo hay que dárselo antes de que incluso el mismo sepa que lo va a
necesitar.
● Bríndale al usuario confort , que se sienta cómodo usando el sistema que sienta que el maneja al
sistema y no el sistema a el, "que el sea el que manda" y las cosas se hagan como el quiere
dándole cierta libertad. De esta manera aprenderá mas rápido a usar el sistema y así el
sistema ganara reputación entre los usuarios.
● Pese a que un sistema pueda parecer, sin fronteras o restricciones el usuario no se siente libre
(Yallum, 1980); es como un niño pequeño que llora cuando se le mantiene muy atado o se le
deja en un edificio grande y vacío. Los adultos también se sienten más cómodos en un entorno
ni muy restrictivo ni demasiado grande, un entorno explorable pero no peligroso.
● Mantén informado al usuario del estado y las acciones que va tomando el sistema.
● No existe autonomía en ausencia de control; y el control no se puede tener sin información
suficiente. Comunicar el estado es fundamental para que el usuario responda apropiadamente
con la información disponible.
● Ejemplo: los trabajadores sin información del estado del sistema, tienden a mantenerse bajo
presión durante cortos periodos de tiempo hasta que el trabajo se termina. Un estrés y fatiga
innecesarios por lo que cuando venga la siguiente carga de trabajo, puede que los trabajadores
no estén en las mejores condiciones físicas y mentales.
Información de estado visible y actualizada
● De un vistazo los usuarios deberían ser capaces de hacerse una idea aproximada del
estado del sistema. La información de estado puede ser bastante sutil: el icono de la
bandeja de entrada puede mostrarse vacía, medio llena o hasta los topes, por ejemplo.
Sin embargo, no es conveniente abusar. Macintosh utilizó durante años un icono de la
papelera que parecía que iba a explotar en cualquier momento, aunque sólo tuviese un
documento. Los usuarios adquirieron la costumbre de vaciar la papelera apenas
contuviese un documento, convirtieron un proceso de un paso en uno de dos (primero
llevamos el documento a la papelera, luego lo vaciamos). Esto tuvo el efecto negativo
de reducir una de las funciones básicas de la papelera: la posibilidad de deshacer la
acción.
● Otro ejemplo posible de información de estado sería el de un una caja de búsquedas que
cambiase de color para indicar si la búsqueda está todavía en marcha o si ya ha
terminado, con demasiados resultados, con muy pocos o justos con lo necesario.

Valores por defecto
● Los valores por defecto deberían ser poder descartados con facilidad y rapidez. Los
campos de texto con valores por defecto deben aparecer seleccionados, para que el
usuario sólo tenga que teclear y no seleccionar todo, borrar y escribir.
● Los valores por defecto deben tener sentido. Deben ser un ejemplo del valor que el
usuario debe ingresar
● No uses la palabra "por defecto" en una aplicación o servicio. Utiliza "estándar", "Usar
valores habituales", "Restablecer valores iniciales" o términos más específicos que
describan lo que sucederá.
B
ibliografía:
● Msdn Microsoft, http://msdn.microsoft.com

/es-ar/library/windows/desktop/aa511258.
aspx
[consulta: 9/11/2013 ]
● Galinus, http://galinus.com/es/articulos
/principios-diseno-de-interaccion.html

[consulta: 6/11/2013 ]

Más contenido relacionado

Destacado

Parámetros del sonido
Parámetros del sonidoParámetros del sonido
Parámetros del sonidoluisaac
 
Owen real evaluation
Owen real evaluationOwen real evaluation
Owen real evaluationowenmboma123
 
Galopades du patrimoine 2015
Galopades du patrimoine 2015Galopades du patrimoine 2015
Galopades du patrimoine 2015Laurent Rebours
 
Financing youth empowerment scheme in oyo state
Financing youth empowerment scheme in oyo stateFinancing youth empowerment scheme in oyo state
Financing youth empowerment scheme in oyo stateOnaolapo Bayonle
 
Data science capabilities
Data science capabilitiesData science capabilities
Data science capabilitiesYann Lecourt
 
Forandringsledelse det betaler sig share
Forandringsledelse det betaler sig shareForandringsledelse det betaler sig share
Forandringsledelse det betaler sig shareMaren Sander Granlien
 
La scienza
La scienzaLa scienza
La scienzala-prof
 
Welcomewelcome final eve teasing
Welcomewelcome   final eve teasingWelcomewelcome   final eve teasing
Welcomewelcome final eve teasingsadiaafroze50
 
Рік реформ - 2015
Рік реформ - 2015Рік реформ - 2015
Рік реформ - 2015Gennadiy Zubko
 
Bosque de coníferas
Bosque de coníferasBosque de coníferas
Bosque de coníferasmarialovumba
 
Derecho civil
Derecho civilDerecho civil
Derecho civilmauxyc
 

Destacado (15)

Parámetros del sonido
Parámetros del sonidoParámetros del sonido
Parámetros del sonido
 
Elements of Messaging Strategy
Elements of Messaging StrategyElements of Messaging Strategy
Elements of Messaging Strategy
 
Owen real evaluation
Owen real evaluationOwen real evaluation
Owen real evaluation
 
Galopades du patrimoine 2015
Galopades du patrimoine 2015Galopades du patrimoine 2015
Galopades du patrimoine 2015
 
Financing youth empowerment scheme in oyo state
Financing youth empowerment scheme in oyo stateFinancing youth empowerment scheme in oyo state
Financing youth empowerment scheme in oyo state
 
Data science capabilities
Data science capabilitiesData science capabilities
Data science capabilities
 
Forandringsledelse det betaler sig share
Forandringsledelse det betaler sig shareForandringsledelse det betaler sig share
Forandringsledelse det betaler sig share
 
La scienza
La scienzaLa scienza
La scienza
 
Método de Descartes
Método de DescartesMétodo de Descartes
Método de Descartes
 
Welcomewelcome final eve teasing
Welcomewelcome   final eve teasingWelcomewelcome   final eve teasing
Welcomewelcome final eve teasing
 
Рік реформ - 2015
Рік реформ - 2015Рік реформ - 2015
Рік реформ - 2015
 
Tmf ddi+orange final
Tmf ddi+orange finalTmf ddi+orange final
Tmf ddi+orange final
 
Bosque de coníferas
Bosque de coníferasBosque de coníferas
Bosque de coníferas
 
Elsa bornemann
Elsa bornemannElsa bornemann
Elsa bornemann
 
Derecho civil
Derecho civilDerecho civil
Derecho civil
 

Similar a Interfaces gráficas de usuario

Diseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuarioDiseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuariopelucaboy
 
Diseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuarioDiseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuarioAlejo Andres
 
Dia de la usabillidad 2013 - Clínica de UX para apps
Dia de la usabillidad 2013 - Clínica de UX para appsDia de la usabillidad 2013 - Clínica de UX para apps
Dia de la usabillidad 2013 - Clínica de UX para appsMauricio Angulo
 
Clínica de experiencia de usuario para aplicaciones móviles
Clínica de experiencia de usuario para aplicaciones móvilesClínica de experiencia de usuario para aplicaciones móviles
Clínica de experiencia de usuario para aplicaciones móvilesMauricio Angulo
 
Taller de prototipado iterativo
Taller de prototipado iterativoTaller de prototipado iterativo
Taller de prototipado iterativoMartín S
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz graficalautaropa
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz graficalautaropa
 
Fagundez Diseño de interfaces gráficas de usuario
Fagundez   Diseño de interfaces gráficas de usuarioFagundez   Diseño de interfaces gráficas de usuario
Fagundez Diseño de interfaces gráficas de usuarioCin Fagundez
 
Guia para realizar una correcta interfaz gráfica de usuario
Guia para realizar una correcta interfaz gráfica de usuarioGuia para realizar una correcta interfaz gráfica de usuario
Guia para realizar una correcta interfaz gráfica de usuarioLuciano Servettini
 
Prueba prprprp
Prueba prprprpPrueba prprprp
Prueba prprprpusupr2014
 
Gui buenas practicas
Gui buenas practicasGui buenas practicas
Gui buenas practicasakrom1999
 

Similar a Interfaces gráficas de usuario (20)

Diseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuarioDiseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuario
 
Diseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuarioDiseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuario
 
Interfaces de usuario
Interfaces de usuarioInterfaces de usuario
Interfaces de usuario
 
Tpgui
TpguiTpgui
Tpgui
 
Dia de la usabillidad 2013 - Clínica de UX para apps
Dia de la usabillidad 2013 - Clínica de UX para appsDia de la usabillidad 2013 - Clínica de UX para apps
Dia de la usabillidad 2013 - Clínica de UX para apps
 
Clínica de experiencia de usuario para aplicaciones móviles
Clínica de experiencia de usuario para aplicaciones móvilesClínica de experiencia de usuario para aplicaciones móviles
Clínica de experiencia de usuario para aplicaciones móviles
 
Taller de prototipado iterativo
Taller de prototipado iterativoTaller de prototipado iterativo
Taller de prototipado iterativo
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Fagundez Diseño de interfaces gráficas de usuario
Fagundez   Diseño de interfaces gráficas de usuarioFagundez   Diseño de interfaces gráficas de usuario
Fagundez Diseño de interfaces gráficas de usuario
 
Guia para realizar una correcta interfaz gráfica de usuario
Guia para realizar una correcta interfaz gráfica de usuarioGuia para realizar una correcta interfaz gráfica de usuario
Guia para realizar una correcta interfaz gráfica de usuario
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Prueba prprprp
Prueba prprprpPrueba prprprp
Prueba prprprp
 
11.interfaz de usuario
11.interfaz de usuario11.interfaz de usuario
11.interfaz de usuario
 
Guia de Evaluacion Experta
Guia de Evaluacion ExpertaGuia de Evaluacion Experta
Guia de Evaluacion Experta
 
Jm checklist
Jm checklistJm checklist
Jm checklist
 
Guia para evaluacion experta
Guia para evaluacion expertaGuia para evaluacion experta
Guia para evaluacion experta
 
Gui buenas practicas
Gui buenas practicasGui buenas practicas
Gui buenas practicas
 

Interfaces gráficas de usuario

  • 1. Interfaces de Usuario (consejos de diseño) Asignatura: Metodología de sistemas 1 Curso: 4B Alumnos: Luna Jesús Deliens Manuel Miércoles 13 de Noviembre de 2013
  • 2. VENTANAS ● Deben soportar la resolución minima efectiva de 800 x 600 pixeles. Para las interfaces de usuarios criticas que deben trabajar en modo seguro la resolución minima efectiva debe ser de 640 x 480 pixeles. asegurarse de tener en cuenta el espacio utilizado por la barra de herramientas que se reserva 48 pixeles verticales, para las ventanas que incluyen la barra de herramientas. ● Si la ventana es hija de otra ventana, en un principio mostrarla "centrada" en la parte superior de la ventana propietaria. Nunca debajo. Para la visualización posterior, considere mostrarla en su última ubicación (relativa a la ventana propietaria), haciéndolo de esta manera es la forma mas conveniente. ● Si una ventana es contextual, siempre que aparezca cerca del objeto desde el cual fue invocada. Sin embargo debe estar colocada de manera estratégica (preferiblemente abajo, hacia la derecha), de modo que el objeto no quede cubierto por la ventana.
  • 3. Palabras ● Es recomendable usar términos ordinarios con los cuales el usuario este familiarizado, “entablar una conversación con el usuario”, cuando sea posible. Centrarse en las necesidades y objetivos del usuario, pensar que es lo que el usuario necesita hacer y no centrarse en la tecnología. Esto es extremadamente eficaz si se está explicando un concepto técnico o una acción compleja. Imagínese estar en el mismo lugar con el usuario mirando y guiándolo para llevar a cabo la tarea a realizar. ● Elimine las palabras redundantes. Buscar las palabras redundantes en los títulos de las ventanas, las instrucciones principales, instrucciones suplementarias, áreas de contenido, enlaces de comandos y botones de confirmación. En general, dejar el texto principal completo en las instrucciones y los controles interactivos y eliminarlo de cualquiera de los otros lugares. Sugerencia: Mostrar texto incompleto o truncado en una ventana o una página con espacio sin utilizar indica una mala administración del espacio o un tamaño de ventana por defecto incorrecto y que es demasiado pequeño. Esforzarse por lograr diseños y ventanas con tamaños predeterminados que eliminen o reduzcan la cantidad de texto truncado. ● No utilice el texto de color azul cuando no se trate de un enlace, ya que los usuarios pueden suponer que se trata de un enlace y esto podría causar confusión. En vez de esto Utilice negrita o un tono de gris. ● Utilizar negrita con moderación, solo para llamar la atención de los usuarios cuando se presenta texto que requiera ser leído por el usuario.
  • 4. Barras de progreso ● Utilice barras de progreso solo para determinadas operaciones que requieren una cantidad limitada de tiempo, incluso si esa cantidad de tiempo no se puede determinar con precisión. Aún no sabiendo la cantidad de tiempo que requiere cierta operación las barras de progreso muestran que el programa se esta ejecutando y no dan la sensación de que el programa se colgó, pero estas no deben proporcionar ninguna otra información. ● Proporcionar una estimación del tiempo restante para la finalización de un proceso es conveniente, si puede hacerlo con precisión mucho mejor, las estimaciones del tiempo restante precisas son muy útiles, pero si estas estimaciones son erróneas el impacto en el usuario seria altamente negativo de manera que lo frustraría y el software perdería credibilidad. Puede que tenga que realizar algún tipo de procesamiento antes de poder dar estimaciones precisas. Si es así, no muestre las estimaciones potencialmente inexactas durante este período inicial. ● No reinicie el progreso. Una barra de progreso pierde su valor si se reinicia (tal vez porque un paso en la operación no esta completo), ya que los usuarios no tienen forma de saber si la operación se completará. En cambio, todos y cada uno de los pasos de la operación deben representar un porcentaje de la barra de progreso y tener la barra de progreso completa a la finalización de la misma.
  • 5. Antelación ● Los desarrolladores deben esforzarse en realizar aplicaciones que "lean la mente del usuario“, que se anticipen a sus necesidades de manera contextual. que la aplicación sea una ayuda y no un estorbo a la hora de que el usuario deba realizar sus tareas. Muestra al usuario toda la información y herramientas necesarias para cada etapa en su trabajo. No hay que esperar a que el usuario busque algo hay que dárselo antes de que incluso el mismo sepa que lo va a necesitar. ● Bríndale al usuario confort , que se sienta cómodo usando el sistema que sienta que el maneja al sistema y no el sistema a el, "que el sea el que manda" y las cosas se hagan como el quiere dándole cierta libertad. De esta manera aprenderá mas rápido a usar el sistema y así el sistema ganara reputación entre los usuarios. ● Pese a que un sistema pueda parecer, sin fronteras o restricciones el usuario no se siente libre (Yallum, 1980); es como un niño pequeño que llora cuando se le mantiene muy atado o se le deja en un edificio grande y vacío. Los adultos también se sienten más cómodos en un entorno ni muy restrictivo ni demasiado grande, un entorno explorable pero no peligroso. ● Mantén informado al usuario del estado y las acciones que va tomando el sistema. ● No existe autonomía en ausencia de control; y el control no se puede tener sin información suficiente. Comunicar el estado es fundamental para que el usuario responda apropiadamente con la información disponible. ● Ejemplo: los trabajadores sin información del estado del sistema, tienden a mantenerse bajo presión durante cortos periodos de tiempo hasta que el trabajo se termina. Un estrés y fatiga innecesarios por lo que cuando venga la siguiente carga de trabajo, puede que los trabajadores no estén en las mejores condiciones físicas y mentales.
  • 6. Información de estado visible y actualizada ● De un vistazo los usuarios deberían ser capaces de hacerse una idea aproximada del estado del sistema. La información de estado puede ser bastante sutil: el icono de la bandeja de entrada puede mostrarse vacía, medio llena o hasta los topes, por ejemplo. Sin embargo, no es conveniente abusar. Macintosh utilizó durante años un icono de la papelera que parecía que iba a explotar en cualquier momento, aunque sólo tuviese un documento. Los usuarios adquirieron la costumbre de vaciar la papelera apenas contuviese un documento, convirtieron un proceso de un paso en uno de dos (primero llevamos el documento a la papelera, luego lo vaciamos). Esto tuvo el efecto negativo de reducir una de las funciones básicas de la papelera: la posibilidad de deshacer la acción. ● Otro ejemplo posible de información de estado sería el de un una caja de búsquedas que cambiase de color para indicar si la búsqueda está todavía en marcha o si ya ha terminado, con demasiados resultados, con muy pocos o justos con lo necesario. Valores por defecto ● Los valores por defecto deberían ser poder descartados con facilidad y rapidez. Los campos de texto con valores por defecto deben aparecer seleccionados, para que el usuario sólo tenga que teclear y no seleccionar todo, borrar y escribir. ● Los valores por defecto deben tener sentido. Deben ser un ejemplo del valor que el usuario debe ingresar ● No uses la palabra "por defecto" en una aplicación o servicio. Utiliza "estándar", "Usar valores habituales", "Restablecer valores iniciales" o términos más específicos que describan lo que sucederá.
  • 7. B ibliografía: ● Msdn Microsoft, http://msdn.microsoft.com /es-ar/library/windows/desktop/aa511258. aspx [consulta: 9/11/2013 ] ● Galinus, http://galinus.com/es/articulos /principios-diseno-de-interaccion.html [consulta: 6/11/2013 ]