Diseño de Interfaz de Usuario - Red social Huella

76
Huella | Universidad Autónoma de Sinaloa 201 3 Facultad de Informática Culiacán 17 / 05 / 2013 Carrera Instructor Lic. en Informática Rubén Heildelberg Alumnos 1 Facultad de Informática Culiacán
  • date post

    19-Oct-2014
  • Category

    Technology

  • view

    263
  • download

    1

description

Diseño de interfaz de usuario, ejemplo

Transcript of Diseño de Interfaz de Usuario - Red social Huella

Page 1: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Facultad de Informática Culiacán

17 / 05 / 2013

Carrera InstructorLic. en Informática Rubén Heildelberg

Alumnos

Campas Chaves Yuridiana

Escalante Godinez Alfredo Humberto

Sánchez López Dulce Maribel

Descripción

1 Facultad de Informática Culiacán

Page 2: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

ContenidoAntecedentes del proyecto..........................................................................................................3

Nombre de proyecto:...................................................................................................................3

Red Social Huella..........................................................................................................................3

Objetivos......................................................................................................................................3

Descripción...................................................................................................................................3

Sección Web.................................................................................................................................7

Análisis.....................................................................................................................................7

Diseño....................................................................................................................................47

2 Facultad de Informática Culiacán

Page 3: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Antecedentes del proyecto

El auge de las redes sociales surge después de la creación de Facebook teniendo como

fundador a Mark Zuckerberg, el éxito es tan impresionante que logra derrotar a la web más

visitada del mundo de todo los tiempos “Google”, además de convertirse en el lugar donde los

usuarios de internet pasan mayor parte de su tiempo. Sin embargo, existen necesidades que

está red social no ofrece y una de ellas, es la capacidad de guardar cosas como favoritos, o

personalizarlas, cayendo así en un igualísimo.

Nombre de proyecto:

Red Social Huella

Objetivos

Desarrollar una red social para el público en general que sea fácil de utilizar y genere

confianza en el usuario.

Desarrollar una red social que sea capaz de soportar aplicaciones flash para generar

entretenimiento a los usuarios.

Desarrollar una red social que pueda competir con el mercado actual, cumpliendo con

la calidad que hoy en día se exige en internet y aportando algo nuevo, como la

personalización de perfiles.

Descripción

Crear una red social que permita a los usuarios tener un perfil en ella, agregar a otros usuarios

de así como la comunicación de los mismos, administrar archivos e imágenes, personalizar su

espacio, integrar aplicaciones desarrolladas en flash y crear grupos de amigos.

Además tendrá administradores que gestionaran a los usuarios y a los contenidos que se

publican en ella, teniendo la posibilidad de eliminar una imagen inapropiada o a un usuario

que este creando conflictos. También podrán enviar boletines a los usuarios que lo permitan.

Análisis de requisitos

Administración de Eventos

Administración de Publicaciones

Personalización de perfil (colores,

contador de visitas).

3 Facultad de Informática Culiacán

Page 4: Diseño de Interfaz de Usuario - Red social Huella

Red Social

Administradores

Desarrolladores

Competencia

Usuarios

Gobierno

Huella | Universidad Autónoma de Sinaloa 2013

Administración de Grupos

Administración de Favoritos

Administración de Fotos

Administración de Videos

Administración de Páginas

personales

Visualización de noticias

Visualización de recomendados

Administración de solicitudes de Amistad

Registro

Login

Análisis de implicados

Clasificación de los usuarios, perfiles y roles

4 Facultad de Informática Culiacán

Page 5: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Análisis contextual

La mensajería instantánea (conocida también en inglés como IM) es una forma

de comunicación en tiempo real entre dos o más personas basada en texto. El texto es enviado

a través de dispositivos conectados a una red como Internet.

Una primera forma de mensajería instantánea fue la implementación en el

sistema PLATO usado al principio de la década de 1970. Más tarde, el

sistema talk implementado en UNIX/LINUX comenzó a ser ampliamente usado por ingenieros y

académicos en las décadas de 1980 y 1990 para comunicarse a través de internet. ICQ fue el

primer sistema de mensajería instantánea para ordenadores con sistema operativo distinto de

UNIX/LINUX en noviembre de 1996.

Sin embargo en 2007 eso cambiaria con facebook, ya que no se necesitaría instalar alguna

aplicación en su máquina de escritorio (que esto conlleva a la compatibilidad de S.O.). Sólo

5 Facultad de Informática Culiacán

Usuarios

Administración de EventosAdministración de PublicacionesAdministración de GruposAdministración de FavoritosAdministración de FotosAdministración de VideosAdministración de Páginas personalesPersonalización de perfil (colores, contador de visitas).Visualización de noticiasVisualización de recomendadosAdministración de solicitudes de Amistad

Administra

dor Gestionar usuarios. Gestionar contenido.

Visitante

LoginRegistro

Page 6: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

bastaría con tener el navegador instalado (por lo general los S.0. traen uno instalado) y tener

acceso a internet para poder comunicarse con los demás, sin embargo, facebook no ofrece una

personalización de diseño, y esto hace que los usuarios pierdan su autenticidad, algo que nos

caracteriza a todos los seres humanos.

Plataforma

¿Qué ofrece?

Personalización de perfiles.

Gestor de archivos.

Gestor de contenidos.

Gestor de amigos.

Gestor de aplicaciones.

Búsqueda de personas.

Dirección de Email.

Administrador de páginas.

Portal de noticias

¿A qué se limita?

No incluye reconocimiento facial.

No incluye reconocimiento de voz.

No se vincula con otras plataformas (twitter, facebook).

No incluye bonificaciones a desarrolladores de aplicaciones flash.

Soportar aplicaciones menores a 40 mb

No incluye soporte(para usuarios).

Objetivos Funcionales:

Lograr que la población tenga la posibilidad de comunicarse y compartir sus intereses

de manera confiable y auténtica.

Evaluar periódicamente y de manera sistemática el funcionamiento del sistema

(actualizaciones), así como la eliminación de material inapropiado.

Controlar la seguridad para los usuarios.

6 Facultad de Informática Culiacán

Page 7: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Lograr que las entidades, organizaciones públicas, privadas y las personas naturales,

que desarrollen actividades de lucro, se anuncien a través de los boletines que

ofrecemos.

Establecer un entorno agradable y cómodo a los usuarios con exclusividad.

Sección Web

Análisis

Visitante

CASO DE USO Registrarse

ACTOR Visitante

DESCRIPCIÓN El visitante desea registrarse en el sistema

PRECONDICIÓN El usuario proporcionado no debe de existir en la base de datos

CURSO NORMAL ACTOR SISTEMA

7 Facultad de Informática Culiacán

Page 8: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Registrarse

1. El usuario introduce los datos requeridos para el registro.

2. El sistema verifica que el usuario no se encuentre registrado en la base de datos.

3. Se notifica al visitante que ha sido registrado en el sistema.

CURSO ALTERNO ACTOR SISTEMA

2a. El usuario ya se encuentra registrado:

3. Se notifica al usuario que la operación de registro ha fallado

3a. Ha sucedido un error en la base de datos.

4a. Se notifica al usuario que ha sucedido un error y que deberá intentar más tarde.

POSTCONDICIÓN El nombre de usuario no podrá ser registrado por ningún otro visitante.

CASO DE USO Recuperar Contraseña

ACTOR Visitante

DESCRIPCIÓN El visitante desea recuperar su contraseña de usuario

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

8 Facultad de Informática Culiacán

Page 9: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Recuperar Contraseña

1. El visitante introduce el nombre de usuario.

2. El sistema verifica que el usuario se encuentre registrado en la base de datos.

3. Se notifica al usuario que se ha enviado un mensaje con su contraseña a su email.

CURSO ALTERNO ACTOR SISTEMA

2a. El usuario no se encuentra registrado:

3. Se notifica al visitante que el usuario no existe en la base de datos.

3a. Ha sucedido un error en la base de datos.

4a. Se notifica al visitante que ha sucedido un error y que deberá intentar más tarde.

POSTCONDICIÓN El nombre de usuario no podrá ser registrado por ningún otro visitante.

9 Facultad de Informática Culiacán

Page 10: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Login

ACTOR Visitante

DESCRIPCIÓN El visitante desea entrar al sistema como usuario.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

1. El visitante introduce el nombre de usuario y su contraseña.

2. El sistema verifica que el usuario se encuentre registrado en la base de datos.

3.-El sistema válida el usuario con la contraseña.

4. Se notifica al usuario que ha entrado al sistema.

CURSO ALTERNO ACTOR SISTEMA

2a. El usuario no se encuentra registrado:

3. Se notifica al visitante que el usuario no existe en la base de datos.

3a. El nombre de usuario no corresponde con la contraseña.

4. Se notifica al visitante que la contraseña no corresponde a su usuario,

POSTCONDICIÓN El nombre de usuario no podrá ser registrado por ningún otro visitante.

10 Facultad de Informática Culiacán

Page 11: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Usuario

CASO DE USO Inicio-Noticias

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y se le ha redirigido a inicio

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

Deberán de existir noticias

CURSO NORMAL ACTOR SISTEMA

1.- El sistema busca las noticias correspondientes al día en que el usuario está

2.-El sistema muestra las noticias al usuario.

CURSO ALTERNO ACTOR SISTEMA

1a. No se encontraron noticias al día

2. Se notifica al usuario que no hay noticias nuevas

1b. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se pudieron cargar las noticias debido a un error interno.

POSTCONDICIÓN Las noticias deberán ser visibles para el usuario.

11 Facultad de Informática Culiacán

Page 12: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Publicaciones

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de publicaciones

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

Deberán de existir publicaciones,

CURSO NORMAL ACTOR SISTEMA

1.- El sistema busca las publicaciones correspondientes al usuario está

2.-El sistema muestra las publicaciones al usuario.

CURSO ALTERNO ACTOR SISTEMA

1a. No se encontraron publicaciones

2. Se notifica al usuario que no hay publicaciones.

1b. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se pudieron cargar las publicaciones debido a un error interno.

POSTCONDICIÓN Las publicaciones deberán ser visibles para el usuario.

12 Facultad de Informática Culiacán

Page 13: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Evento

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de eventos

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

Deberán de existir eventos,

CURSO NORMAL ACTOR SISTEMA

1.- El sistema busca los eventos correspondientes al usuario está

2.-El sistema muestra los eventos al usuario.

CURSO ALTERNO ACTOR SISTEMA

1a. No se encontraron eventos

2. Se notifica al usuario que no hay eventos.

1b. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se pudieron cargar las publicaciones debido a un error interno.

POSTCONDICIÓN Los eventos deberán de ser visible para el usuario.

13 Facultad de Informática Culiacán

Page 14: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Evento-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea crear un evento nuevo.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el nombre del evento y etiqueta a las personas que ha invitado.

2.- El sistema guarda el evento en la base de datos.

3.- Se notifica al usuario que el evento ha sido creado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido guardar el evento.

POSTCONDICIÓN El evento deberá de haberse guardado en la base de datos.

14 Facultad de Informática Culiacán

Page 15: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Evento-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea modificar un evento.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El evento deberá de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona los datos que desea modificar del evento.

2.- El sistema guarda el evento en la base de datos.

3.- Se notifica al usuario que el evento ha sido modificado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido modificar el evento.

POSTCONDICIÓN La modificación deberá guardarse en la base de datos.

15 Facultad de Informática Culiacán

Page 16: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Evento-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea eliminar un evento.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El evento deberá de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el evento que desea eliminar.

2.- El sistema elimina el evento en la base de datos.

3.- Se notifica al usuario que el evento ha sido eliminado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido eliminar el evento.

POSTCONDICIÓN Se deberá de eliminar el evento de la base de datos.

16 Facultad de Informática Culiacán

Page 17: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Grupos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de grupos

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

Deberán de existir grupos,

CURSO NORMAL ACTOR SISTEMA

1.- El sistema busca los grupos correspondientes al usuario.

2.-El sistema muestra los grupos al usuario.

CURSO ALTERNO ACTOR SISTEMA

1a. No se encontraron grupos

2. Se notifica al usuario que no hay grupos.

1b. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se pudieron cargar los grupos debido a un error interno.

POSTCONDICIÓN Los grupos deberán ser visibles para el usuario.

17 Facultad de Informática Culiacán

Page 18: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Grupos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de grupos y desea crear un grupo nuevo.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el nombre del grupo.

2.- El sistema guarda el grupo en la base de datos.

3.- Se notifica al usuario que el grupo ha sido creado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido guardar el grupo.

POSTCONDICIÓN El grupo deberá de haberse guardado en la base de datos.

18 Facultad de Informática Culiacán

Page 19: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Grupos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de grupos y desea modificar un grupo.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El grupo deberá de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona los datos que desea modificar del grupo.

2.- El sistema guarda el grupo en la base de datos.

3.- Se notifica al usuario que el grupo ha sido modificado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido modificar el grupo.

POSTCONDICIÓN La modificación deberá guardarse en la base de datos.

19 Facultad de Informática Culiacán

Page 20: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Grupos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea eliminar un evento.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El grupo deberá de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el grupo que desea eliminar.

2.- El sistema elimina el grupo en la base de datos.

3.- Se notifica al usuario que el grupo ha sido eliminado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido eliminar el grupo.

POSTCONDICIÓN Se deberá de eliminar el grupo de la base de datos.

20 Facultad de Informática Culiacán

Page 21: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Recomendados

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de recomendados.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

Deberán de existir enlaces de recomendados

CURSO NORMAL ACTOR SISTEMA

1.- El sistema busca los enlaces recomendados.

2.-El sistema muestra los enlaces recomendados.

CURSO ALTERNO ACTOR SISTEMA

1a. No se encontraron enlaces recomendados

2. Se notifica al usuario que no hay enlaces recomendados.

1b. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se pudieron cargar enlaces recomendados debido a un error interno.

21 Facultad de Informática Culiacán

Page 22: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Recomendados

POSTCONDICIÓN Los enlaces recomendados deberán ser visibles para el usuario.

CASO DE USO Inicio-Favoritos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de favoritos.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

Deberán de existir enlaces favoritos.

CURSO NORMAL ACTOR SISTEMA

1.- El sistema busca los enlaces favoritos.

2.-El sistema muestra los enlaces favoritos.

CURSO ALTERNO ACTOR SISTEMA

1a. No se encontraron enlaces favoritos

2. Se notifica al usuario que no hay enlaces favoritos.

1b. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se pudieron cargar enlaces favoritos debido a un error interno.

22 Facultad de Informática Culiacán

Page 23: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Favoritos

POSTCONDICIÓN Los enlaces favoritos deberán ser visibles para el usuario.

CASO DE USO Inicio-Favoritos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de favoritos y desea crear un enlace de favoritos

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el enlace favorito.

2.- El sistema guarda el enlace favorito en la base de datos.

3.- Se notifica al usuario que el enlace ha sido creado.

23 Facultad de Informática Culiacán

Page 24: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Favoritos-Nuevo

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido guardar el enlace favorito.

POSTCONDICIÓN El enlace favorito deberá de haberse guardado en la base de datos.

CASO DE USO Inicio-Favoritos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de enlaces favoritos y desea modificar un enlace favorito.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El enlace favorito deberá de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

24 Facultad de Informática Culiacán

Page 25: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Favoritos-Modificar

1.- El usuario proporciona los datos que desea modificar del enlace favorito.

2.- El sistema guarda el enlace favorito en la base de datos.

3.- Se notifica al usuario que el grupo ha sido modificado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido modificar el enlace favorito

POSTCONDICIÓN La modificación deberá guardarse en la base de datos.

CASO DE USO Inicio-Grupos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de favoritos y desea eliminar un enlace favorito.

25 Facultad de Informática Culiacán

Page 26: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Grupos-Eliminar

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El enlace favorito deberá de existir en la base de datos.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el grupo que desea eliminar.

2.- El sistema elimina el enlace favorito en la base de datos.

3.- Se notifica al usuario que el enlace favorito ha sido eliminado.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido eliminar el enlace favorito.

POSTCONDICIÓN Se deberá de eliminar el grupo de la base de datos.

26 Facultad de Informática Culiacán

Page 27: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Muro

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El sistema deberá cargar la información personal tal y como el número de visitas, imagen de perfil, portada y publicación.

CURSO ALTERNO ACTOR SISTEMA

1a. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se ha podido cargar su información personal

POSTCONDICIÓN Se deberá de cargar la información personal del usuario

27 Facultad de Informática Culiacán

Page 28: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Muro-Publicar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y desea publicar algo.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario envía el texto de su publicación.

2.- El sistema guardara su publicación en la base de datos-

3.- El sistema notificará al usuario que su publicación ha sido guardada con éxito..

CURSO ALTERNO ACTOR SISTEMA

1a. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se ha podido guardar su publicación.

POSTCONDICIÓN Se deberá de guardar la publicación en la base de datos.

28 Facultad de Informática Culiacán

Page 29: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Muro-Publicaciones-Me gusta

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y le ha gustado una publicación por lo cual decide darle me gusta.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

La publicación debe de existir en la base de datos

CURSO NORMAL ACTOR SISTEMA

1.- El usuario selecciona en la parte inferior de la publicación la opción “me gusta”.

2.- El sistema guardara su voto junto a la publicación en la base de datos.

3.- El sistema notificará al usuario que su “me gusta” ha sido guardado.

CURSO ALTERNO ACTOR SISTEMA

1a. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se ha podido guardar su “me gusta”.

POSTCONDICIÓN Se deberá de guardar el “me gusta” junto con la publicación correspondiente.

29 Facultad de Informática Culiacán

Page 30: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Muro-Publicaciones-No me gusta

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y le ha disgustado una publicación por lo cual decide darle no me gusta.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

La publicación debe de existir en la base de datos

CURSO NORMAL ACTOR SISTEMA

1.- El usuario selecciona en la parte inferior de la publicación la opción “no me gusta”.

2.- El sistema guardara su voto junto a la publicación en la base de datos.

3.- El sistema notificará al usuario que su “no me gusta” ha sido guardado.

CURSO ALTERNO ACTOR SISTEMA

1a. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se ha podido guardar su “no me gusta”.

POSTCONDICIÓN Se deberá de guardar el “no me gusta” junto con la publicación correspondiente.

30 Facultad de Informática Culiacán

Page 31: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Inicio-Muro-Publicaciones-Compartir

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y le ha gustado tanto una publicación que ha decidido darle “compartir”.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

La publicación debe de existir en la base de datos

CURSO NORMAL ACTOR SISTEMA

1.- El usuario selecciona en la parte inferior de la publicación la opción “compartir”.

2.- El sistema guardara su compartir junto a la publicación en la base de datos.

3.- El sistema notificará al usuario que su “compartir” ha sido guardado.

CURSO ALTERNO ACTOR SISTEMA

1a. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se ha podido guardar su “compartir”.

POSTCONDICIÓN Se deberá de guardar el “compartir” junto con la publicación correspondiente.

31 Facultad de Informática Culiacán

Page 32: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Buscar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y está buscando algo.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona la secuencia de caracteres a buscar dentro de la base de datos.

2.- El sistema deberá buscar dentro de la base de datos y recuperar las coincidencias.

3.-Se notificara al usuario sobre las posibles coincidencias.

CURSO ALTERNO ACTOR SISTEMA

2a. No se ha encontrado coincidencias en la base de datos.

3. Notificar al usuario que no se han encontrado en la base de datos.

2b. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido cargar los resultados de la búsqueda.

POSTCONDICIÓN Se deberá de cargar los resultados de la búsqueda.

32 Facultad de Informática Culiacán

Page 33: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Lista-Amigos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver su lista de amigos

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con por lo menos un amigo.

CURSO NORMAL ACTOR SISTEMA

1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con amigos.

2.-Se cargan los amigos del usuario.

CURSO ALTERNO ACTOR SISTEMA

2a. No se ha encontrado amigos en la base de datos.

3. Notificar al usuario que no se han encontrado amigos en la base de datos.

2b. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido cargar su lista de amigos por qué sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de amigos del usuario.

33 Facultad de Informática Culiacán

Page 34: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Amigos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea añadir un nuevo amigo

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario lo ha encontrado en la búsqueda del sitio.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario selecciona al usuario que desea añadir a su lista de amigos.

2.-El sistema guarda la solicitud dentro de la base de datos.

3.- El sistema notifica al usuario añadido que el usuario solicitante le está enviado una invitación de amistad.

4.-El usuario añadido ha aceptado la invitación.

5.-Se notifica al usuario solicitante que el usuario añadido ha aceptado la invitación.

34 Facultad de Informática Culiacán

Page 35: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Amigos-Nuevo

CURSO ALTERNO ACTOR SISTEMA

2a. No se ha podido guardar la solicitud en la base de datos.

3. Se notifica al usuario que fue imposible enviar la solicitud de amistad al usuario.

4a. El usuario no ha aceptado la invitación

5.-Se notifica al usuario solicitante que el usuario añadido ha rechazado la invitación.

POSTCONDICIÓN Se deberá guardar al nuevo amigo en la base de datos.

CASO DE USO Amigos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar a una persona de su lista de amigos.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El amigo debe de estar vinculado con el usuario

CURSO NORMAL ACTOR SISTEMA

1.- El usuario selecciona al usuario que desea eliminar de su lista de amigos.

2.-El sistema elimina a la persona de su lista de amigos.

3.- Se notifica al usuario que la persona ha sido eliminado de su lista de amigos.

35 Facultad de Informática Culiacán

Page 36: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Amigos-Eliminar

CURSO ALTERNO ACTOR SISTEMA

2a. No se ha podido eliminar al usuario de su lista de amigos

3. Se notifica al usuario que fue imposible eliminar a la persona de su lista de amigos que intente más tarde.

POSTCONDICIÓN Se deberá eliminar a la persona de la lista de amigos.

CASO DE USO Lista-Fotos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver sus fotos.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con por lo menos una foto.

CURSO NORMAL ACTOR SISTEMA

36 Facultad de Informática Culiacán

Page 37: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Lista-Fotos

1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con fotos.

2.-Se cargan las fotos del usuario.

CURSO ALTERNO ACTOR SISTEMA

2a. No se ha encontrado fotos en la base de datos relacionadas con el usuario.

3. Notificar al usuario que no se han encontrado fotos en la base de datos.

2b. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido cargar su lista de fotos porque sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de fotos del usuario.

CASO DE USO Fotos-Nueva

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea agregar una foto.

37 Facultad de Informática Culiacán

Page 38: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Fotos-Nueva

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario envía los datos requeridos para subir una foto. 1.- El sistema procesa que la imagen

se encuentre en un formato adecuado y que no pese más de 5 Mb.

2.Se sube la foto al sistema

3.- Se notifica al usuario que su imagen ha sido subida.

CURSO ALTERNO ACTOR SISTEMA

2a. La imagen pesan más de 5 Mb o que el formato es incorrecto.

3.- Se notifica al usuario que las fotos seleccionadas pesan más que el límite de peso máximo por foto o que se encuentra con un formato distinto a .png, .jpg o .bmp.

3a. No se ha podido subir la imagen al sistema

4. Se notifica al usuario que ha sucedido un error en la transferencia de las imágenes.

POSTCONDICIÓN Se deberá de vincular en la base de datos del usuario.

Se deberá de guardar el archivo en el directorio de imágenes.

38 Facultad de Informática Culiacán

Page 39: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Fotos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea modificar la descripción de una foto.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con la imagen.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona la nueva descripción de la imagen que desea modificar.

2.- El sistema guarda la nueva descripción en la imagen.

3. Se notifica al usuario que se ha modificado correctamente la descripción de la imagen.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error mientras se trataba de guardar la nueva descripción de la imagen.

3.- Se notifica al usuario que no fue posible guardar la nueva descripción de imagen y que intente más tarde.

POSTCONDICIÓN Se deberá de modificar la descripción en la base de datos.

39 Facultad de Informática Culiacán

Page 40: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Fotos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar una foto.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con la imagen.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona la imagen que desea eliminar

2.- El sistema elimina la imagen.

3.- Se notifica al usuario que la imagen fue eliminada correctamente.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error mientras se trataba de eliminar la imagen.

3.- Se notifica al usuario que no fue posible eliminar la imagen.

POSTCONDICIÓN Se deberá de eliminar la imagen.

Se deberá de eliminar la imagen del directorio de imágenes.

40 Facultad de Informática Culiacán

Page 41: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Lista-Videos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver sus videos

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con por lo menos un video subido.

CURSO NORMAL ACTOR SISTEMA

1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con videos.

2.-Se cargan los videos del usuario.

CURSO ALTERNO ACTOR SISTEMA

2a. No se ha encontrado videos en la base de datos relacionadas con el usuario.

3. Notificar al usuario que no se han encontrado videos en la base de datos.

2b. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido cargar su lista de videos porque sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de videos del usuario.

41 Facultad de Informática Culiacán

Page 42: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Videos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea agregar un video nuevo.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario envía los datos requeridos para subir un video. 1.- El sistema procesa que el video se

encuentre en un formato adecuado y que no pese más de 200 Mb.

2.Se sube el video al sistema

3.- Se notifica al usuario que video ha sido subido.

CURSO ALTERNO ACTOR SISTEMA

2a. El video pesa más de 200 Mb o tiene formato incorrecto.

3.- Se notifica al usuario que el video que se ha tratado de subir pesa más de 200 Mb o tiene formato incorrecto.

3a. No se ha podido subir el video al sistema

4. Se notifica al usuario que ha sucedido un error en la transferencia del video.

POSTCONDICIÓN El video e deberá de vincular en la base de datos del usuario.

Se deberá de guardar el archivo en el directorio de videos.

42 Facultad de Informática Culiacán

Page 43: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

ASO DE USO Videos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea modificar la descripción de un video

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con el video.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona la nueva descripción del video que desea modificar.

2.- El sistema guarda la nueva descripción del video.

3. Se notifica al usuario que se ha modificado correctamente la descripción del video.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error mientras se trataba de guardar la nueva descripción del video

3.- Se notifica al usuario que no fue posible guardar la nueva descripción del video y que intente más tarde.

POSTCONDICIÓN Se deberá de modificar la descripción en la base de datos.

43 Facultad de Informática Culiacán

Page 44: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Videos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar un video

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con el video.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el video que desea eliminar

2.- El sistema elimina el video.

3.- Se notifica al usuario que el video fue eliminado correctamente.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error mientras se trataba de eliminar el video.

3.- Se notifica al usuario que no fue posible eliminar el video.

POSTCONDICIÓN Se deberá de eliminar el video.

Se deberá de eliminar la imagen del directorio de videos.

44 Facultad de Informática Culiacán

Page 45: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Lista-Páginas

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver sus páginas personalizadas de muro.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con por lo menos una página creada.

CURSO NORMAL ACTOR SISTEMA

1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con páginas

2.-Se cargan los videos del usuario.

CURSO ALTERNO ACTOR SISTEMA

2a. No se ha encontrado páginas en la base de datos relacionadas con el usuario.

3. Notificar al usuario que no se han encontrado páginas en la base de datos.

2b. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido cargar su lista de páginas de muro porque sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de páginas del usuario.

45 Facultad de Informática Culiacán

Page 46: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Páginas-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea agregar una nueva página personal.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario envía los datos requeridos para crear una nueva página.

2.- El sistema crea la página personal.

3.- Se notifica al usuario que la página personal ha sido creada.

CURSO ALTERNO ACTOR SISTEMA

2a. Ha sucedido un error al crear la página personal

3.- Se notifica al usuario que ocurrió un error mientras intentaba crear la página personal y que intente más tarde.

POSTCONDICIÓN La página personal deberá ser guardada en la base de datos

46 Facultad de Informática Culiacán

Page 47: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Páginas-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea modificar una página personal.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con una página personal.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona el nuevo texto de la página personal.

2.- El sistema guarda el nuevo texto de la página personal.

3. Se notifica al usuario que se ha modificado correctamente la página personal.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error mientras se trataba de guardar el nuevo texto de la página personal

3.- Se notifica al usuario que no fue posible guardar el nuevo texto de la página personal.

POSTCONDICIÓN Se deberá de modificar el texto de la página personal en la base de datos.

47 Facultad de Informática Culiacán

Page 48: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Páginas-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar una página personal.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

El usuario deberá de contar con una página personal.

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona la página personal que desea eliminar.

2.- El sistema elimina de la base de datos la página personal.

3.- Se notifica al usuario que la página personal ha sido eliminada con éxito.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error mientras se trataba de eliminar la página personal en la base de datos.

3.- Se notifica al usuario que no fue posible eliminar la página personal de la base de datos.

POSTCONDICIÓN Se deberá de eliminar la página personal en la base de datos.

48 Facultad de Informática Culiacán

Page 49: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

CASO DE USO Configuración

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea cambiar su configuración, tal como su privacidad, visibilidad o color.

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.

El usuario se ha logueado en el sistema

CURSO NORMAL ACTOR SISTEMA

1.- El usuario proporciona los valores de la configuración que desea cambiar.

2.- El sistema realiza los nuevos ajustes.

3.- Se notifica al usuario que se ha guardado su nueva configuración.

CURSO ALTERNO ACTOR SISTEMA

2a. Sucedió un error mientras se trataba de guardar la configuración.

3.- Se notifica al usuario que no fue posible guardar las nueva configuración-

POSTCONDICIÓN Se deberán de realizar los nuevos cambios de configuración inmediatamente.

49 Facultad de Informática Culiacán

Page 50: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Diseño

Visitas

Esta pantalla la verá la persona que ingrese con el rol de visitante al sitio (sin haberse autentificado). Esta pantalla nos puede llevar a 3 lugares según sea el caso, por ejemplo: si yo como usuario aun no me encuentro registrado, podre hacerlo posicionándome en la columna de la derecha, ingresando los datos y posteriormente dando clic en el botón registrar.

Cuando la persona se registra, automáticamente se redirige a la página de inicio (pues ha pasado de ser un visitante a un usuario registrado).

50 Facultad de Informática Culiacán

Page 51: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Por otra parte si yo ya me encuentro registrado será cuestión de proporcionar mi nombre de usuario y contraseña en los campos de la barra superior derecha, y en caso de que los datos sean correctos también se me re direccionará a inicio.

En caso de que haya olvidado mi contraseña, deberé de hacer clic en el enlace de ¿Has olvidado tu contraseña? por debajo de los campos de usuario y contraseña de la barra superior derecha. En este caso me aparecera la siguiente imagen.

Aquí deberé de proporcionar mi email con el que me encuentro registrado y posteriormente pulsar el botón Enviar.

51 Facultad de Informática Culiacán

Page 52: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Usuarios / Inicio / Sección Noticias

La página de inicio carga por default la sección de noticias, bastará con dar clic sobre la noticias para que te envié a un enlace externo de la página donde se publico la noticia.

Podremos dar clic en la sección de publicaciones, aquí saldrán las publicaciones más relevantes de los usuarios con los que más convives, etc.

Usuarios / Inicio / Sección Publicaciones

Como usuario registrado podrás dar “me gusta”, “no me gusta”, “compartir” sobre una de la publicaciones en los enlaces correspondientes. Ahora iremos a la sección de eventos.

Usuarios / Inicio / Eventos

52 Facultad de Informática Culiacán

Page 53: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Un evento es cuando hay suceso a una hora y fecha determinada, por lo cual en esta sección podrás agregar, eliminar y modificar eventos a modo de recuerdo.

Para eliminar bastará con dar clic icono de la tacha sobre el evento que se desea eliminar, para modificar sobre el icono del lápiz y para crear uno nuevo sobre el enlace inferior “Crear nuevo evento”. Ahora iremos a la sección de grupos

Usuarios / Inicio / Grupos

Un grupo es un conjunto de usuarios que comparten las mismas aficiones en un determinado tema. Es por eso que los usuarios podrán crear grupos como unirse a otros que ya fueron creados por otros usuarios. A continuación mostramos la interfaz.

Para acceder al grupo bastará con dar clic sobre la imagen representativa del grupo. Ahora si lo que queremos es crear un grupo propio bastará con dar clic sobre el enlace inferior “Crear grupo nuevo.”

53 Facultad de Informática Culiacán

Page 54: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Ahora iremos a la ventana de recomendados

Usuarios / Inicio / Recomendados

Esta sección es publicidad pagada por empresas terceras ajenas a la empresa huella. Es por ello que veras una lista de grupos de empresas creadas en la red social o enlaces web a sitios de terceros.

A continuación visitaremos la sección de favoritos

Usuarios / Inicio / Favoritos

En esta sección por el momento solo se podrán guardar enlaces web favoritos, tal como podría ser el caso de google, o páginas de relevancia.

En esta sección podrás agregar, modificar y eliminar enlaces favoritos, para la primera bastará con dar clic sobre el enlace “Agregar a favoritos” y proporcionar un nombre junto al enlace que

54 Facultad de Informática Culiacán

Page 55: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

quieres guardar, para las opciones restantes podrás dar clic sobre el icono de eliminar o modificar.

Ahora iremos al muro

Usuarios / Muro

Está es por excelencia la parte más personalizada para el usuario, pues, puede añadir una imagen de portada y de perfil, además de que aparecerán sus publicaciones de forma ordenada de mas nuevas a más viejas.

Para publicar un algo bastará con posicionarnos en el campo ¿Qué estas pensando?, escribir el texto de nuestra publicación y dar clic sobre el botón publicar.

El resultado será el siguiente

55 Facultad de Informática Culiacán

Page 56: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

En la barra de información que se encuentra debajo de la portada al lado izquierdo, se mostrará la imagen de perfil del usuario, así como su nombre, ubicación y ranking dentro de la red social.

Nos trasladamos a la sección de amigos

Usuarios / Amigos

Aquí podemos ver nuestra lista de amigos actual, y en caso que lo deseemos podremos eliminar a amigo, dando clic sobre la persona y posteriormente haciendo clic sobre la tache.

A continuación la sección fotos

Usuarios / Muro / Fotos

56 Facultad de Informática Culiacán

Page 57: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Aquí el usuario podrá crear álbum y editar, eliminar y subir imágenes. Para crear un álbum o subir una fotográfica bastara con ir al enlace de nuevo álbum. Veremos la siguiente pantalla:

Ahora proporcionaremos un nombre para el álbum y seleccionaremos las imágenes que deseemos subir para posteriormente dar clic sobre el botón subir.

Si lo queremos es eliminar un imagen, regresaremos a la sección de fotos y daremos clic encima de la foto a la que queremos realizar dichas acciones.

57 Facultad de Informática Culiacán

Page 58: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Una vez abierta está pantalla escogeremos la acción que queremos realizar.

Ahora daremos clic sobre la sección de videos

Usuarios / Muro / Videos

Aquí el usuario podrá editar, eliminar y subir videos. Para agregar un video el usuario tendrá que hacer clic sobre el enlace “Agregar video”.

Una vez hecho lo anterior aparecerá la siguiente pantalla:

58 Facultad de Informática Culiacán

Page 59: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Seleccionaremos el video que queremos subir y daremos clic sobre el botón subir.

Ahora, si lo queremos es eliminar o editar un video, regresaremos a la sección de videos y daremos clic encima del video que queremos realizar dichas acciones.

Una vez abierta está pantalla escogeremos la acción que queremos realizar.

59 Facultad de Informática Culiacán

Page 60: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Usuarios / Muro / Páginas

Esta es una página personalizada en donde el usuario podrá añadir lo que quiera. Para crear , editar o eliminar páginas personalizadas bastará con dar clic en los respectivos iconos.

Usuarios / Muro / Buscar

Esta página mostrara los resultados de la búsqueda.

60 Facultad de Informática Culiacán

Page 61: Diseño de Interfaz de Usuario - Red social Huella

Huella | Universidad Autónoma de Sinaloa 2013

Usuarios / Configuración

Si yo deseo cambiar mi configuración, deberé de hacer clic en el enlace de “configuración” de la barra superior en la parte derecha.

Se me mostrar a continuación la siguiente pantalla.

Aquí podre cambiar el color, la visibilidad y la privacidad.

El color: Azul (predeterminado), Rojo, Rosa, Verde. Visibilidad: Que tanto permiso podrán tener los visitantes/usuarios de mis

publicaciones, fotos, videos, etc. Privacidad: Nivel de ocultamiento en el apartado de búsqueda.

Por último daré clic al botón “guardar” para establecer la nueva configuración.

61 Facultad de Informática Culiacán