Universidad de Talca

Gua Bsica de Diseo de Interfaz de Usuario

Creadores : Jose Luis Del Solar Pablo Pareja Curso: Taller de desarrollo de Software Area: Diseo de Interfaz Fecha: 25/04/2009

Indice
Tema Introduccin Denicin del formato de la pagina Encabezados de pgina Navegacin mundial Pestaas Busqueda Banners Columnas de exploracin Izquierda o derecha columnas de exploracin para la navegacin? Elementos estndares (estereotipos) Cuadros de alerta de primer nivel Cuadros de alerta de segundo nivel Cuadros de alerta de tercer nivel Mens (deben ir en la cabeceras de todas las paginas) Grid, grilla de datos o rejillas Formularios Buttons radio Checkboxes Sliders Flechas de control Cuadros de texto Combos Botn Esquema de formulario Evitar incomodidad Orden Anexos Referencias pagina 3 4 4 5 5 6 6 7 7 8 8 8 9 10 11 13 13 14 14 15 16 16 17 17 17 17 18 18

Introduccin
El diseo de las interfaces de usuario es un rea vasta y a menudo mal comprendida del diseo de aplicaciones. Muchas veces, en el desarrollo de aplicaciones, se utiliza una gran cantidad de tiempo en el diseo de los datos y el esqueleto de la aplicacin, pero se usa muy poco tiempo en el diseo de las interfaces. Construimos formularios y ponemos controles en ellos, sin preocuparnos por los objetivos del usuario. Construimos sistemas de mens sin preguntarnos sobre dnde deberan estar las opciones para ser ms tiles. Los formularios tienden a estar recargados a medida que tratamos de comprimir en ellos hasta el ltimo detalle de la informacin. El objetivo de esta sesin es introducir algunos conceptos fundamentales para el diseo de las interfaces de usuario. Para los prototipos en esta etapa de desarrollo no se crearan metforas ni se decidirn colores, ni nada relacionado con la esttica, por lo que para la realizacin del prototipo debe utilizarse los elementos estndar de la aplicacin elegida (.NET), ya que esta tecnologa utiliza los formularios en HTML los botones o cuadros de texto sern denidos por look and feel dejando al sistema operativo encargado de la esttica. En el siguiente documento se presentaran 4 tpicos principales: mens, cuadros de dialogo, elementos de formulario o controles (checkboxes, sliders, buttons radio, echas de control, cuadros de texto, etc.) y botones, ademas se denirn elementos estereotipos tales como: cuadros de alerta, cuadros de manejo de archivos, etc.. La siguiente no es una gua de estilo solo una introduccin a la forma de exponer la informacin y poder hacerla ms usable al usuario.

1.- Denicin del formato de la pagina. Estructura y Diseo del Sitio Los "sitios" WEB son abstracciones completas que no existan, salvo en nuestras cabezas. Cuando identicamos un sitio como tal, realmente lo que estamos describiendo es una coleccin de pginas individuales que comparten un mismo aspecto grco y de navegacin. Lo que crea la ilusin de continuidad a travs de un coherente "sitio" es el diseo de las pginas que comparten caractersticas. Pginas html individuales y la forma en que se disean y son vinculadas unidades de sitios web, y todo lo que caracteriza la estructura del sitio debe aparecer en la pgina de plantillas. Como la web ha madurado en el ltimo decenio, la estructura de las pginas web en el texto impulsado por sitios de informacin se ha vuelto ms uniforme y predecible. Aunque no todas las pginas web compartir la disposicin exacta y caractersticas que se describen aqu, la mayora de las pginas web incorporan algunos o todos estos componentes bsicos, en la pgina que se han convertido en lugares familiares para los usuarios de Internet (Figura 1).

Figura 1 - Un diseo de pgina cannico y de los principales elementos de la pgina. 1.1.- Encabezados de pgina: Encabezados de pgina son como versiones en miniatura de la pgina de inicio que se sientan encima de cada pgina y hacen muchas de las cosas que las pginas han de hacer, pero en un espacio limitado. Las cabeceras deben proporcionar identidad. La ubicacin exacta y la disposicin de los componentes varan de un sitio a otro, pero el patrn de diseo se ha convertido en bastante coherente.

Cabeceras son los componentes ms visibles de la identidad del sitio. Lo que parece real es real: una coleccin de pginas que comparten los encabezados se percibe como un "centro" de las pginas, incluso si proceden de fuentes muy diversas tcnicas en nuestro proyecto .Net. La colocacin del logotipo de la organizacin o un sitio en la esquina superior izquierda de la pgina y la vinculacin de ese logo a la pgina es un mtodo muy utilizado y una convencin que se debe adoptar. Si no est utilizando un logotipo o grco en su cabecera, por lo menos poner un "hogar", situado en la esquina superior izquierda de la pgina, donde el 99 por ciento de los usuarios esperan encontrar. 1.2.- Navegacin mundial: Cabeceras son la localizacin ms frecuente de los enlaces de navegacin global que abarcan el sitio. El arreglo ideal es usar una lista de enlaces html, con estilo css para extender horizontalmente a travs de una seccin de la cabecera. Esto le da: A.- Usabilidad: global donde los usuarios esperan para ver la mayora de ellos B.- Semntica lgica: la recopilacin de enlaces debe marcarse como una lista, porque, se trata de una lista C.- Accesibilidad: el formato de lista de enlaces aparece temprano en el listado de cdigo, cuando tenga que ser D.- Bsqueda de visibilidad: una coleccin de sus palabras clave principales de navegacin, vinculada y en la parte superior del listado de cdigo, es ideal para la optimizacin del motor de bsqueda 1.3.- Pestaas: Estas son muy utilizadas, de fcil comprensin y de convencin mundial para la navegacin. La mejor manera de aplicar las pestaas es a travs de estilo comn, html con una lista css tratamiento ms elaborado para formar la "cha" grca alrededor de cada enlace. seleccione la cha debe ser grcamente inequvoca, y el resto de pestaas debe ser claramente detrs de la pestaa seleccionada. Este tipo de "usted est aqu" marcador es esencial en la orientacin de los usuarios en el sitio. Las pestaas tambin se puede utilizar para aplicar una de dos niveles de navegacin rgimen, en el que una secundaria lista de enlaces horizontales aparece bajo la pestaa seleccionada, una vez ms como una simple lista con estilo css en html, para que las cosas sean semntica, accesibles y visibles (g. 2).

Figura 2 - La forma cannica de los encabezados de pgina est dominada por bandas horizontales de enlaces y herramientas, una o varias de identidad grca, y, en muchos sitios, la publicidad. El reparto de personajes es bastante coherente, pero la forma exacta de las cabeceras puede variar un poco. 1.4.- Bsqueda: Todos los sitios con ms de algunas decenas de pginas deben ofrecer locales de bsqueda del sitio. La zona superior derecha de la cabecera es una localizacin popular para los cuadros de bsqueda, sino un cuadro de bsqueda de cabecera debe ser necesariamente fcil de encajar en esta rea relativamente pequea (Fig. 4). Si necesita ms espacio de pantalla para los controles y ofrecer ms opciones a la bsqueda del usuario, puede considerase la localizacin de la bsqueda en las columnas de la izquierda o la derecha las de la pgina. Cabe hacer referencia que esta es una bsqueda rpida ya que se requerir de una pagina especica para hacer bsquedas ms especicas.

Figura 4 - Una cabecera basada en el cuadro de bsqueda. 1.5.- Banners Los sitios a menudo usan una gran rea reservada por encima de otros componentes para los banners de publicidad, la investigacin muestra que los usuarios comnmente esperan ver los anuncios de banner en esta rea de la pgina. Esta convencin tiene importantes consecuencias, incluso si el sitio no utiliza los anuncios de banner, a causa del fenmeno ampliamente observado de la "ceguera de banners". Lectores comnmente ignoran las zonas de la pantalla que suelen contener publicidad, sobre todo si el contenido grco se parece a un banner. Asegrese de que su pgina y otras cabeceras de los grcos no utilizan

fuertemente los grcos, o sus lectores pueden ignorar elementos importantes de su interfaz de usuario. 1.6.- Columnas de exploracin. Subdividir el campo en las pginas, regiones funcionales es una caracterstica fundamental del diseo grco moderno. Temprano en la web de la historia, los diseadores comenzaron a usar las columnas en el borde de la pgina para organizar los enlaces de navegacin y otros elementos de la pgina, por mucho que las columnas de exploracin se han utilizado en publicaciones impresas durante un siglo o ms. La investigacin de la WEB sobre las expectativas de los usuarios es ahora compatible con la prctica comn de la localizacin de enlaces de navegacin, especialmente la seccin de navegacin en la columna de la izquierda. Las columnas tambin son tiles como lugares de cuadros de bsqueda WEB, direccin postal e informacin de contacto, y otras ms pequeas pero necesario elementos de la pgina. La investigacin muestra que a la izquierda bajo la columna de exploracin es el segundo lugar que la mayora de los usuarios buscar funciones de bsqueda, despus de la cabecera (Fig. 5).

Figura 5 - Ms all de las variaciones superciales, estilo visual la exploracin de columna se han convertido en diseos muy coherente en las principales ventas de contenido y sitios web. 1.7.- Izquierda o derecha columnas de exploracin para la navegacin? Amplio seguimiento de los ojos del usuario y la investigacin dicen que en realidad no importa si usted usa la izquierda o la derecha para la exploracin de columnas. Los usuarios parecen intercalar muy bien en ambos sentidos, siempre que sean coherentes sobre el lugar donde poner las cosas. Estamos a favor de la columna de la izquierda de navegacin, simplemente porque esa es la prctica ms comn. A.- Direccin de correo electrnico de contacto: Bsico, "mundo real" informacin acerca de la empresa, duea del sitio, donde la empresa, y cmo ponerse en contacto con la empresa a menudo es difcil de encontrar en otros sitios bien diseados. Si usted vende un producto o servicio, no desea esconderse de sus clientes.

Debe mostrarse su informacin de contacto en un lugar prominente, como la columna de exploracin, en cada pgina. B.- La publicidad y la exploracin de las columnas: Nuestro consejo acerca de los anuncios de la exploracin de la columna es el mismo que con los anuncios de cabecera (arriba): cuidado! A menudo, los usuarios hacen caso omiso de los contenidos que se parecen a la publicidad cuando lo ven en una columna de exploracin. C.- El rea de contenido: El contenido de la Web es tan multifactico que algunas normas generales de aplicacin, pero las siguientes prcticas comunes que las reas de contenido ms fcil de usar. D.- Ttulos de pginas. No enterrar la cabeza. Cada pgina necesita un nombre visible en la parte superior. E.- Breadcrumb navegacin. La parte superior del rea de contenido es el ms comn para la ubicacin de la ruta de navegacin. F.- Saltar a vnculos superiores. Saltar enlaces son una buena mejora a largo pginas. Estos vnculos no deben ser-slo elaborar un vnculo superior de la pgina lo har, pero una pequea echa arriba icono ofrece buenas refuerzo. G.- Otros: se debe mostrar una fecha de ltima actualizacin en la parte inferior del rea de contenido (Figura 6).

Figura 6 - Tpico contenido zona componentes.

2.- Elementos estndares (estereotipos): 2.1.- Cuadros de alerta de primer nivel: Estos cuadros son en su esttica denidos por el sistema operativo, sin embargo, se debe darles formato, lo que se debe denir ahora es el orden en que se presentan los elementos, ya sea texto, botones, etc. Existen 3 clases segn su nivel de manejo de informacin. Cuadro de alerta de primer nivel (nota de alerta): Por lo general este cuadro de alerta solo tiene un botn ok en este caso el usuario solo puede responder a la informacin de una manera, se utiliza para transmitir informacin que sea til al usuario, pero que no presenta ninguna amenaza con una perdida de informacin. Este esta estructurado de la siguiente manera, una pequea metfora (foto) que simboliza el nivel de peligrosidad, texto explicando la alerta y el botn en la esquina inferior derecha, la metfora ser denida con posterioridad. Figura 7.

Figura 7. 2.2.- Cuadro de alerta de segundo nivel (alerta de cuidado): El cuadro de alerta de segundo nivel o alerta de cuidado o precaucin, se trata de una alerta ms severa. Este cuadro trata de advertir al usuario de una posible accin de peligro, esta informacin proporciona una red de seguridad para el usuario. La distribucin de este cuadro de alerta es igual al de primer nivel con la diferencia que este ofrece al usuario la opcin de cancelar para cancelar la accin y hacer algo ms. El botn aceptar o continuar debera ser el botn predeterminado, amenos que el usuario tenga que realizar alguna otra accin a n de evitar la perdida de datos. En algunos casos se puede agregar un checkbox para que el mensaje no se vuelva a mostrar en otra ocasin. Figura 8.

Figura 8.

2.3.- Cuadro de alerta de tercer nivel (alerta de detencin) Este cuadro notica al usuario de que una accin no puede llevarse a cabo. Por lo general slo tienen un botn, el botn ok. Al igual que con el cuadro de alerta de primer nivel, el usuario puede slo reconocer la advertencia y aceptar el cuadro de alerta. La gura 9 muestra un ejemplo de un cuadro de alerta de tercer nivel. Este cuadro se utiliza cuando el usuario trata de realizar una accin que es imposible de realizar en el contexto actual en el contexto actual.

Figura 9. Para los dems elementos estndares como el desea guardar antes de salir, se utilizara los correspondientes al sistema operativo en donde se utilice. 3.- Mens (deben ir en la cabeceras de todas las paginas): A continuacin se describen los tipos de mens que se utilizaran en la aplicacin, mens desplegables, jerrquicos, pop-up,paletas. Tambin se describe en detalle la apariencia y el comportamiento de estos tipos de men incluyendo cmo deben ser los elementos de men redaccin y los smbolos que se pueden utilizar en estos. El usuario puede navegar por los mens, los mens desplegables estn disponibles en la barra de mens. Jerrquico mens que incluyen submens que descienden desde el men. Son similares a los mens de las aplicacin comunes como son archivo, edicin, formato, etc. con al diferencia que deben ser adaptados al usuario. A continuacin una breve descripcin de como deben ser, por ahora solo se utilizara un cuadro con los mens necesarios como se dijo desplegables hacia abajo, estos no deben estar dentro de un frame o de un cuadro, deben estar dentro del contexto de la pagina WEB en la parte superior. Los submenus llevan el mismo formato con la diferencia que estos pueden estar dentro de una parte de pagina WEB como puede ser administracin de propiedades, sin embargo el men general debe ser cabecera en todas y cada una de las paginas incluyendo el software de gestin. En la gura 10 se presenta como deben ser estos, por ahora el la realizacin de metforas, colores y otros queda para los posteriores anlisis de requerimientos.

Figura 10 - Se puede apreciar que es un control web que trata de simular una herramienta estandarizada que son los mens de las aplicaciones Desktop. 3.1.- Grid, grilla de datos o rejillas. En .Net existe grillas especiales para mostrar datos referentes a la base de datos (gridview), sin embargo el diseo de estas es importante para mostrar otro tipo de datos. Denido por las etiquetas <Grid></Grid>,, en un grid se pueden denir sub regiones contenedoras establecidas por columnas (Grid.Column) y renglones (Grid.Row) similar a una tabla, creando celdas, donde los controles se posicionan relativos al rea delimitada por la celda, permitiendo con esto un arreglo ordenado de la interfaz de usuario. En el diseador de Visual Studio se puede mover el control de manera libre, sin embargo, para que se limite el control a una celda del grid se deber especicar las propiedades Grid.Column y Grid.Row en el mismo, ya que de no hacerlo se tendr un efecto parecido al canvas dejando al control libre en el rea total del Grid. Coherencia y la previsibilidad son atributos esenciales de cualquier buen diseo de sistemas de informacin. El diseo de grillas que se basan ms bien en diseos de publicaciones en papel son igualmente necesarios en la elaboracin de los documentos electrnicos y publicaciones en lnea, donde la relaciones espaciales entre y los elementos de la pantalla cambian constantemente en respuesta a la entrada del usuario y la actividad del sistema. Cuando se utiliza inadecuadamente o incoherentemente, los controles tipogrcos y grcos de las pginas WEB pueden crear una confusa mezcla visual, sin aparente jerarqua de importancia. Al azar de texto y grcos mezclados disminucin usabilidad y legibilidad, tal como lo hacen en pginas de papel. Un equilibrado y coherente diseo de aplicacin aumentar la conanza de los usuarios en su sitio, puede verse en la gura 11.

Figura 11 - Incluso cuando la pgina donde esta la grilla es slida, un buen diseo depende de la creacin de una jerarqua de contraste y el visor de la atencin, de manera que algunas de las reas focales de la pgina en los puntos de entrada y los dems materiales de la pgina son claramente secundarias. Si existen cambio de gestin del diseo puede tener muchos elementos aleatorios, que compiten por la atencin del lector.

4.- Formularios Los formularios son usados para comprar, registrarse, buscar, suscribirse, asociarse, etc. En el software podra ser publicar propiedad o buscar propiedad. Todos ellos procesos bsicos para la supervivencia de un sitio web y su eslabn ms frgil. Cuando un usuario se decide a completar un formulario ya ha tomado una decisin (compra, suscripcin, registro, etc.) y esta dispuesto a llevarla a cabo. El sitio web ha tenido xito y solo falta que el cdigo haga su parte. Entre la intencin del usuario y un exitoso cumplimiento, el factor ms importante es la usabilidad. De ella depender que el usuario se siente cmodo antes durante y despus de haber llenado o realizado el formulario. 4.1.- Buttons radio: Este elemento no es mas que un control que muestra un ajuste y es parte de un grupo en que solo uno puede ser seleccionado, sea el usuario solo puede tener un button radio seleccionado esto se signica que estos controles se excluyen mutuamente. Cada ves que se ejecuta uno los dems deben apagarse automticamente en la Fig. 5 se presenta lo que se un buttons radio, aunque ya se debera estar familiarizado con este control. La redaccin de las respuestas es esencial porque muchos usuarios no leen el enunciado de la pregunta y solo lo ineren del conjunto de respuestas posibles.

Figura 12 - Generalmente si las posibles respuestas son largas y ms de dos, es mejor la alineacin vertical. Aunque si la respuesta tiene solo dos posibilidades, tipo "sexo", se puede optar tambin por presentarlas en horizontal, para ocupar menos espacio.

Figura 13

4.2.- Checkboxes: Los checkbox son casillero de vericacin al igual que los buttons radio, ofrecen alternativas para los usuarios. Estos son cuadros con una etiqueta de texto a su lado. El usuario hace clic en ellas para seleccionar o anular la alternativa. Cuando la opcin esta activada debe aparecer una x o un tic en el cuadro para sealar que esta activado. Actan como cajas de interruptores on off, a diferencia de los buttons radio estos estos pueden seleccionarse ninguno uno o varios. En la gura 14 puede verse un ejemplo de estos.

Figura 14 4.3.- Sliders: Un slider (tambin llamado dial) muestra el rango de valores, la magnitud, o posicin de algo en la aplicacin o sistema. Un indicador que seala el ajuste actual. Algunos sliders permiten a los usuarios modicar el valor de la barra de mover el indicador hacia arriba y hacia abajo o de lado a lado segn sea la orientacin. Sliders pueden ser analgicas o digitales estos ultimo muestran sus valores grcamente. Figura 15 muestra un ejemplo de un control Sliders.

Figura 15 - Pude colocarse la opcin de tener formas alternativas como combos para seleccionar el numero o lo que se desea seleccionar. Se pueden disear en HTML a partir de un select con una herramienta desarrollada por jQuery UI en http://docs.jquery.com/UI/Slider

4.4.- Flechas de control: Este control son dos echas apuntando en direcciones opuestas es llamado Flechas de control. Se utiliza para aumentar o disminuir los valores de una serie. La gura gura 16 muestra un ejemplo de echas de control.

Figura 16 4.5.- Cuadros de texto: El cuadros de textos o cuadros de entrada de texto suele ser una caja rectangular en un cuadro de dilogo donde los usuario introduce un texto para identicar algo. Por ejemplo, en el cuadro de dilogo Guardar como, el usuario escribe en el nombre de una documento. La gura 17 muestra un ejemplo de un cuadro de entrada de texto. En general deben ir acompaados de un texto explicativo de que debe escribirse o que cosas pueden ser ingresadas en el cuadro. Son los preferidos por los usuarios que saben que pueden escribir casi cualquier cosa.

Figura 17 Cabe destacar el punto de la longitud del campo es importante porque da a los usuarios la clave sobre la longitud de la respuesta esperada, ello les hace ajustarla y comprender mejor la pregunta. Por ejemplo, pueden deducir que si su respuesta ocupa ms espacio del disponible posiblemente no sea la adecuada. En la direccin (calle, interseccin, numero, departamento, etc.) es adecuado un solo campo de texto. Un usuario necesita menos tiempo para completar un nico campo, porque lo hace muy frecuentemente y no es fcil que cometa errores. En algunos casos la excesiva separacin de los datos en diferentes campos provoca errores porque no es posible incluir absolutamente todos los posibles elementos de la direccin (piso, escalera, puerta, bloque, escalera, patio, etc.), lo que puede confundir al usuario y originarle una falta de conanza en el correcto resultado del proceso. La fecha es uno de los campos de texto que ms errores genera en la mayora de los formularios. Casi siempre incluye un ejemplo de formato o requiere de usar combos muy incmodos no justicados para un dato tan sencillo asi en la gura 18 se especica la fecha:

Figura 18 - Una validacin de errores tolerante con la falta de ceros a la izquierda y que tambin acepte solo dos dgitos en el ao permitir un funcionamiento adecuado. Un error tpico es introducir el salto automtico entre campos de texto consecutivos y hacer innecesario el uso del tabulador. Aunque este comportamiento puede parecer que facilita la tarea de introduccin de datos, no es adecuado porque quita control a los usuarios, no es un funcionamiento estndar y es necesario mirar la pantalla para saber en que campo se est. Todo ello puede provocar fcilmente errores, como por ejemplo, introducir datos pertenecientes a un campo en el siguiente cuando no se introduce el formato esperado por el salto automtico. En la validacin de campos de texto, se recomienda aceptar algunos "errores" comunes como espacios en los nmeros de telfono, los puntos de millares o el uso indistinto de maysculas o minsculas, estos deben ser ajustados por el software para su ingreso a la base de datos. 4.6.- Combos Los combos se utilizan para restringir la respuesta de una pregunta a unas determinadas opciones de respuesta, de las cuales solo es posible escoger una. En realidad son muy parecidos a los buttons radios, pero su uso es algo distinto. La gran diferencia es que las respuestas de los combos estn ocultas para ocupar menos espacio (estos tambin pueden mostrarse abiertos, pero se pierde espacio) en el formulario. Sin embargo para que los combos sean usables deben contener opciones ms simples que en los buttons radio. Estas opciones han de ser completamente predecibles, sencillas e inequvocas. Si se ha de desplegar el combo para comprender las opciones contenidas en un combo, no se cumple el principio de la visibilidad. En este ejemplo (gura 19 y gura 20) hasta que no se despliega este combo:

Figura 19 - no se pueden comprender las opciones contenidas en el:

Figura 20 Como se a comentado anteriormente, muchos usuarios ni siquiera leen el enunciado de las preguntas, sino que se limitan a escoger una respuesta de entre las posibles. Si las opciones de los combos no son predecibles o sencillas, este proceso de eleccin y comparacin entre posibles respuestas se diculta mucho. Los combos se utilizan para evitar errores en la introduccin de informacin, pero en ese sentido solo se deben utilizar cuando la importancia de la correccin de los datos sea tan crtica que obligue a ello. No es razonable utilizar combos indiscriminadamente y para

opciones innecesarias u otras demasiado largas. Por ejemplo, si en el combo "pas" se incluyen todos los pases del mundo se hace muy difcil de utilizar. El usuario escribe antes el nombre del pas manualmente que seleccionndolo en un combo de ms de 100 opciones. Adems "pas" en la mayora de los casos no es un campo crtico. 4.7.- Botn El nombre del botn suele aparecer con un tamao de 12 puntos con letras courier. Si el botn no esta disponible debe aparecer atenuado en un 50% de su color, un cierto gris. Todas las fuentes usadas para los botones se vuelven ilegibles cuando los botones estn desactivados. No usar un botn para limpiar el formulario: El botn Borrar formulario o Limpiar, como tambin se le llama, generalmente no es utilizado. Es poco til porque en la mayora de las ocasiones al usuario no le interesa borrar todo lo que escribi. Si se equivoca en algo simplemente arregla el detalle y deja el resto del formulario intacto. Pero a veces nos sucede que al escribir rpido y hacer clic en un botn sin jarnos cul es o por el uso de la tecla TAB para movernos por los controles; sin querer se presiona este botn y echamos por tierra el mensaje que habamos elaborado. Es por esto que lo ms recomendable para evitarle al usuario estas situaciones molestas es no colocar este tipo de botn en nuestro formularios. Los botones actan como un botn tipo SUBMIT, puesto que envan los datos del formulario. 5.- Esquema de formulario: 5.1.- Evitar incomodidad: Para evitar la incomodidad del cambio entre teclado y ratn, es recomendable, cuando tenga sentido, agrupar por un lado los controles que se manejan con el ratn (buttons radio, checkboxes, combos, sliders, etc.) y por otro los que se manejan con el teclado (cuadros de texto), en lugar de alternarlos. 5.2.- Orden: Para terminar deniremos rpidamente los ordenes que deben seguir los formularios. 1.- Buttons Radio Checkboxes: Siempre se han situar a la izquierda de la etiqueta del campo, as se favorece la alineacin vertical de todos los controles. 2.- Sliders y Flechas de control: Estos controles no son convencionales por lo que no tienen una especicacin en donde deben ser ubicados en el formulario, los diseadores de prototipos pueden colocarlos en el lugar que ms les parezca, esto ser revisado y estudiado, para poder denir la mejor ubicacin y manejo, pero para los prototipos que se requiere, quedan a opcin del programador o del usuario. 3.- Cuadro de texto: Debern colocarse preferentemente bajo todos los dems controles, y a la y por el contrario a los checkboxes y buttons radio los campos de texto deben situarse a la derecha de la etiqueta del campo.. 4.- Botones: Estos sern ubicados en la parte derecha lo ms abajo posible, pueden existir excepciones, sin embargo, estas debern ser las menos.

En la gura 21 se aprecia un ejemplo con la mayora de los elementos explicados.

Figura 21 - se puede apreciar a la izquierda del formulario los Buttons Radio y Checkboxes, a pesar de que este formulario esta divido en por una barra vertical, los botones al nal de el formulario y los cuadros de texto a la izquierda.

Anexo A: A.- Para agregar un control mediante sintaxis ASP.NET 1.- Cambie a la vista HTML. 2.- Escriba el elemento que representa el control en el archivo .aspx. En Visual Studio, haga esto en la vista HTML. La sintaxis exacta que debe utilizar depende del control que est agregando, pero en general se aplican las siguientes reglas: Los controles deben incluir el atributo runat="server". Establezca el atributo ID del control, a menos que el control forme parte de un control complejo y vaya a repetirse (como ocurre en los controles Repeater, DataList y DataGrid). Los controles de servidor Web se declaran con una etiqueta XML que hace referencia al espacio de nombres asp. Las declaraciones del control deben cerrarse correctamente. Se puede especicar una etiqueta de cierre explcita o, en caso de que el control no tenga elementos secundarios, puede especicarse una etiqueta de cierre automtico. Las nicas excepciones son los controles de entrada HTML que no pueden tener elementos secundarios, como los controles de entrada. Las propiedades del control se declaran como atributos. En los siguientes ejemplos se muestran declaraciones tpicas para controles de servidor Web:

 Para obtener informacin sobre la sintaxis declarativa de un control de servidor Web concreto, busque "Controles Web" en el ndice de la Ayuda y elija el nombre del control que desee. NotaSi el Diseador de Web Forms no puede procesar correctamente un control de servidor Web, muestra un cuadro gris con el texto "Error al crear el control". Esto normalmente signica que la sintaxis ASP.NET del control es incorrecta, por ejemplo, puede aparecer si falta el atributo runat="server" en un elemento del control de servidor Web.

Referencias http://msdn.microsoft.com/es-es/default.aspx Macintosh Human Interface Guidelines Apple Web Design Guide W3C Guias Rapidas: http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/