UI/UX by Iwona Jablonowska

proyecto de dise帽o de interacci贸n

gone wild Iwona Jablonowska

table of Contents 1. Toma de requerimientos & briefing 2. Análisis y definición de la competénica 3. Alcance del proyecto 4. Investigación de usuarios 5. Metodología de usabilidad 6. Análisis de usabilidad 7. Arquitectura de información 8. Diseño de interacción 9. Prototipado

1. Toma de requerimientos & briefing The project is made in the group with Laia, Marta, Clara and Alex. This is another step in creating a brand GONE WILD.

briefing web

briefing web 1)¿Cuáles son los valores de la marca? 2) ¿Qué queréis vender? ¿De que estilo son? 3) ¿Quién es vuestra competencia? ¿Cuál consideras un modelo a seguir? 4) ¿Ha que público van dirigidos vuestros productos? 5) ¿De qué presupuesto dispone el proyecto? 6) ¿Es necesario incluir anuncios en la web? ¿Que tipología deberían tener? 7) ¿Es internet tu única plataforma de venta? 8) ¿De que tiempo disponemos para desarrollar el proyecto? 9) ¿A qué parámetros debe adaptarse?

briefing web

2. Análisis y definición de la competénica The project is made by me. This is another step in creating a brand GONE WILD.

Projecte de disseny d’interacció I Ejercicio 1 I IWONA JABŁONOWSKA

Benchmarking of museums websites

SIZE

Museum websites despite the fact that they contain very similar information on the quantity art, differ significantly from each structure, size and graphic elements. Foregoing inventory shows how long it can be homepage.

2 Projecte de disseny d’interacció I Benchmarking of museums websites

SIZE

site making information clearer and easier to use. Web content is very extensive. Sometimes it is difficult to find information in the chaos.

2 Projecte de disseny d’interacció I Benchmarking of museums websites

The menu bar is available in two versions. Horizontal or vertical. More popular is horizontal. Usually encounter the writing the content bar on one line, with graphic elements such as lines. In comparison with the present type I show a very large bar in three rows. This compilation of

information is not useful. The recipient gets lost in the chaos and does not know what press. Sometimes the menu bar is placed other elements, such as links, search box and attention grabbing icons (share).

3 Projecte de disseny d’interacció I Benchmarking of museums websites

CHAOS

Of course, better than the typical presentation of the menu are other more memorable example, instead of a single line as do two without stretching them on the entire screen. Or use a vertical menu giving more freedom in composing space. Font type is also very important. It

should be clear and strong enough to catch the attention of the recipient.

. Projecte de disseny d’interacció I Benchmarking of museums websites

Most often encounter the drop-down menu list or directly leading to the contents of the page. Drop-down menu allows us to better organization of information, by not placing everything on the main page. Menu can be well-organized. A good way is to assign a separate color

for each section. I really like the idea of developing a small menu card with your own icons and illustrations. This makes the item more special.

. Projecte de disseny d’interacció I Benchmarking of museums websites

SPECIAL ELEMENTS

Special items add the flavor and charm. Becomes more memorable and therefore more visited. But do not overdo it with them. To be the icing on the cake, but not the main ingredient. Commonly used element is icon. I am their fan. A small well-made graphics can say much

more than text, diversify the space and occupies less space. On the website I found elements such as speech bubbles, calendars, icons, arrows and moving the bar with the page content.

. Projecte de disseny d’interacció I Benchmarking of museums websites

MUSEUM REVIEW WEB SITES

Statement of museum websites, indicating their interesting and navigation elements.

.4 Projecte de disseny d’interacció I Benchmarking of museums websites

ARKEN

http://www.arken.dk/

-switched slides using the arrow keys -scrolling cards -button to change the images in the card

. Projecte de disseny d’interacció I Benchmarking of museums websites

MACBA

http://www.macba.cat/es/inicio

-extensive user control panel (registration, searching) -icons buttons(sher, Itinerary, ical, google cal) -RWN radio

5 Projecte de disseny d’interacció I Benchmarking of museums websites

MUSEUM OF CONT. ART CHICAGO

http://www.mcachicago.org/

-tables of hours and calendar -slideshow with movie button -buttons to switch slides

6 Projecte de disseny d’interacció I Benchmarking of museums websites

SFMOMA

http://www.sfmoma.org/

-slides change automatically with the ability to stop in a panel at the top

7 Projecte de disseny d’interacció I Benchmarking of museums websites

CAM

http://camstl.org/

-automatic slideshow -button to stop the slide -icon button to search -movies about the museum

8 Projecte de disseny d’interacció I Benchmarking of museums websites

MUSEUM CONT. ART MONTREAL

-search panel with icons buttons for sharing http://www.macm.org/en/

. Projecte de disseny d’interacció I Benchmarking of museums websites

QAGOMA

http://www.qagoma.qld.gov.au/

-automatic slideshow -buttons to choose an image from a slide -a simple search of the magnifying glass icon -follow us button

9 Projecte de disseny d’interacció I Benchmarking of museums websites

http://www.mqw.at/

-button to change the images in the card -museum tabs

. Projecte de disseny d’interacció I Benchmarking of museums websites

MNAC

http://www.mnac.cat/index.jsp?lan=003

-switched slides using the arrow keys -shering buttons

. Projecte de disseny d’interacció I Benchmarking of museums websites

MUSEUM ART LYON

http://www.mba-lyon.fr/mba/sections/languages/ english/collections/masterpieces/plan1988/map_masterpieces

-extensive menu -buttons to stop the slide show and to move to the next card

. Projecte de disseny d’interacció I Benchmarking of museums websites

MAM

http://www.mam.paris.fr/en

-switched slides using the arrow keys -link announcing attractions of the city

. Projecte de disseny d’interacció I Benchmarking of museums websites

MBAM

http://www.mbam.qc.ca/

-icon bar (search, shopping) -buttons to choose an image from a slide -accessory bar moving along to the homepage

. Projecte de disseny d’interacció I Benchmarking of museums websites

MOMAT

-example, a very extensive and not practical menu http://www.momat.go.jp/english/

. Projecte de disseny d’interacció I Benchmarking of museums websites

GUGGENHEIM MUSEUM

-arrow to open the card with further information http://www.guggenheim.org/

. Projecte de disseny d’interacció I Benchmarking of museums websites

BILBOKO

-link to a website about the exhibition http://www.museobilbao.com/in/

. Projecte de disseny d’interacció I Benchmarking of museums websites

BMA

http://www.artbma.org/

-user panel with icons -graphics elements changing shape after pressing

. Projecte de disseny d’interacció I Benchmarking of museums websites

CINCINATI ART MUSEUM

-example of a very simple menu -sidebar http://www.cincinnatiartmuseum.org/

. Projecte de disseny d’interacció I Benchmarking of museums websites

SMK

http://www.smk.dk/en/

-switched slides using the arrow keys -extensive calendar of events

. Projecte de disseny d’interacció I Benchmarking of museums websites

ATLANTA BALET

-switched slides using the arrow keys -buttons to choose an image from a slide -tabs http://www.atlantaballet.com/

11 Projecte de disseny d’interacció I Benchmarking of museums websites

¿Qué muestra la pantalla del cajero durante estas pausas? ¿Crees que se podría hacer algo más interesante?

PORSCHE MUSEUM

- shering button -photo links http://www.porsche.com/international/aboutporsche/ porschemuseum/

. Projecte de disseny d’interacció I Benchmarking of museums websites

NATIONAL MUSEUM OF AMERICAN HIST.

-buttons to choose an image from a slide -form for planning a visit http://americanhistory.si.edu/

. Projecte de disseny d’interacció I Benchmarking of museums websites

CHAOS

DEUTSCHES HIST. MUSEUM

-unreadable and chaotic menu http://www.dhm.de/ENGLISH/

3. Alcance del proyecto The project is made in the group with Laia, Marta, Clara and Alex. This is another step in creating a brand GONE WILD.

table of contents

Ă?NDICE AnĂĄlisis Briefing Benchmark

Necesidades del proyecto Necesidades de los usuarios Especificaciones funcionales Especificaciones de producto y contenido

Fases de desarrollo del proyecto Tiempos de desarrollo estimados Estructura las distintas fases del proyecto Timing

ANÁLISIS

ANÁLISIS Briefing GONE WILD.COM

CONTENIDOS DE LA WEB

Gone Wild es una tienda online de ropa alternativa para chicas jóvenes que quieren vestirse de manera original. Ropa no convencional Óptima relación calidad-precio Web española con alcance mundial Tono informal para dirigirnos a las clientas Activos en redes sociales

Menú principal Menú de ropa

TARGET Chicas jóvenes Desenfadadas 16-27 años REDES SOCIALES CONECTADAS A LA WEB: Facebook Twitter Pinterest Instagram ALCANCE Web española Worldwide Shipping España, envio gratuito a partir de 50€

Tops Bottoms Outerwear Dresses Accessories What’s new Sales

Boton busqueda Pestaña idioma Español Inglés Pestaña de registro Mail Password Pais, ciudad Mi cuenta Iinformación de la cuenta Dirección Información de facturación Historial de pedidos Tarjeta regalo Cerrar sesión

Mi cuenta Iinformación de la cuenta Dirección Información de facturación Historial de pedidos Tarjeta regalo Cerrar sesión Cesta de compra Items Precio Checkout Saved adresses Add new address Oreder summary Payment Reveiw Save and ship

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

ANÁLISIS

ANÁLISIS Benchmark

NECESIDADES DEL PROYECTO

NECESIDADES DEL PROYECTO Necesidades de los usuarios

-Visualizar de manera simple y ordenada el contenido de la web

-Buscador incorporado

-Disponer de la información necesaria de la ropa.

-Navegador claro que no confunda al usuario

-Fotografías grandes, desde diferentes puntos de vista de la ropa

-Posibilidad de cambiar el idioma de la web

-Metodo de pago sencillo y fiable

-Compartir en redes sociales

-Posibilidad de añadir y quitar productos a la lista de compra

-Fácil acceso y registro a la web

-Posibilidad de seguir el trayecto y estado de nuestro pedido

-Información legal

-Información sobre las tallas

-Método de contacto

NECESIDADES DEL PROYECTO

NECESIDADES DEL PROYECTO Especificaciones puntuales

-Navegador claro y simple

-Atención al cliente

-Slideshow de imágenes

-Feedback

-Boton para compartir en redes sociales

-Pestaña de información de recorrido por la web

-Buscador -Carrito de la compra -Pestaña de idioma -Footer con información secundaria -Mi cuenta

NECESIDADES DEL PROYECTO

NECESIDADES DEL PROYECTO Especificaciones de producto y contenido

INFORMACIÓN ROPA (GENERAL) -Navegador lateral -Dresses -Tops -Bottoms -Outerwear -Back in stock -Sale -Navegador de filtros -Talla -Color -Precio -De alto a bajo -De bajo a alto -Ver todo

INFORMACIÓN EN DE LA PIEZA -Galería de imágenes, con detalles en diferentes perspectivas -Nombre de la pieza de ropa -Precio -Código -Color -Selección de la talla -Tallas disponibles -Cantidad -Detalles -Modelo -Guía de tallas -Share button -Comentarios -Piezas similares

FASES DE DESARROLLO DEL PROYECTO

FASES DE DESARROLLO DEL PROYECTO Tiempos de desarrollo estimados / Estructura las distintas fases del proyecto / Timing Análisis y Aspecto

días

Aspectos Técnicos

días

Toma de contacto con el cliente

Reunión con el programador (1 dia)

Briefing

Programación (3 meses)

Benchmark

Test de usuario (1semana)

Contrabriefing

Programación arreglos (3semanas)

Reunion cliente

Reunión cliente (1 dia)

Cardsorting

Publicar la web

Brainstorming

Actualizaciones (periodicamente)

∞

Selección de ideas

Wireframes, Sketching, Sitemap...

Reunión Proposal cliente

Desarrollo idea

Reunion cliente

Validación de la propuesta

4. Investigaci贸n de usuarios The project is made by me. This is another step in creating a brand GONE WILD.

Iwona jablonowska/ gone wild, Usuarios proyecto de dise帽o de interacci贸n

usuario primario

Carolina is 29 years old, working in the office and likes to look good. Visit our site often to see whatâ&#x20AC;&#x2122;s new. He earns a little more than the national average but working late (6 pm). She is a young mother, wife, and does not have much time for herself. Facilitation is a great opportunity to do shop online. SCENARIO

TIME ONLINE FOR ENTERTAINMENT Search for information / news, blogs, social networking

TIME ONLINE AT WORK

USING TECHNOLOGY OF DAILY LIFE

TECHNICAL SKILLS

Carolina was invited to the ceremonial reception on the occasion of signing a major contract by the company. She was able to persuade the new investor. The event is to take place for 5 days and she was still a lot of work in relation with the investment. There is no time to prepare adequately for the event, and wants to look beautiful. He decides not to waste time driving to the shops and order from our website three dresses, which she really liked. Time of delivery is only 3 days, and With the ability a free return purchased items will choose the one which is the best and the rest of the will reward. In this way, have time to work and impress all the party.

Uuario secundario

John is 33 years old. He earns well, working in the garage. His world is a motorcycles and fast cars. He doesnâ&#x20AC;&#x2122;t know too well on womenâ&#x20AC;&#x2122;s preferences. Approaching birthday of his girlfriend, Magda (25 years old). He always has a problem, because he never knows what to get her to make her happy. Every year, trying to find something new. SCENARIO TIME ONLINE FOR FUN Search for information / news, blogs, social networking

TIME ONLINE AT WORK

USING TECHNOLOGY OF DAILY LIFE

TECHNICAL SKILLS

Today, John decided what to buy Magda. He saw Magda delighted with her friends over the heels with colorful dots on our new spring collection. Satisfied that Magda will be delighted gift, he will buy shoes over the Internet, without any loss of time and a lot of energy to walk around the shops. All he has to do is to measure shoes Magda and check on that size will fit. Because he knows that friend Magda doing shopping there, he is not afraid to lose money. Additionally read the clauses of personal data and the protection of their purchases. And on the website he found a lot of positive comments the users. John is delighted.

Focus group

1) What colors are associated to you for the womenâ&#x20AC;&#x2122;s clothes? 2) Do you like websites strong contrasts of color and typography? 3) What kind of font you prefer sans-serif or srif? 4) What kind of pictures of products do you prefer? In the natural / everyday environment or in studio idealized reality. 5) Do you like rounded shapes graphics element or strong, sharp divisions? 6) Is the sale of clothing, would like to see women exposed to clothes that have different sizes or just thin models? 7) What kind showing product do you prefer ?On a mannequin or on the person? 8) Are you interested in photos of detail on the clothes, or quick to see entire object. 9) Is the buying spend a lot time to process information. 10) Do when you buing is an important factor for you, how long to have to wait for bought product? 11) Is the payment via the Internet, it is important for you to make a large kind selection of payment?

Focus group

12) How often do you shop online? 13) What is the most important factor that makes you to buy the product on the internet? (price, great selection, speed of execution..) 14) Do you use these items on websites like: add to favorites add to comparison? 15) Do you use membership cards, which often offer discounts on products? 16) Do you think that is a good way to establishing profiles on websites used by you, in one place have history activities, email, shopping, etc.? 17) What are you most afraid when you buy online? 18) How important to you is the opinion of other users? 19) Do you use the web because of the command by your friends? 20) Do you pay attention to the popularity of internet service? 21) Do you like to express your opinions on the internet? In what situations is it usually happens?

Focous group

22) When looking for a product you want to buy what elements are most important to you? (enter in order from most important to least important) 23) The ability to order the product through the mobile phone is important to you? 24) How long you can wait for the delivery of the product purchased on the internet? 25) Would you pay more for the opportunity to return / exchange item purchased over the Internet. 26) What time of the day you are shopping on the Internet? 27) Is enough for you contact the company via the form / email or you prefer to telephone contact. 28) What information should be included on the company with whom you are buying products online? 29) What kind of filters do you prefer to search for products on the internet? (Selecting, entering the word) 30) Are you worried that your clothing is lost along the way? How do you think you can solve? 31) Do you trust to give your bank details to a website? I want to do with PayPal? Family members who are not habitual buyer to buy with the help of someone who has?

PREGUNTAS ESPECĂ?FICAS

USER EXPERT

FREQUENT USER

What section most commonly used / is your favorite?

What is the reason for frequent use by you of our website?

Do you think that our number of articles is enough? What would you add / subtract from the list of products?

Are there elements that we should change / improve-what?

Is the page expands to other pages related to the topic (hairstyles, fashionable trends in clothing / makeup) would be a good idea and would revitalize the page or entered a mess? What do you think of the expanded personalization of your account, where the use of your pictures, you could create the appearance of their manipulations using our products? Would you like to receive some grants / discounts because of the frequent use of our website, what?

Are you using all supported our categories or just parts? Why? Would you be interested in promoting our website among his friends in exchange for points or discounts on our products?

PREGUNTAS ESPECĂ?FICAS

NEW USER Which affected the use of our services (Opinion friends / the command, noticed advertising (where?) case, other ...) How often do you shop online? How do you rate this page in comparison to other like this? What could we improve? Has anything caught your attention on our site, what was it? Are you going to visit us yet?

5. MetodologĂa de usabilidad The project is made in the group with Laia, Marta, Clara and Alex. This is another step in creating a brand GONE WILD.

EG ACCESIBILIDAD Y USABILIDAD proyecto de diseño de interacción

gone wild Àlex Garcias - Laia Gubern - Clara Martínez Marta Sánchez - Iwona Jablonowska

ACCESIBILIDAD Y USABILIDAD

GONE WILD

LOGO WHAT'S NEW?

CLOTHING

ACCESORIES

SALES

Image

Navegador

Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

FOOTER

El navegador de nuestra web se dividirá principalmente en cuatro apartados. El primero será el apartado de “Clothes” y contendrá los subapartados de tops, bottoms, outerwear, dress y sales. Seguidamente nos encontramos con el apartado de “Accessories” con sus subapartados como po ejemplo necklaces, baga, belts, etc. Finalmente nos encontramos al mismo nivel los apartados “What’s new” y “Sales” que no cuentan con ningún subapartado. En cuanto a la localización en la home del menú podemos decir que este se encuentra en la parte superior, y sobre un fondo blanco o algún otro color sólido claro. Además, lo encontramos en una tipografía de caja alta, ya que son palabras cortas y no dificulta su lectura, sin serifa y con un tamaño adecuado a la lectura (14px).

ACCESIBILIDAD Y USABILIDAD

GONE WILD

LOGO WHAT'S NEW? Tops Bottoms Outerwear Dresses

CLOTHING

ACCESORIES

FILTERS

SALES

color

size

Image

manicurist darkens subtly ah! a difficult virgin

Image

price

Image

manicurist darkens subtly ah! a difficult virgin

Image

quantity

Image

manicurist darkens subtly ah! a difficult virgin

Image

En cuanto al la interacción del usuario con el menú hemos decidido que: 1. Mouse over: El titulo del apartado en el que hacemos mouse over cambia de color para que el usuario sepa que ha pasado por encima de un link. 2. Dentro de una sección: En el momento en el que el usuario hace click en un link del menú y entra a esa sección, el nombre del apartado que aparece en el menú cambia de color y permanece así durante todo el tiempo en el que el usuario navega por esa sección. 3. Disponemos de filtros para clasificar la información y así excluir la que no nos interesa, para encontrar más rapidamente lo que buscamos. Estos filtros son: pieza, talla, color y precio.

Menú desplegable Dado que tenemos un menú que cuenta con subcategorias hemos creído idóneo crear un menú desplegable que al clikar con el mouse en el link nos aparece una pestaña con los apartados de este submenú, para que el usuario puede acceder directamente al apartado que le interese. Además al volver a hacer clik este submenú desaparece para no molestar visualmente.

ACCESIBILIDAD Y USABILIDAD

GONE WILD

LOGO WHAT'S NEW? Tops Bottoms Outerwear Dresses Party Day Body Con Maxi

CLOTHING

ACCESORIES

FILTERS size

SALES

color

Image

manicurist darkens subtly ah! a difficult virgin

price

Image

manicurist darkens subtly ah! a difficult virgin

quantity

Image

manicurist darkens subtly ah! a difficult virgin

Navegador lateral Al entrar en una sección del menú nos aparece un submenú lateral que nos indica en que apartado nos encontramos y el recorrido que hemos realizado para llegar hasta allí. La manera que tiene de mostrarnos el recorrido que hemos realizado es puramente tipográfica, es decir, mediante la tipografía intuimos en que apartado nos encontramos: Por ejemplo: Menú: Clothes (marcado en el navegador principal por un color diferente) Submenú: Outerwear (marcado en tipografia bold) Nivel 3: Coats (tipografia light subrayada)

Image

ACCESIBILIDAD Y USABILIDAD GONE WILD

LOGO WHAT'S NEW?

CLOTHING

ACCESORIES

SALES

Product name

30€

firm

image

quantity

Add to compare

image

product image

color

size

BUY

About the product, details, materials, mani. About the product, details, materials..

Product Page

Returns

Delivery manicurist darkens subtly ah! a difficult virgin

image

Product page will include product information (description, price, size, colors, refund of purchase). Large, main picture and other pictures showing the details. On the page, you can purchase a product, add to favorites or compare with others. The product you can also share with friends.

manicurist darkens subtly ah! a difficult virgin

Buscador Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

FOOTER

En una web de esta tipología, el buscador es un elemento secundario, ya que hay otros elementos que permiten una mejor búsqueda para el usuario, como por ejemplo el navegador y sus filtros que permiten la búsqueda exacta. Es por eso, que el buscador será un elemento al cual es usuario recurrirá únicamente cuando conozca el nombre exacto de la pieza que busca.

ACCESIBILIDAD Y USABILIDAD

GONE WILD

LOGO WHAT'S NEW?

CLOTHING

ACCESORIES

SALES

Product name

30€

firm

image

quantity Required Field

Add to compare

image

product image

color

BUY

About the product, details, materials, mani. About the product, details, materials..

Delivery image

Returns

manicurist darkens subtly ah! a difficult virgin

ERRORES

manicurist darkens subtly ah! a difficult virgin

Cuando estemos frente a un error de la web, aparecerá un mensaje de disculpa en su lugar, y que está en proceso de ser arreglado. Si el error es al rellenar un campo en el proceso de suscripción o compra, se resaltará el campo erróneo en un color rojo y un mensaje dará un consejo sobre el contenido que debemos rellenar en ese apartado.

ACCESIBILIDAD Y USABILIDAD

GONE WILD

LOGO WHAT'S NEW?

CLOTHING

ACCESORIES

GONE WILD

LOGO WHAT'S NEW?

SALES

Tops Bottoms Outerwear Dresses

CLOTHING

ACCESORIES

FILTERS

LOGO SALES

color

size

WHAT'S NEW?

price

quantity

Image Image

Image

Tops Bottoms Outerwear Dresses Party Day Body Con Maxi

CLOTHING

ACCESORIES

FILTERS size

LOGO SALES

color

WHAT'S NEW?

price

CLOTHING

ACCESORIES

SALES

Product name

quantity

Image

image

product image

color

size

Add to compare

Image

30€

firm

image

BUY

About the product, details, materials, mani. About the product, details, materials..

Returns

Delivery manicurist darkens subtly ah! a difficult virgin

image

ADVERTISEMENT manicurist darkens subtly ah! a difficult virgin

manicurist darkens subtly ah! a difficult virgin

Image

Image Image

manicurist darkens subtly ah! a difficult virgin

FOOTER

manicurist darkens subtly ah! a difficult virgin

Image

Image Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

manicurist darkens subtly ah! a difficult virgin manicurist darkens subtly ah! a difficult virgin

manicurist darkens subtly ah! a difficult virgin

FOOTER

Image

LA FORMA, EL TRATAMIENTO La web se dirigirá al usuario de un tú a tú informal pero educado que diga las cosas con el menor número de palabras posibles. Las imágenes serán sencillas y claras, con fondo blanco que destaquen el artículo, ofreciendo vistas realistas y minimalistas de los productos ofertados. Así el cliente puede procesar rápidamente la información que se le transmite y realizar las operaciones cómodamente.

6. Anรกlisis de usabilidad The project is made by me. This is another step in creating a brand GONE WILD.

ANĂ LISIS Benchmark

7. Arquitectura de informaci贸n The project is made by me. This is another step in creating a brand GONE WILD.

site Map

conclusions

Gone wild Iwona JabĹ&#x201A;onowska

site Map MICKEY's girls

Shipping & Delivery Privacy & Security Returns & Replacements Ordering Payment, Pricing & Promotions Viewing Orders

footer

Updating Account Information

About Us

What's new

SHOES

MY CLOSET

home

Contact Customer Privacy Us Service Policy

SALE

ACCESSORIES

Site Map

Search Advanced follow us: Terms Search fcb, twiter, tumblr, Pinteres

BLOG Log In

products list

all

clothes accessories shoes

selected product

TOPS BOTTOMS DRESSES COATS + JACKETS INTIMATES

FLATS

products list

My Cart

products list

My Wishlist

My Checkout Account

all all

BOOTS

JEWELRY

PLATFORMS

BAGS

selected product

HEELS BOOTIES

BELTS

SANDALS

HEAD ACCESSORIES

selected product

BEAUTY AND GIFTS

ROMPERS GEEKIE

selected product

SHADES

selected product Returns Shipping

selected product

Add to Cart Choose a size-sizes and their description Quick Overview/ more-Product Description Add to Wishlist / Add to Compare Share with a friend by: e-mail, facebook, twitter, other price Name of Product

conclusions

MICKEY's girls The order from the menu - change the order of the more important to the least. Jawlery and a geek from the main menu, I gave to one category of accessories, sale and rates reductions joined one, because the subject matter is the same. With this act cleaned up and simplified the menu. The shoes were not category / filter but they are important because usually we are looking for a specific type of shoe. This makes it easy to search.

The sale liquidated filters, I decided to just giveall into one folder, because women make decisions under the influence of emotions and how will find something nice and devaluatedit certainly buy it. This is a profit for the company. I changed the order of some elements of the majorthe less important. Managed the expectations of the user, the what often need / want. For example, in My Closet changed sequence going from clothes to bed, and not as it was the opposite.

8. Dise帽o de interacci贸n The project is made by me. This is another step in creating a brand GONE WILD.

Iwona jablonowska/ gone wild proyecto de dise帽o de interacci贸n

http://www.oki-ni.com/

Oki-ni was created to work with established brands and progressive designers, to offer innovative products to knowledgeable fashion consumers. okini also collaborated with brands to produce unique pieces. Early collaborators included Adidas, Leviâ&#x20AC;&#x2122;s, Paul Smith and Porter. The quality of products provide the brand with which it works and class for years to portray the products on the site. Beautiful pictures, clear structure.

Equilibrio entre Experiencia y espectación

Oki-ni works with the highest, so the expectations are very high. The recipient is also not an average, looking for the best quality products and the best presented. He’s a man depends on his logical placement of information and speed. Page seems to comply with these expectations. The information is very clearly and consistently given to the user, not boring and with taste. Graphics solutions are very simple, clean (white and black blocks, good hierarchy, simple decorative elements-box) and add the taste. Unfortunately, as you can always find some irregularities. As for the product presentation and selection of readable font.

Consistencia

Website design is very consistent. Graphic elements are repeated and changed in many dimensions / aspects. The project uses two fonts: Oswald and Mono. Fonts are on alternating in each part of the project. Another interesting feature is the slider. It has a simple form of the line, and a typical element of the arrow was replaced by a rectangle. Projetu coloring is black and white, color is present only in the pictures of the product.

Minimalismo funcional

Very often it happens that on the website there are a lot of unnecessary, disturbing elements in the reception. Such errors occur when there is a menu bar for multiple categories or sometimes repeated. The menu bar is the main element of navigation, which should be particularly well thought out. Oki-ni has a well laid out menu bar. It works a bit strange here hierarchy (akcessories are positioned above the clothes) but it is related to products and their special, high quality backgrounds, where the additive element plays a very important role.

The menu is extensive, but not overcrowded, well laid out in the secondary menu category. The only element that I think it unnecessary to repeat in two places (at the beginning and in the lower right side of the list of brands. Brands are very important for this type of store and a good idea to mention them, but I think that might be present in one place.

Minimalismo funcional

I think a bad practice for placing products on the site, which has been sold out, without knowing whether they will buy. If the client can no longer purchase the product, it should be removed. I would feel resentment if it turned out that the product that suddenly I like is not available. This introduces the user error.

Carga cognitiva

It is very easy to enter the mess on the website, which usually is the carrier of a lot of information. On websites selling products, a very important process for the user is searching for the product. Home Oki-ni tried to search by part produty was very easy and efficient (fast). Just select a product category from the main menu and through the filters on the left side of the list of products for us to choose the right search options. It is very easy, because we do not have to type anything, just check the box. A very useful part of the search, when we move the mouse to the productâ&#x20AC;&#x2122;s list of desired product size. If we do not there is no need to waste time to go to the product page and then to find out.

Engagement (compromiso)

The website is seen as a quick way to get information and deal with. The user does not have time to look at the appropriate products, reviewing the entire page. Especially because the man who likes to garments quickly and have to deal with is visual learner. If you do not see it going to look elsewhere. Oki-ni the main page (Home) immediately tells you what to expect. We see the popular brand which it works and the variety of products it offers. On the first page we have access to the menu, in which a single click can see a list of selected product categories and a small gallery of 3 pictures that show what weâ&#x20AC;&#x2122;d expect. This is a very good visual solution.

Control, confianza y exploraci贸n

A place where the user must feel confident is basket with the products you want to buy and thus entrust us money without immediate receiving of the product. Oki-ni company provides complete security for users and the doubts asked to contact us. Gives a graphical form is information security with padlock. Another element is to provide personal information. The user should know how they will be used. The website has a privacy policy, which describes how the information may be used.

Detecci贸n y prevenci贸n de errores

Page tries to anticipate mistakes what you can make and apply information and alerts the user does not make a mistake. If you do not choose the size of the object we can add to our cart. In filters, the search immediately products we checked how many products are available in a color such as gold .

Affordance (permitir)

Items in which the user must choose the site are marked in a different way. When choosing the size of the product page is a drop-down list, the search in the filters you have to select only bold field. The number of products enter the number manually.

Hierarchy of control

The best place where the hierarchy of elements is very important to use the whole page is a menu bar. As previously mentioned, the hierarchy of the bar is good but specifically targeted to a specific type of audience and sell products (brands are higher in the hierarchy than the value of products and acessories higher than the clothes). Another place where it is appropriate hierarchy of important elements is the product description. I think that at Oki-ni is a very good hierachy. I like the position add to basket button next to the product name. Interestingly, as in the menu is that the company is more important than the products name, usually the order is reversed.

9. Prototipado The project is made by me. This is another step in creating a brand GONE WILD.

site Map MICKEY's girls

Shipping & Delivery Privacy & Security Returns & Replacements Ordering Payment, Pricing & Promotions Viewing Orders

footer

Updating Account Information

About Us

What's new

SHOES

MY CLOSET

home

Contact Customer Privacy Us Service Policy

SALE

ACCESSORIES

Site Map

Search Advanced follow us: Terms Search fcb, twiter, tumblr, Pinteres

BLOG Log In

products list

all

clothes accessories shoes

selected product

TOPS BOTTOMS DRESSES COATS + JACKETS INTIMATES

FLATS

products list

My Cart

products list

My Wishlist

My Checkout Account

all all

BOOTS

JEWELRY

PLATFORMS

BAGS

selected product

HEELS BOOTIES

BELTS

SANDALS

HEAD ACCESSORIES

selected product

BEAUTY AND GIFTS

ROMPERS GEEKIE

selected product

SHADES

selected product Returns Shipping

selected product

sketches I

sketches II

trials

GONE WILD

LOGO WHAT'S NEW?

CLOTHING

ACCESORIES

LOGO SALES

WHAT'S NEW?

CLOTHING

ACCESORIES

SALES

Product name

30â&#x201A;Ź

firm

image

quantity

Image

Add to compare

image

product image

color

size

BUY

About the product, details, materials, mani. About the product, details, materials..

Returns

Delivery ADVERTISEMENT

manicurist darkens subtly ah! a difficult virgin

image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

Image

manicurist darkens subtly ah! a difficult virgin

FOOTER manicurist darkens subtly ah! a difficult virgin

manicurist darkens subtly ah! a difficult virgin

FOOTER

Thank you for your attention iwona jablonowska