Menú

Marcs metàl·lics: s’han de provar realment? I si és així, com?

wireframes should they really be tested

Proveu El Nostre Instrument Per Eliminar Problemes

Hi van entrar nous participants en formació i vam tenir una classe de formació aprendre conceptes de proves de programari . Després de veure aquelles cares entusiastes amb les ments gairebé en blanc (professionalment), vaig decidir fer una volta al meu entrenament rutinari.

Després d’una breu introducció, en lloc de parlar de proves de programari com faig normalment, vaig llançar una pregunta a les ments noves: Algú em pot explicar què a wireframe és? '

La resposta va ser una pausa i, per tant, vam decidir parlar-ne. I així va començar - Proves de filferro / prototipus :)

proves de prototips wireframe

Tan, què és un wireframe? Deixeu-ho explicar amb algunes analogies simples:

  1. L’interiorista no comença a col·locar els mobles i a decorar la casa a l’atzar. Posa el seu pla en paper (o programari de disseny), el discuteix amb el client, prova i modifica el pla de la millor manera pràctica i després el posa en pràctica.
  2. Per comprendre la gravetat de la lesió d’una part del cos, els metges miren una radiografia. La radiografia és bàsicament un esquelet del nostre cos i proporciona informació correcta sobre els ossos i les articulacions.
  3. Un sastre prepara la tela de paper (una mena de prototip de nou), fa les modificacions necessàries i l’utilitza com a mesura base fins que tot sigui precís i confia en seguir endavant amb la peça real que està cosint.

Crec que aquests exemples van ser suficients perquè tothom entengués el concepte de wireframe.

Els filferros són tipus de prototips:

Tenen una naturalesa limitada, el que significa que poden contenir pàgines HTML buides sense elements que funcionin ni captures de pantalla estàtiques que siguin representatives d’una pàgina / funció / element de l’aplicació i que puguin mancar de color, gràfics i altres elements del disseny visual real.

Per construir una aplicació / lloc web sòlid, es necessita un marc sòlid i els wireframes ajuden a proporcionar el marc donant una representació del disseny de la pàgina, la interfície general, la navegació i les funcionalitats.

A continuació, es mostren alguns exemples de wireframes:

exemple de wireframe 2

exemple de wireframe 1

Per què les empreses de programari construeixen wireframes?

Per la mateixa raó, el sastre / dissenyador d’interiors / metge decideix provar les coses primer: per evitar errors, eliminar les suposicions, obtenir l’aprovació del client abans de posar-ho tot en pedra. Ajuda a identificar problemes al principi i a donar una ullada al programari tal i com apareixeria quan acabi.

Què aprendreu:

Importància de les estructures de filferro / proves de prototips:

Llavors, per què provar alguna cosa que sigui un esquelet i que l'usuari no vegi tal com està ara? En altres paraules: per què molestar-se amb l’intermediari quan encara és un maniquí?

Simplement, per ajudar a la prevenció de defectes, que és l’agenda general dels equips de control de qualitat (Garantia de qualitat = Prevenció de defectes + Identificació de defectes ).

Importància de les proves de wireframe

Les proves de filferros poden ajudar en el següent:

# 1) Identificació dels requisits que falten:

Diguem si els requisits indiquen que en un pàgina d'inici de sessió hi hauria d’haver 2 camps d’entrada, identificador d’inici de sessió i contrasenya respectivament i els 3 botons, OK-Cancel-Reset. Si el wireframe és el següent, podem trobar fàcilment el botó Restableix que falta i incorporar-lo a l’aplicació.

És cap de projecte, amb més de deu anys d’experiència en proves de programari.

# 2) Identificació de requisits addicionals:

El revers de la situació anterior pot ser que el requisit estableix que en una pàgina d'inici de sessió hi hauria d'haver 2 camps d'entrada, identificador d'inici de sessió i contrasenya respectivament i els dos botons, D'acord i Cancel·la. Si el wireframe és el següent, podem trobar fàcilment que té un botó de restabliment addicional i demanar confirmació sobre si realment és necessari o no.

proves de wireframe 2

# 3) Usabilitat:

Els marcs de filferro són una de les millors opcions per provar la usabilitat del producte / aplicació abans que es desenvolupi.

Aquí teniu el wireframe per a una de les formes:

proves de wireframe 3

A primera vista, sembla correcte.

Ara penseu com a usuari final, l’usuari que emplenarà informació al formulari. Creieu que hi ha una manera que aquest formulari sigui més fàcil d'utilitzar? Bé, segur que sí.

  • Proporcioneu el símbol del calendari i restringiu l'usuari a seleccionar la data del calendari. Això seria útil per a l'usuari, ja que no haurà de confondre's sobre quin format de data hauria de seguir i seleccionar qualsevol data del calendari seria preferible per a tots els usuaris.
  • Seria fantàstic una descripció explicativa del que significa cada camp.
  • El nom de la pàgina com a títol és obligatori per entendre el wireframe i relacionar conjuntament els camps.
  • Els camps obligatoris s'han de marcar amb el signe * o una nota que digui ' Tots els camps són obligatoris ”Hauria de ser visible.
  • L'etiqueta del primer camp ha de ser 'Nom de la campanya', en lloc de només 'Nom', per evitar confusions als usuaris.

# 4) Proves funcionals primerenques:

quina de les opcions següents no és una manera acceptable de provar un disseny sensible?

En el propi exemple anterior, a partir del diagrama podem endevinar el funcionament de la funcionalitat. Si no, almenys conduirà a aprofundir i a comprendre millor l’aplicació.

  • Per exemple : Què passa si l’usuari vol afegir diversos identificadors de reserva? L'aplicació sobreescriurà l'entrada anterior o permetrà diverses entrades? Com ho gestionarà i gestionarà?

Com es pot observar en els exemples anteriors, provar els wireframes ajuda realment a identificar els problemes a través d'un wireframe estàtic i evitar que els defectes es filtrin a l'aplicació real. Això és molt beneficiós, ja que sabem que els defectes identificats al principi del procés de desenvolupament són més barats de solucionar que els que es van trobar més endavant.

Eines per emmarcar amb filferro:

Hi ha moltes eines disponibles al mercat, però cal utilitzar-la segons la idoneïtat del context. Tot i que la majoria d’eines com Axure, Power mockup, Simulify, Balsamiq, etc. són de pagament, hi ha algunes útils eines gratuïtes d’emmarcat per cable també:

  1. Cacoo : Cacoo és una eina de dibuix en línia fàcil d'utilitzar que permet a l'usuari crear una gran varietat de diagrames, com ara mapes de llocs, filferros, UML i gràfics de xarxa.
  1. MockupBuilder : MockupBuilder ajuda l'usuari a mostrar ràpidament les seves idees a la pantalla. És una aplicació web GRATU poweredTA amb tecnologia Silverlight.
  1. Projecte Llapis : Pencil Project és gratuït i fàcil d’aprendre. Es pot executar com a complement de Firefox o per si sol.

Quan es poden fer (o es fan) les proves de wireframe:

  • Abans del desenvolupament del producte: Això pot ajudar a identificar buits o requisits que falten, errors de disseny, problemes d’usabilitat etc.- Prevenció de defectes
  • Post desenvolupament: En aquest cas, els wireframes es poden utilitzar com a referències per validar l'aplicació. - Identificació de defectes.

En cas de proves d’usabilitat de Wireframe, normalment es fan manualment i la majoria de les vegades hi participen usuaris en temps real. Se'ls fa una sèrie de preguntes per entendre la seva experiència o comentaris o se'ls proporciona telèfons interactius per captar els comentaris.

Per tenir una anàlisi detallada dels marcs de filferro, de vegades també hi participen experts en temes.

Serveis com ara proves d’usuari pot ser molt útil, on es pot publicar un enllaç de wireframes i després de provar-los, els resultats es generen juntament amb els següents punts de retroalimentació:

  • Un vídeo de la pantalla de cada usuari que prova el vostre wireframe.
  • Àudio de l'usuari que parla de com completa les tasques.
  • Opinions valuoses sobre com millorar el vostre lloc web.

Sortida de les proves de prototips:

Els resultats de les proves de wireframes són molt útils pel que fa a la comprensió del disseny, la navegació, la facilitat d'ús, el flux general de treball i les funcionalitats. Bàsicament, després de provar els wireframes, els wirefrram són més clars i implementables.

Conclusió:

En resum, les proves de wirefrrames funcionen com una acció proactiva i poden ser molt útils per trobar usabilitat i dissenyar llacunes en la fase de pre-desenvolupament de l'aplicació.

Amb això, estic acabant el tema, amb l'esperança que els lectors em tentin d'escriure un altre missatge sobre això fent preguntes i aportant comentaris.

Sobre l'autor: Aquest article està escrit pel membre de l'equip de STH Bhumika. És cap de projecte, amb més de deu anys d’experiència en proves de programari.

Bones proves, com sempre :)

Lectura recomanada

^