Diseo Software de interfaz de usuario
La interfaz de usuario es la parte visible de la aplicacin front-end (traducible al espaol como interfaz) con la que el usuario interacciona a fin de usar el software. El usuario puede manipular y controlar el software as como el hardware por medio de las interfaces de usuario. Hoy en da, la interfaz de usuario se encuentra casi en todos los lugares donde existe tecnologa digital, desde ordenadores, mviles, coches, reproductores de msica, aviones, barcos, etc.
La interfaz de usuario es parte del software y est diseada de tal manera que se espera proveer al usuario con un conocimiento sobre la percepcin del software. La UI (Interfaz de usuario) tambin aporta una plataforma fundamental para la interaccin entre los humanos y el ordenador.
La UI puede ser grfica, en forma de texto, audiovisual, dependiendo del hardware subyacente y su combinacin con el software. La UI puede ser un hardware, un software o una combinacin de ambos.
El software suele ser ms popular cuando su UI es:
- Atractiva
- Fcil de usar
- De respuesta rpida
- Clara de comprender
- Coherente en toda la pantalla de interfaz
La UI se divide en dos categoras:
- Interfaz de lnea de comandos
- Interfaz grfica de usuario (GUI)
Interfaz de lnea de comandos(CLI en sus siglas inglesas)
La interfaz de lnea de comandos, traduccin del ingls command-line interface la cual es, en realidad, una transcripcin incorrecta de Interfaz de lnea de rdenes, por el falso amigo command (orden/instruccin), ha sido una gran herramienta de interaccin con ordenadores haste que llegaron los reproductores de video. La CLI es la primera opcin de muchos usuarios tcnicos y programadores. La CLI es la interfaz mnima que un software puede ofrecer a sus usuarios.
La CLI ofrece un smbolo del sistema, el lugar donde el usuario escribe el comando y alimenta al sistema. El usuario debe recordar la sintaxis del comando y tambin su uso. Hace un tiempo las CLI no estaban programadas para tratar los errores del usuario de forma eficiente.
Un comando es una referencia de instrucciones en modo texto, las cuales sern ejecutadas por el sistema. Existen modos como macros macro (del griego , makro, que significa grande, es una abreviatura de macroinstruccin), scripts (tambin llamado archivo de rdenes, archivo de procesamiento por lotes o guion), que facilitan al usuario operar con el software.
La CLI usa menos cantidad de recursos informticos en comparacin con la GUI.
Elementos de la CLI
Una CLI en forma de texto puede tener los elementos que se exponen a continuacin:
Smbolo de sistema - Es un notificador en texto que mayormente muestra el contexto en el que el usuario trabaja. Es generado por el sistema de software.
Cursor - Es una lnea horizontal o una barra vertical de la longitud de la lnea, para representar la posicin del carcter mientras se escribe. El cursor se encuentra por lo general en un estado de parpadeo. Se mueve a medida que el usuario escribe o elimina algo.
Comando(o Orden) - Un comando es una instruccin ejecutable. Puede tener uno o ms parmetros. El resultado de la ejecucin del comando se muestra alineado en la pantalla. Cuando se produce una salida, el smbolo de sistema se muestra en la siguiente lnea.
Interfaz grfica de usuario
La Interfaz grfica de usuario est diseada para interactuar con el sistema. La GUI puede ser una combinacin de hardware y software. Usando una GUI, el usuario puede interpretar el software.
Por lo general, la GUI consume ms recursos que la CLI. Con tecnologa avanzada, los programadores y diseadores diseos complejos de GUI que funcionan con ms eficiencia, velocidad y precisin.
Elementos de la GUI
La GUI ofrece un conjunto de componentes para interactuar con el software o con el hardware.
Cada componente grfico ofrece una modo de trabajo con el sistema. Un sistema de GUI tiene algunos de los elementos mencionados a continuacin:
Ventana - Zona donde se muestran los contenidos de las aplicaciones. Los contenidos de una ventana se pueden mostrar en forma de iconos o de listas, si la ventana representa la estructura del archivo. Navegar es ms fcil para el usuario en el sistema de archivos en una ventana de exploracin. La ventanas se pueden minimizar, minimizar su tamao, o maximizar a la medida de la pantalla. Se pueden mover a cualquier lugar de la pantalla. Una ventana puede contener otra ventana de la misma aplicacin, llamada ventana hija.
Pestaas - Si una aplicacin permite ejecutar ms de una instancia de ella misma, aparecen en la pantalla en una ventana separada. Navegacin por pestaas Ha aparecido para abrir ms de un documento en la misma ventana. Esta interfaz tambin contribuye en la visin del panel de preferencia en la aplicacin. Todos los exploradores web modernos usan esta caracterstica.
Men - El Men es un despliegue de comandos estndars, agrupados juntos y colocados en un lugar visible (normalmente en la parte superior) dentro de la ventana de la aplicacin. El men se puede programar para aparecer o mostrarse escondido usando los botones del ratn.
Icono - Un icono es una pequea imagen que representa una aplicacin asociada. Cuando se aprietan estos iconos o con uno o con doble click, la ventana de aplicacin se abre. Los iconos muestran aplicaciones y programas instalados en un sistema en forma de pequeas imgenes.
Cursor - Usando dispositivos como el ratn, touch pad (panel tctil), el lpiz digital son representados en GUI como cursores. En la pantalla el cursor sigue las instrucciones del hardware casi en tiempo real. Los cursores son tambin llamados puntero en sistemas de GUI. Se usan para seleccionar mens, ventanas, y otras caractersticas de la aplicacin.
Componentes GUI para aplicaciones especficas
La GUI de una aplicacin contiene uno o ms elementos que se enumeran a continuacin:
Ventana de la aplicacin - La mayora de ventanas de la aplicacin usan los algoritmos de sistemas operadores pero algunas usan su propia creacin de ventana de usuario para almacenar los contenidos de la aplicacin.
-
Cuadro de dilogo - Es una ventana hija que contiene un mensaje de peticin para el usuario para que lleve a cabo una accin determinada. Por ejemplo: Una aplicacin genera un dilogo para tener confirmacin del usuario para eliminar un archivo.
Caja de texto - Ofrece una zona para que el usuario escriba o para que introduzca datos en texto.
-
Botones - Imitan botones de la vida real y se usan para enviar entradas al software.
botn de Radio - Muestra opciones de seleccin disponibles. Slo se puede seleccionar una de entre todas las que se ofrecen.
Casilla de verificacin - Las funciones son similares a las del Cuadro de lista. Cuando se selecciona una opcin, la casilla aparece como marcada. Se pueden seleccionar mltiples opciones representadas por casillas de verificacin.
-
Cuadro de lista - Aporta una lista de los tems disponibles para la seleccin. Se puede seleccionar ms de un tem.
Otros componentes soprprendentes de la GUI son:
- Sliders
- Combo-box (casilla combinada)
- Data-grid (Cuadrcula de datos)
- Drop-down list (Lista desplegable)
Actividades de diseo de la interfaz de usuario
Se realizan muchas actividades para el diseo de la interfaz de usuario. El proceso para el diseo de la GUI as como su implementacin es como el SDLC. Se puede usar Cualquier modelo para la implementacin de una GUI entre los modelos de Cascada, reiterativo, o en espiral.
Un modelo usado para el diseo y el desarrollo de la GUI debe satisfacer estos pasos especficos.
Recogida de requisitos de la GUI - A los diseadores quiz les guste tener una lista de todos los requisitos funcionales y no funcionales de la GUI. Esto se puede obtener del usuario y de su solucin software existente.
Anlisis de usuario - El diseador estudia qui va a usar el software de la GUI. El target de consumidores es importante ya que los detalles del diseo cambian segn el conocimiento y el nivel de competencia del usuario. Si el usuario es entendido en cuestiones tcnicas, se puede incorporar una GUI avanzada y compleja. Para un usuario novato, se incluye ms informacin sobre cmo usar el software.
Anlisis de tarea - Los diseadores deben analizar qu tareas tiene que hacer la solucin software. Para la GUI, no importa cmo se har. Las tareas se pueden representar de forma jerrquica tomando las tareas mayores y dividindolas en sub tareas ms pequeas. Las tareas aportan los objetivos para la presentacin de la GUI. El flujo de informacin entre sub teareas determina el flujo de contenidos de la GUI en el software.
Diseo e implementacin de la GUI - Los diseadores una vez han obtenido informacin sobre los requisitos, las tareas y el entorno del usuario, disean e implementan el cdigo de la GUI, incorporando software simulado en el fondo. Luego se evala por los desarrolladores.
Evaluacin - Las pruebas para la GUI se pueden hacer de varias maneras. La organizacin puede tener inspeccin interna, una implicacin directa de los usuarios, o se puede sacar una versin beta. Las pruebas pueden incluir usabilidad, compaibilidad, aceptacin por parte del usuario, etc.
Herramientas de implementacin de la GUI
Hay muchas herramientas disponibles con las que los diseadores pueden crear la totalidad de las GUI. Algunas herramientas se pueden incorporar en en entorno software(IDE).
La implementacin de las herramientas de la GUI ofrece un poderoso despliegue de controles de GUI. Para la customizacin del software customization, los diseadores pueden cambiar el cdigo en acorde.
Hay distintos segmentos de las herramientas GUI segn su uso y su plataforma.
Ejemplo
GUI para mvil, para ordenador, para pantalla tctil, etc. Aqu se enumeran algunas herramientas tiles para la construccin de una GUI:
- FLUID
- AppInventor (Android)
- LucidChart
- Wavemaker
- Visual Studio
Reglas de oro para una interfaz de usuario
Las siguientes reglas se consideran reglas de oro para el diseo de una GUI. Fueron descritas por Shneiderman y Plaisant en su libro ('Designing the User Interface', en espaol 'Diseando interfaces e usuario').
Esfuerzo de coherencia - Las secuencias coherentes de acciones son requeridas en situaciones similares. Se debe usar terminologa idntica en mens, prompts, y pantallas de ayuda. Los comandos coherentes deben ser empleados en de punta a cabo.
Posibilitar el uso de atajos a usuarios frecuentes - El deseo del usuario por reducir el nmero de interacciones se incrementa con la frecuancia de uso. Las abreviaciones, funciones clave, comandos escondidos, y facilidades macro son muy tiles para un usuario experto.
Ofrecer retroalimientacin informativa - Para cada accin del operador, debe haber alguna retroalimentacin de sistema. Para acciones menors y frecuentes, la respuesta debe ser modesta, mientras que para acciones no frecuentes y mayores, la respuesta debe ser ms substancial.
Disear dilogo para permitir el cierre - Las secuencias de acciones se deben organizar en grupos con un inicio, ncleo, y final. La retroalimentacin informativa cuando se completa un grupo de acciones da a los operadores una gran satisfaccin de logro, un sentimiento de alivio, la seal de abandonar planes y opciones de contingencia de sus mentes, y esto indica que el camino a seguir es claro y se pueden preparar para el siguiente grupo de acciones.
Ofrecer tratamientos de error simples - Disee tanto como sea posible el sistema para que el usuario no haga errores graves. Si se comete un error, el sistema debe poder detectarlo y ofrecer mecanismos simples y comprensibles para tratar el error.
Permitir dehacer acciones facilmente - Esta caracterstica reduce la ansiedad, ya que el usuario sabe que los errores se pueden deshacer. Esto motiva la exploracin de opciones nuevas y no familiares. La unidades de reversibilidad pueden ser una sola accin, una entrada de datos, o un grupo de acciones.
Permitir la ubicacin interna de control - Los operadores con experiencia desean de todo corazn poder sentir que tienen el control del sistema y que el sistema responde a sus acciones. Disee el sistema de modo que los usuarios puedan iniciar acciones en vez de ser los que responden.
Reducir la carga de memoria a corto plazo - La limitacin humana para procesar informacin con una memoria a corto plazo hace necesario mantener la pantalla de forma simple, as como mostrar las pginas de forma coherente, reducir la frecuencia de 'window-motion' y asignar un tiempo de formacin suficiente para los cdigos, mnemnicos, y las secuencias de acciones.