Universidad Tecnológica del Centro de Veracruz – Innovasolver

Proyecto: Plataforma tecnológica de georecomendación para productos y servicios en

modalidad subasta inversa basado en técnicas de cómputo sensible al contexto, análisis

de sentimientos, minería de opiniones.

Entregable: (A4.3) Análisis de herramientas para el diseño de mockups.

ÍNDICE

TABLADEILUSTRACIONES..............................................................................................3

I. RESUMEN...............................................................................................................4

II. INTRODUCCIÓN......................................................................................................5

CAPÍTULOI.....................................................................................................................6I. INTERFAZDEUSUARIO....................................................................................................6II. PRINCIPIOS.....................................................................................................................7III. IMPORTANCIA.................................................................................................................8

CAPÍTULOII....................................................................................................................9I. MOCKUPS.......................................................................................................................9II. HERRAMIENTASPARAMOCKUPS....................................................................................9

A. UXPin................................................................................................................................9B. IRISE................................................................................................................................12C. INDIGO™STUDIO...........................................................................................................14D. HOTGLOO........................................................................................................................16E. MOCKINGBIRD................................................................................................................18F. PROTO.IO........................................................................................................................20G. ORIGAMISTUDIO...........................................................................................................22H. JUSTINMIND...................................................................................................................23I. SKETCH............................................................................................................................25J. OMNIGRAFFLE................................................................................................................27K. BALSAMIQ®MOCKUPS...................................................................................................29L. MOQUPS.........................................................................................................................31

CAPÍTULOIII.................................................................................................................33I. RECOMENDACIONES.....................................................................................................33

CONCLUSIONES............................................................................................................34

BIBLIOGRAFÍA..............................................................................................................37

TABLADEILUSTRACIONESIlustración1.Interfazdeusuarioysuelementosgenerales.................................................6Ilustración 2. Diseño Web responsivo(Labrada & Salgado, 2013). Tomando de Revista

UNAM............................................................................................................................7Ilustración3.Tiposdebocetos,tomadode(Tate,2016).......................................................9Ilustración4.LogotipooficialdelaherramientaUxPin......................................................10Ilustración5.LogooficialdelasuiteiRise...........................................................................12Ilustración6.LogooficialdelaherramientaIndigoStudio.................................................14Ilustración7.LogooficialdeHotGloo.................................................................................16Ilustración8.LogooficialdeMockingbird...........................................................................18Ilustración9.LogooficialdelaplataformaProto.io...........................................................20Ilustración10.LogooficialdelaplataformaOrigami..........................................................22Ilustración11.LogooficialdeJustinMind...........................................................................23Ilustración12.LogooficialdelaherramientaSketch.........................................................25Ilustración13.LogooficialdelaherramientaOmniGraffle................................................27Ilustración14.LogooficialdeBalsamiq..............................................................................29Ilustración15.Logooficialdelaherramientamoqups.......................................................31Ilustración16.Resultadosdelapregunta:¿Cuáleslaherramientadediseñodemockups

utilizadaprincipalmente?,delaempresaDesignDeptdeNuevaYork(Vinh&Jacobs,2015),..........................................................................................................................34

Ilustración17.Balsamiqdentrodelas10herramientasmásutilizadas,segúnlaencuestadesubtraction2015(Vinh&Jacobs,2015).......................................................................33

Ilustración18.PlataformaWebparalaseleccionadelaherramientamásidónea,deacuerdoalasnecesidades.(Cooper,2017)................................................................................33

I. RESUMENEnelpresentedocumentoserealizaunanálisisdelasdiferentescaracterísticasqueofrecenlas denominadas herramientas de diseño para mockups, wireframes y prototipos. Eltérminowireframesal igualque losmockups,serefiereaelbosquejodeunproductoointerfazdeusuarioensuformaesqueléticaysuobjetivoesdarunarepresentacióndecómovaafuncionarycomolucirá(Faranello,2012).Unprototipoesunarepresentacióndeunproductoperoadiferenciadeloswireframes,estossondealtafidelidad.Losprototiposlepermitenalusuario,unaexperienciaenriquecidaporinteracciones(Cooper,2017).Como base existen guías de estilo que establecen recomendaciones y buenas prácticassobre las tendencias en el diseñoWeb. Las guías de estilo han estado cambiando deacuerdo a la evolución en el diseño de las páginasWeb; algunas de las guías de estilo(guidelineseninglés)queexistenson:Atlassian®design,Brandstyle,hybridstyle,Yelp®style,entreotras(Busche,2015).Lamayoríadelasherramientasdemockupssebasanenlas guías de estilo en sus elementos, dado que las guías se basan en: aspecto visual,comportamiento y contexto, en donde las herramientas analizadas se centranprincipalmenteenelaspectovisual.Ademásdelasguíasdeestiloexistenlosprincipiosquese aplican en el diseño de interfaces, los cuales son abordados dentro del capítulo 1,resaltandolaimportanciadeseguirlosprincipioseneldiseñodelsitioWeb.LamayoríadelasempresasconsitiosWeb,cuentanconguíasdeestilocomoloson:Uber®,Mozilla®, Airbnb®, Evernote®, Facebook®, entre otras. Los proyectos basados entecnologías Web tienen que generar sus propias guías o utilizar alguna de las guíasexistentes, como las mencionadas anteriormente, tomando las mejores prácticas quefuncionanysonprobadasdebidoaqueatravésdelsitioWebsereflejalaidentidaddelaempresa;enelproyecto“Mealcanza”sedesarrollaránlosmockupsdelaaplicaciónWeb,yresultadodelanálisisdelpresentedocumentosedeterminacuáleslaherramientaidóneaparadesarrollarlosbocetos,aplicandobuenasguíasdeestilo.

II. INTRODUCCIÓNEldesarrollodesoftwarepermitecrearsolucionesinformáticasqueseaneficientesyqueademásdeello,cuenteconunainterfazamigableyfácildeusarparaelusuario.Lainterfazgráficaeslainteraccióndirectadelusuarioconelsoftware,silainterfaznocumpleconlasnecesidadesdelusuario,provocaqueesténoseencuentreidentificadoofamiliarizadoconlamisma.La interfazdeusuario(UI,porsussiglasen inglésUser Interface)sonpartefundamentaldentro del desarrollo de una aplicación, y es una actividad en la que se involucran losdiferentesrolesdesdeelprogramador,hastaelanalistadelsistema.Alparticipartodoslosrolesinvolucradosenelciclodevidadelsoftware,serequiereuntrabajocolaborativoporpartedetodosparapermitirquelaUIsatisfagalasnecesidadesdelcliente,sinafectarelrendimientodelapágina,lograndounequilibrioenlamisma.SegúnellibroTheEssentialGuidetoUserInterfaceDesign:AnIntroductiontoGUIDesignPrinciplesandTechniques(Galitz,2007)“lainterfazdeusuarioeslapartedelacomputadoraydelsoftwarequeelusuariopuedever,escuchar,tocaryconversar,enotraspalabrasinteractuar”;loanteriorrefleja la importancia de una buena interfaz de usuario dentro de la aplicación, ya quedeterminacomosevanaintroducirlosdatosalaplataformaycomosevanamostrarlosdatosdelprocesoalusuario,detalmaneraqueseafácildeentender.Enelproceso dediseñodeuna interfazrequieretomarencuentaciertascaracterísticasquedescribenalosusuarios,talcomo:lapercepción,elexpertis,elprocesamientodelainformación,entreotras.Paraeldiseñodelasinterfacesdeusuario,esimportantetomarencuentalosprincipiosdediseñodeinterfacesdeusuario,dichosprincipiosmencionadospor Constantine and Lockwood (Constantine & Lockwood, 1999) son: estructura,simplicidad,visibilidad,retroalimentación,toleranciayreusabilidad;dichosprincipiossonlapautaparamejorarlaexperienciadelusuarioencualquiertipodeaplicación.Enelpresentedocumento,enelprimercapítuloseencuentraenfocadoalosantecedentesdelasinterfacesgráficas,suimportanciadentrodeldesarrollodesoftwareyladescripcióndelosprincipiosquerigeneldiseñodeinterfaces,yloscontempladosenestedocumentoson los mencionados anteriormente. En el segundo capítulo se mostraran las 11herramientas para el desarrollo de mockups más utilizadas en el campo de diseño ydesarrollo;decadaherramientasedestacalasplataformasdestacadas,sulicencia,costoyla URL donde se descarga la herramienta. Al final del capítulo se incluye un análisiscomparativodelasherramientas,paradeterminarcuáleslamásidóneaconbaseenlasnecesidadesde laplataformaMeAlcanza, tomandoencuenta lascaracterísticasqueserequieranenlainterfazgráfica.

CAPÍTULOI

I. INTERFAZDEUSUARIOLainterfazdeusuario(UIporsussiglaseninglés,userinterface)escontempladadentrodelanálisisdelainteracciónhumano-computadora(HCIporsussiglaseninglés,human-computerinteraction).LaHCIeselestudio,planeación,ydiseñodecómolaspersonasy computadoras trabajan en conjunto para alcanzar un objetivo de la manera másefectiva(Galitz,2007). LaUIlepermitealusuarioquetrabajaconunacomputadoraver,escuchar,hablarytocarsegúnaplique,endondebásicamentesecuentacondoscomponenteprincipales:entradaysalidacomosemuestralailustración1.

Ilustración1.Interfazdeusuarioysuelementosgenerales.

Laentradadedatosoinputeninglés,serefierealoselementosquepermitenalusuariocomunicar lasnecesidadesuórdenesque la computadoradebe realizar. Lasbuenasinterfacesdeusuario,permitencomunicaraccionesyenviarinformacióndeunamanerafácilytotalmenteaisladadelcódigointernodelacomputadora.Lasalidadedatosuoutputporsussiglaseninglés,eslamaneraenquelacomputadoramuestraalusuarioelresultadodelainformaciónprocesada,deunamaneraqueseafácildeentenderparael usuario. Uno de losmecanismomás usuarios para la salida de información es lapantalla,lasbocinas,laimpresora,entreotros.Unabuenainterfazdeusuario,ofrecemecanismosdeentradadeinformaciónquesonfácil de aprender y que cubren las necesidades del usuario.Diseñar una interfaz deusuario queofrezca losmecanismospara comunicar las necesidades respetando losprincipiosdeldiseñodeinterfacesdeusuario,obasadoenalgunosdelospatronesdediseñoprobadosentérminosdediseño,escomplicadoparalosmiembrosdeunequipodedesarrollo,peronoimposiblesisecuentanconlasherramientasadecuadasparaeldiseñodelasmismas.

La UI en ambientesWeb surgen desde inicio de 1990, debido al crecimiento de lainternetanivelmundial,ysurgeeltérminodeinterfazWebdeusuario(WUIporsussiglas en inglés, Web User Interface). La WUI es “esencialmente el diseño de lanavegación y presentación de la información. Es acerca del contenido no de losdatos.”(Galitz,2007).

II. PRINCIPIOSGaliztconsideraquelaUIesunaextensióndelusuario(Galitz,2007).Paraalcanzarquelainterfazdeusuariocumplaconlasnecesidadesdelusuario,ytenganlascapacidadesde responderadichasnecesidadesdemaneraeficienteyeficaz, se recomiendaquecumplanconprincipiosdediseño.En1982elequipoXEROX®trabajoconunconjuntodeprincipiosensuprocesodedesarrollo(Carroll,1997);dichosprincipiosmarcaroneliniciodelasinterfacesgráficasdeusuario.Parael 2001, se cuenta conun conjuntodeprincipios generales(Tidwell, 2011), quepermiteneldiseñoeimplementacióndeinterfacesgráficasywebdeusuarioefectivas.Dichosprincipiosson:A. CLARIDAD

Laclaridadhacereferenciaquelaplataformaesperfectamenteclaraparaelusuario,en cualquier contexto y para cualquier usuario. Este principio está ligado a lasimplicidad,peronoserefierealhechoquetododebeserminimalistaodemasiadosimple;serefierealhechodequenoseaunainterfazdifícildeentenderoqueletomealusuariounalargacurvadeaprendizajeparatrabajarconella.

B. FLEXIBILIDADEsteprincipioserefiereaqueesadaptableacualquiersituación.EnestepuntoyenelambienteWeb,entramuchoelconceptoderesponsivocomosemuestraenlailustración2,tipografía,alertar,entreotros.

Ilustración2.DiseñoWebresponsivo(Labrada&Salgado,2013).TomandodeRevistaUNAM.

C. FAMILIARIDAD

Esteprincipiohacereferenciaaquelosusuariosprefierenvisualizarcosasfamiliaresaelementosdiferentesdesuentorno.Loanteriornoserefiereacopiarlaaplicaciónde otra, se refiere a que existe una lista de elementos en donde se aplica esteprincipio.Loselementosson:

a. Iconos.b. Navegación.c. Comandosybotones(Guardar,Ctrl-C,entreotros).d. Códigodecolor(rojoparaerror,verdeparaprocesoexitoso,entreotros).e. Procesosdepago.

D. EFICIENCIA

LaUIdebesereficienteenelsentidodeesfuerzo,esdecir,paracompletarunatareasedebemedirelesfuerzorequerido(númerodeclicks,númerodealertas,númerodemensajes,númerodepantallasoformularios,entreotros).

E. CONSISTENCIAYESTRUCTURAEsteprincipioserefiereaestablecerelementosquebrindenalusuario lacertezasobreciertas“cosas”,estableciendounlenguajepropiodentrodelaplataforma.Elobjetivo es lograr que el usuario perciba que la aplicación le brinda ciertauniformidad.Lospuntosatomarencuentaenesteprincipioson:

1. Texto.Porejemplo: lostítulossonmásgrandesqueelrestodeltexto, laspalabrasclavesoimportantesennegrita,loslinkenazulysubrayado,entreotros.

2. Alineación.Porejemplo:Alineareltextoalaizquierda,utilizarsangríaparaindicaragrupación,utilizarnumeraciónoviñetasparaindicarunalista.

3. Color.Utilizarunesquemadecolorconsistente.4. Navegación. Utilizar un esquema de navegación consistente en todas las

pantallas.5. Re-utilización.Re-utilizarelementossimilaresparadiferentessituaciones.

III. IMPORTANCIA

EldesarrollodeunaplataformaWebnoesunprocesofácil.Dentrodelprocesode desarrollo de la interfaz, se incluye como parte del equipo alguien conconocimientosendiseñovisual,paraquepermitaeldesarrollodelainterfazdeacuerdoalosprincipiosmencionadosanteriormente.Tantoeldiseño,comoeldesarrollodelaaplicaciónrequieredediversostalentosdentrodelequipode trabajo,dadoqueunasolapersonanoposee todas lashabilidadesnecesariaspara realizarel100% las tareasdentrodelprocesodedesarrollo(Galitz,2007).Lapersonaquecuenteconlashabilidadesdediseño,debeconoceracercadelospatronesdediseño,loscualesayudanaimplementartécnicasdediseñoyaprobadasparadiferentestiposdeaplicaciones.

CAPÍTULOII

I. MOCKUPSLosmockupssonmodelosdediseñodeunapáginaweb,ysehaconvertidoenunodelosmediosdecomunicacióndediseñosvisuales.Entremockups,wireframesyprototipos ladiferencia radica en su funcionalidad y en qué nivel se encuentran enfocados, como semuestraenlailustración3.

Ilustración3.Tiposdebocetos,tomadode(Tate,2016).

Elconceptodemockupsserefierealarepresentacióndelaaparienciayestructuradeunproducto o idea ymuestra la funcionalidad básica en un camino estático (Cao, Ellis, &Khachatryan,2016).Losmockupssonnecesariosparafacilitardecisionesvisualesdeldiseñoantesderealizarunatransiciónalacodificación,eselpuenteentrewireframesyprototipos.Supropósitoesmostrarclaramentecomoluciráelproductofinal.

II. HERRAMIENTASPARAMOCKUPSDurantelafasedediseño,definidaenelciclodevidadeldesarrollodesoftware,esimportanteelprocesodeconstruccióndeprototipos.Losprototipospermitenvisualizar de manera general las interfaces de la aplicación atendiendo losrequerimientosdelusuario.Contarconunherramientacompleta,quepermitacontar con soporte para entornos Web, pruebas, velocidad de creación,animaciones,soporteyunagrancantidaddecontroles,facilitaeltrabajoparaeldiseñadorvisual.A. UXPin

Esunapoderosaherramientaparaeldiseñoyprototipadodeinterfacesdeusuariográficas(UXPin,2017).

Ilustración4.LogotipooficialdelaherramientaUxPin.

i. Descripción

Permite el diseño colaborativo dirigida a pequeños equipos detrabajo.Dentrodesuscaracterísticasprincipalesseencuentran:

• Diseño,compartirypruebassobreprototipos• Retroalimentaciónentreelequipoycolaboradores.• Fácilcreaciónyrevisióndeiteraciones.

ii. IntegraciónOfreceintegraciónconlaherramientaSketchyPhotoshop.

iii. Plataformassoportadas

Esta herramienta se utiliza para sistemas operativos Mac® oWindows®. Aunque también es una plataforma en línea, solorequierelassiguientescaracterísticas:

• Conexiónestableainternet• browser actualizado. Se recomienda Google Chrome™,

MozillaFirefox®oSafari®.iv. Licencia

Ofreceunaversióndepruebaporunperiodode7días, el cual seprolongasiserealizapromociónenredessociales:

• Twitter©,ofrece5díasgratis.• Facebook©,ofrece10díasgratis.• ©Googleplus™,ofrece10díasgratis.

Si se desea adquirir un plan anual o mensual, cuenta con tresversionessegúnlasnecesidades:

• Prototypingo 1a3usuarioso Diseñovisualdealtafidelidadyprototipadode

interfacesdeusuario.o Rápidodiseñodeformularios.

o IntegraciónconSketchyPhotoshop®.o Colaboraciónbásica.o 25prototiposactivos.

• Systemso 4a10usuarioso TodaslascaracterísticasdelaversiónPrototyping.o Generación de documentación y edición desde

programación.o 1diseñodesistemao Colaboraciónavanzada.o 50prototiposactivos.

• SystemEnterpriseo 10omásusuarios.o TodaslascaracterísticasdeSystems.o Diseñodesistemasilimitado.o Seguridad grado empresarial (soporte e

implementación).o Colaboracióngradoempresarial.o Prototiposilimitados.

v. Costo• Prototyping$26.10USDporusuario/mensual• Systems$44.08USDporusuario/mensual• SystemsEnterprise[Noespecificado]

B. IRISE

i. DescripciónHerramienta que permite crear marcos, mockups y prototiposresponsivosenuncortotiempo.Alpermitireltrabajocolaborativo,permitecomunicaryvalidarlosrequerimientosconlosmiembrosdelequipo(IRise,2010).

Ilustración5.LogooficialdelasuiteiRise.

ii. IntegraciónLa siute iRise ofrece integración con otras herramientas como:blueprint,IBM®Rational®DOORS/RTC/RRC,jama,©MicrosoftTFS,yRally.EstaintegraciónessoportadaporsuversiónEnterprise.

iii. PlataformasLasuitedeiRiseesseinstalaenambienteWindows®(Windows®7,WindowsVista™SP2,WindowsXPSP3,WindowsServer®2008R2,WindowsServer®2003SP2).LaherramientaenlíneasevisualizaporbrowserscomoInternetExplorer,Firefox®ySafari®.

iv. Licencias• Starter

o 1autor.o Revisoresilimitados.o 5proyectos.o 2500requerimientos.o Gestióngráficaderequerimientos.o Versióndepruebade30días.

• Teamo 25autores.o Revisoresilimitados.o Proyectosilimitados.o Requerimientosilimitados.o Gestióngráficaderequerimientos.o SoportedemensajesvíaSkypeySlack.o Soporteenvivopremier.

o Versióndepruebade30días.• Enterprise

o Autoresilimitados.o Revisoresilimitados.o Proyectosilimitados.o Requerimientosilimitados.o Gestióngráficaderequerimientos.o SoportedemensajesvíaSkype®ySlack.o Soporteenvivopremier.o IntegraciónRMyAgile.o Personalizacióndepreferenciasdeseguridad.o Análisisdeinteligencia.o Versióndepruebade30días.

v. Costo• VersiónStarter-$29USDpormes• VersiónTeam-$99USDpormes• VersiónEnterprise–[Noespecificado]

C. INDIGO™STUDIO

i. DescripciónPoderosa herramienta que permite a los diseñadores,desarrolladoresyadministradoresdeproductos,asícomousuarioscolaborarrápidamenteparacrearyprobarprototiposlomáscercanoa la realidad antes de que la primera línea de código seaescrita(Infragistics,2017).

Ilustración6.LogooficialdelaherramientaIndigoStudio.

ii. Integración

Indigo™ Studio permite exportar archivos en formato PNG,generación de prototipos HTML, y exportar a archivos PDF. LosmockupssonalmacenadosenesquemasXML.

iii. PlataformasIndigo Studio en su versión de escritorio soporta los siguientessistemasoperativosMac®OSX®(MountainLion)yWindows®(7,8,8.1y10);parasuejecuciónrequiereMicrosoftSilverlight®5+.Ensuversiónenlínea,essoportadaenbrowsertalescomo:

• MicrosoftEdge®• InternetExplorer®11• (Windows®,Mac®OSX®)• Chrome(Windows®,Mac®OSX®,Android™,iOS)• Safari®(Mac®OSX®,iOS)

iv. Licencia

• Licencia Académica: Ofrece las características de Indigo™Studio,totalmentegratuitasdurante1año.

• Professionalo Herramientas sofisticadas para la creación de

prototipos.o Espaciodetrabajoenelcloud.

o Retroalimentación–validacióno Pruebasdeusabilidadilimitadas

• Enterpriseo Prototipos ilimitados para equipos con

versionamientodisponiblesparaelproyecto.o Herramientas sofisticadas para la creación de

prototipos.o Espaciodetrabajoenelcloud.o Retroalimentación–validacióno Pruebasdeusabilidadilimitadas

v. Costo

• Essential–Gratuita• Professional–$249USDanual• Enterprise–$399USDanual

D. HOTGLOO

i. DescripciónEsunaherramientaparaeldiseñodeesquemasyprototiposUX(UsereXperience1) para ambientes Web, móviles y de escritorio. Permitevisualizarelprocesodedesarrollodesdelaplaneación,construcciónypruebasdelosprototipos(HotGloo,2017).

Ilustración7.LogooficialdeHotGloo.

HotGloopermitecompartirprototiposinteractivosconlosmiembrosdelequipoyclientes,paraevaluarelcumplimientoderequerimientos,yqueexistaunambientedecolaboraciónyretroalimentación.Dentrodesuscaracterísticasprincipalesseencuentran:

• Fácildeusar.• Soportemóvil.• Trabajocolaborativo.• Soporteparadesarrolladoresfull-stack.

ii. Integración

HotGloo permite exportar e integrar los prototipos con otrasherramientas,dependiendodeltipodecuentaquesetenga.

o ExportaciónaformatoPNG.o ExportaciónaHTML.o Personalizacióndelinksparacompartir.

iii. Plataformas

HotGloosoloseutilizaenambienteWeb,utilizandoChrome,Firefox®ySafari®(recomendabletenerlosactualizadosalaúltimaversión).

iv. LicenciaHotGlooofrececuentasparautilizarlaherramienta,lascualestienenlassiguientescaracterísticas:

• Groupo Hasta4usuarios.o 2proyectosactivos.o Revisionesilimitadas.o Códigoencriptado128bitSSL.

1EltérminoUXhacereferenciaaldiseñodeexperienciasdeusuario.

o Resguardodiario.• Team

o Hasta10usuarios.o 6proyectosactivos.o Revisionesilimitadas.o Códigoencriptado128bitSSL.o Resguardodiario.

• Agencyo Hasta20usuarios.o 15proyectosactivos.o Revisionesilimitadas.o Códigoencriptado128bitSSL.o Resguardodiario.

• Enterpriseo Usuariosilimitados.o Proyectosilimitados.o Revisionesilimitadas.o Códigoencriptado128bitSSL.o Resguardodiario.

v. Costo

• Todaslascuentas,permiten7díasgratissinrequerirtarjetadecrédito.

• Group–$13USDmensual• Team–$27USDmensual• Agency–$54USDmensual• Enterprise–[Noespecificado]

E. MOCKINGBIRD

i. DescripciónHerramientaquepermite lageneracióndeprototipadodemanerarápida,debidoaquecuentaconuneditor“arrastrarysoltar (draganddrogeninglés)”ytrabajocolaborativo(Pakanati&Chakrabarti,2017).Dentrodelascaracterísticasmásimportantesseencuentran:

o Mockupsinteractivoso Compartirmockupsconlosclientes.o Retroalimentación.o Flujodetrabajo.

Ilustración8.LogooficialdeMockingbird.

ii. Integración

PermiteexportaraformatoPNGyPDF.

iii. PlataformasMockingbirdtrabajaenunentornoWeb,dondeseutilizadesdeChrome,Firefox®,InternetExploreroSafari®.

iv. LicenciaMockingbird ofrece cuatro planes distintos, de acuerdo a lasnecesidadesdelusuarioencuestióndeproyectos.Losplanesson:

o Proyectosilimitados.o 25proyectos.o 10proyectos.o 3proyectos.

Todos los planes ofrecen colaboradores ilimitados, además desoportecompletoparatodaslascaracterísticasdelaherramienta.

v. Costoo Proyectosilimitados–USD$85mensual.

o 25proyectos–USD$40mensual.o 10proyectos–USD$20mensual.o 3proyectos–USD$12mensual.

F. PROTO.IO

i. DescripciónEs una plataforma de prototipado, diseñada en un principioespecíficamente para aplicaciones móviles (iphone®, Android™,iPad®,entreotros).Proto.ioofreceunagrancantidaddecontroles,fuentes,ymarcospara laelaboracióndemockupsenriquecidosdeunamanerafácil.

Ilustración9.LogooficialdelaplataformaProto.io

La plataformaproto.io es ideal para el diseñodemockupsWebomóvil,cuandoserequieralatransiciónendiferentesestados.Unadesusdesventajaseslacurvadeaprendizaje,dadoquenoesfácildeutilizar para usuarios primerizos y que para desarrollar el primerprototipodetomaalrededordedoshoras(Schwartzman,2017).

ii. IntegraciónPermitecompartirproyectosycolaborarconotrosdiseñadores.Unmediopararealizarestácolaboraciónestravésdecompartirlosmockups,yaseaimpresoodigital.

iii. PlataformasProto.ioesaccesiblesoloenentornoWeb,desdecualquierbrowser(recomendableensuversiónmásreciente).

iv. PlanesLaplataformaofreceplanesquecubrendistintasnecesidadesdelosusuarios.Paraestudiantesoacadémicos, laplataformaofrece50%dedescuento.Losplanesqueofrecenson4,yseclasificanen:

o Freelancero 1usuario.o 5proyectosactivos.

o Startupo 2usuarios.o 10proyectosactivos.

o Agency

o 5usuarios.o 15proyectosactivos.

o Corporateo 10usuarioso 30proyectosactivos

o Enterpriseo Escalableacualquiercantidaddeusuarios.o Proyectosilimitados.o Seguridadnivelcorporativo.o Prioridadensoporte.o Reportesdeactividad.o RestriccionesdeaccesoporIP.o Restriccionesdeaccesopordominio.o Comunicaciónencriptada256-bitSSL.

v. Costo• Versióndepruebapor15días.• Freelancer–USD$24mensuales• Startup–USD$40mensuales• Agency–USD$80mensuales• Corporate–USD$160mensuales• Enterprise–[Noespecificado]

G. ORIGAMISTUDIO

i. DescripciónEsunaherramientaparadiseñodemockupsabierta(sincosto),cuyacaracterísticasprincipalesquepermitelacreaciónrápidadediseños,asícomolacolaboraciónentreequiposdetrabajos(Facebook,2017).EsunaherramientacreadaporFacebook©,yesunadelasfavoritasporlosdiseñadores.Estáenfocadaparaeldesarrollodeprototipospara móviles Android™ e IOS, aunque es una de las grandesdesventajasdelamisma.

Ilustración10.LogooficialdelaplataformaOrigami.

ii. Integración100% compatible con la herramienta sketch, dado que permitecopiar cualquierelementodeSketchypegarlodentrodeOrigami,parasuajusteycomportamiento(Facebook,2017).

iii. PlataformasPlataformanativaparaOSX®ytambiéntrabajaenlíneadesdecualquierbrowser.

iv. LicenciaOrigami solo maneja una versión gratuita con todas lascaracterísticas,lascualesson:

• Interaccionesinteligentes.• Capas.• Transiciones• Vistasconscrollhorizontalyvertical.• Animaciones.

v. Costo

Gratuita

H. JUSTINMINDi. Descripción

Es una herramienta flexible para el desarrollo de prototipos, quesoporta una gran cantidad de dispositivos. Es ideal para crearcomplejas interfaces es tan solo unos clicks (Schwartzman, 2017).Dentro de las ventajas más importantes de la herramienta, seencuentran:

o Plantillasycaracterísticasparadispositivosenespecífico.o Rápidoeintuitivoatravésdelmétodo“arrastrarysoltar”.o Soporteparainteraccióndegestos.

Dentrodesusdesventajasseencuentraquetieneunamedianacurvade aprendizaje, lo cual impacta en los diseñadores nuevos en laplataforma.

Ilustración11.LogooficialdeJustinMind.

ii. Integración

Incluye una colección de elementos Web UI como web buttons,menus,charts,entreotros.ElementosUIparaiOS,Android™yotrossistemasoperativos.JustinMindpermiteexportarunprototipoaHTMLysielprototipoincluye interacción, está se exporta a JS. La documentación delproyectoseexportaaMSWorduOpenOffice.LaversiónEnterpriseofreceintegraciónconlaherramientaMSTeamFoundationServer(TFS),permitiendoimportaryexportarelementosdetrabajoTFS.

iii. Plataformaso MAC®o Windows®

iv. Licencia

o Professionalo

o Enterprise

o AccesoatodaslascaracterísticasPRO§ Colaboraciónenpropiosservidores.§ Gestiónderequerimientos.§ Integración:JIRA,MicrosoftTFS,Doors.§ SincronizaciónUIAssets.§ Gestiónavanzadadeusuarios.§ IntegraciónLDAP.§ Soportedenivelempresarial.

v. Costo

o PROFESSIONAL–USD$19mensual.o ENTERPRISE–[Noespecificado].

I. SKETCH

i. DescripciónEsunapoderosaherramientadediseñoprofesional,enlacualvariasplataformas actuales de prototipo y mockups se basaron para sudesarrollo(Bohemian,2017). Galardonaenel2015como lamejoraplicacióndelañoen los“netAwards”,ganadoraenel2012enel“AppleDesignAward”yenel2015por“DesignToolsSurvey”(Vinh& Jacobs, 2015) como la aplicación número 1 para el diseño deinterfacesdeusuarioywireframing.

Ilustración12.LogooficialdelaherramientaSketch.

Sketch permite diseñar no solo interfaces gráficas profesionales,tambiénpermitelacreacióndeiconos,sitiosWeb,ocualquiercosaqueelusuariodeseecrear.Susprincipalescaracterísticasson:

• Precisión• Manejodeobjetos.• Elinspector.• Poderosoconjuntodeherramientas.• Reusabilidaddeelementos.• ExportaciónyCloud.• NativaaOSX®.

ii. Integración

Sketchpermiteexportar laspropiedadesde losobjetosy formasaformato CSS para su manipulación desde el código. Además deofrecerintegraciónconlassiguientesherramientas:

• Framer• Zeplin• Marvel• Flinto• KiteCompositor• InVision

iii. PlataformasSketch en su versiónmás reciente 45.1 es compatible a partir deMac® OS X® El capitán. Si se cuenta con una versión anterior delsistemaoperativo,comoMac®OSX®Yosemite,seinstalalaversión41.

iv. LicenciaVersióndeprueba.Licenciaanual.

v. CostoElcostoporlicenciaeselUSD$99.00porunaño.Larenovacióndelicencia con actualizaciones depende de la cantidad de usuarios(seats)tengaasociadosaesalicenciaycuantossedeseanrenovar.

• 1usuario-USD$69.00• 2a9usuarios–USD$64.00• 10a19usuarios–USD$59.00• 20a49usuarios–USD$54.00• Másde50usuarios–USD$49.00

Elcostoparaunaversióneducativadependesisesolicitademaneraindividual (estudiante, profesor, colaborador) o como institucióneducativa. De manera individual se requiere un correo de lainstituciónyuncomprobantedeinscripciónovigenciaalamismaenelañoencurso.Comoinstitucióneducativaserequiereuncorreodelainstituciónyelcursooplandeestudiosquejustifiqueelusodelaherramienta,asícomounacredencialquecompruebelaadscripciónalamisma.

• Estudiantes/Maestros/Colaboradores–50%dedescuento• Institucióneducativa-Gratuita

J. OMNIGRAFFLE

i. DescripciónOmnigraffleseencuentraensuversión7,ypermitecreardistintostiposdegráficostalcomomockups,sistemaseléctricos,hastaarbolesfamiliares.Ademásproveeunalibreríadeelementosreusablesquepermiterealizareltrabajodeunamanerarápida(Omni,2017).En su versión 7 ofrece la automatización a través de JavaScript oAppleScript®segúnseaelrequerimiento,importardesdeSVG,nuevopanelparaexportarelementos,conjuntosdeaccesosdirectosdesdeelteclado,conversionesdeformasatextoydelíneasaformas,entreotrascaracterísticas.

Ilustración13.LogooficialdelaherramientaOmniGraffle.

ii. Integración

La plataforma ofrecemecanismos para exportar e importar desdedistintasherramientasoextensiones,comoloson:

• ExportaraPNGyPDF.• ExportaraJPG,GIF,BMPyTIFF.• ImportaryExportaraSVG.• IntegraciónconPhotoshop®.• SoporteparaVisio.

iii. Plataformas

DisponibleparaOSX®10.11,iOS(iPhone®,iPad®).Loslenguajesquesoporta son: alemán, inglés, español, francés, italiano, portugués,japonés,chino,ruso,coreano,yholandés.

iv. Licencia• Versióndepruebapor14días.

• VersiónStandard.o Manejodelayouts.o Manejodeherramientasdedibujo(limitadoa2

formas).o Barradeherramientas.o Interfaz.o Exportación.

• VersiónProContienetodaslascaracterísticasdelaversiónStandard,ademásde:

o Herramientasdedibujocompletas.o Combinacionesdeformas.o ExportaraSVGyVISIO.o Manejodetablas.o Propiedadesdeobjetos.o AutomatizaciónconjavascriptyAppleScript®.o Interacción.o Responsividad.o Modopresentación.

v. Costo

• IOSa. Pro–$99.89USD.b. Standard-$49.99USD.

• MAC®a. Pro-$199.99USD.b. Standard-$99.99USD.

K. BALSAMIQ®MOCKUPS

i. DescripciónBalsamiq®Mockups en su versión 3, es un poderosa herramientaparalacreacióndemockups,quefacilitalacreacióndelosbocetosde diseño necesarios en el proceso de desarrollo desoftware(Faranello,2012).Secaracterizaporquelainterfazprincipalcuentaconáreasprincipales:

• Barradeherramientas.• LibreríadeelementosUI.• Áreadetrabajo(canvas).• Paneldenavegación.• Propiedades.

Ilustración14.LogooficialdeBalsamiq.

LascaracterísticasprincipalesqueofreceBalsamiq®ylaresaltasobrelasdemásexistentesenelmercadoson:

• Fácildeusar.• Herramientassimples.• Portabilidad.• Asequibilidad.

ii. IntegraciónParalacolaboraciónenlarealizacióndelosbocetosoesquemasdelaaplicación,serequierequelaaplicaciónpermiteexportararchivos.Balsamiq®permiteexportara:PNG(individualotodos),PDF,yXML.

iii. PlataformasSoporte para los sistemas operativosWindows®,macOS®, y Linux(requiere la instalación de Adobe Air). También cuenta con unaherramienta en línea, que se accede desde cualquier browser(GoogleChrome™,MozillaFirefox®,ySafari®).

iv. Licencia

• Mockups3forDesktop(Aplicacióndeescritorio).o Licenciapara1solousuario.o Licenciaparaunconjuntodeusuarios.o Actualizacióndelicencia.

• MyBalsamiq(versiónWeb).o Desde3hasta100proyectosactivos.

v. Costo

• Mockups3forDesktopo Desde$89.00USDporlicencia.

• MyBalsamiqo Desde$120USDanual.

L. MOQUPS

i. DescripciónUna de las principales características de la herramienta es quepermitetrabajar remotamentedesde lanube (cloud),encualquiermomento,desdecualquierdispositivosinpreocuparseporelsistemaoperativo.Porlotantoesidealparaproyectos,endondeelequipode trabajo se encuentra disperso geográficamente (S.C Evercoder,2017).

Ilustración15.Logooficialdelaherramientamoqups.

Moqupsofreceunainterfazintuitivaydefácilaprendizaje,evitandolacomplejidadensuspanelesybarrasdeherramientas.Unpuntofuertede laherramientaesqueofreceacceso ilimitadoausuariosconsolounasuscripción.Dentrodesuscaracterísticasprincipalesseencuentra:

1. Paneldegestiónflexibleyescalable.2. Edicióndeobjetosintuitiva.3. Granbancodefuentes.4. Granbancodeiconos.5. Importarimágenesatravésde“draganddrog”.6. Libreríadeobjetosinteligentes.

ii. Integración

Adiferenciadeotrasherramientas,moqupsofreceintegraciónconGoogleDrive™ypermiteexportarunproyectocompletoolimitarloalasecciónquerequiere:

• Exportarproyectocompleto.o PDF.o Imágenes(PNG).

• Exportarpartedelproyecto.o PDF.o Imagen(PNG).

Enlosdestinosdelaexportación,seeligequeseaeneldiscolocaldelequipo,perotambiénpermiteguardarloenGoogleDrive,DropBoxoelservidordeMoqups.

iii. PlataformasLa plataformamoqups es accesible solo en entorno Web, desdecualquierbrowser(recomendableensuversiónmásreciente).

• GoogleChrome™.• MozillaFirefox®.• Safari®.

iv. Licencia

Todos los planes demoqups ofrecen colaboración en tiempo real,personalizacióndelaseguridad,manejodeplantillas(masterpage),exportacióndearchivos,soporteeintegraciónconGoogleDrive™.

• Freeo 1proyecto.o Limitadoa300objetos.o Almacenamientode5MB.

• Basico 10proyectos.o Almacenamientode1GB.o Usuariosilimitados.

• Professionalo 50proyectos.o Almacenamientode5GB.o Usuariosilimitados.

• Ultimateo Proyectosilimitados.o Almacenamientode20GB.o Usuariosilimitados.

v. Costo• Basic-$19.00USDmensual.• Professional-$29.00USDmensual.• Ultimate-$49.00USDmensual.

CAPÍTULOIIII. RECOMENDACIONES

ExistenalgunasherramientasmuypoderosascómoAXUREoMARVELquecubrenlasnecesidadesdeprototipoconciertoniveldefuncional;peroparaeldiseñodemockups,lasherramientaslistadasenelcapítulo2cumplenconlasnecesidadesdelproyecto“MeAlcanza”.Algunasdelasherramientasofrecencomosalidacódigofuente,taleselcasodeNeoton,peroparalasnecesidadesdelpresenteproyectonofuenecesarioadquirirdichaherramienta.LaplataformadeBalsamiqmockups,esmuycompletayofrecelas características necesarias para realizar los mockups de la aplicación; en laencuestadel2015desubtraction,semuestraquebalsamiqseencuentraentrelasfavoritasparaeldiseñodemockups,comoseapreciaenlailustración17.

Ilustración16.Balsamiqdentrodelas10herramientasmásutilizadas,segúnlaencuestadesubtraction

2015(Vinh&Jacobs,2015).

Paradeterminarqueherramientaes lamásadecuada,serecomiendautilizar lapágina“Designer’sToolkit:PrototypingTools”(Cooper,2017)endondeserealizaunfiltrosobrelasherramientasmejorcalificadasdelaWeb,ypermitefacilitarlatomadedecisiones.En la ilustración18semuestraelusode laaplicaciónWebpara filtrar las herramientas y determinar cual resulta ser las más idónea deacuerdoalasnecesidadesdelaorganización.

Ilustración17.PlataformaWebparalaseleccionadelaherramientamásidónea,deacuerdoalas

necesidades.(Cooper,2017)

CONCLUSIONES

Lasherramientasdediseñodemockups,wireframesobocetossehanvueltomáscompetitivasparael2017.ExistenherramientascomoAXURE,MARVEL,oSOLIDIFY,que se dedican al desarrollo de prototipos con cierto nivel de funcionalidad(transiciones, acciones, entre otros). La empresa subtraction.com dedica unaencuestaaherramientasdediseñoyenel2015laherramientaSketchfuelamejorcalificada(Vinh&Jacobs,2015)porunamuestraqueinvolucraempresas,startups,institucioneseducativas,freelancers,agencias,yotrosde200ciudadesdetodoelmundo;enlailustración16seapreciaelresultadodelaencuesta2105sobrelaherramientadediseñodemockupsutilizadaprincipalmente.

Ilustración18.Resultadosdelapregunta:¿Cuáleslaherramientadediseñodemockupsutilizada

principalmente?,delaempresaDesignDeptdeNuevaYork(Vinh&Jacobs,2015),

EldiseñodemockupsdeunapáginaWeb,debencontemplarqueserequieretexto,gráficos,video,audio,barrasdenavegación,panelesy responsividad (Liu&Ma,2010).LosdiseñadoresdebenconsiderartodoslosaspectosqueinvolucraeldiseñodeunainterfazWeb,talescomo:título,iconos,barradenavegación,video,flash,barra de navegación en columnas, contenido, colores, formas y texturas. Conrespectoalasherramientasdeprototipado,lascualesofrecenunamayorcantidadde características, dentro de las preferidas del grupo se encuentran INVISION,AXURE,FRAMER,MARVELyun9%seorientapornoutilizarunaherramientadeprototipado.De las herramientas contempladas en el presente documento, en la tabla 1 semuestranlascaracterísticasqueofrececadaunadeellas,asícomoelcostoylaslicencias, destacando que para el desarrollo del proyecto es importante que laherramientatengasoporteparaambienteWeb.

Herramienta

Mockupspara

Plataformassoportadas Licencia

Versiónde

pruebaCosto Elementos

soportados

UxPin WebMóvil

Mac®OSX®Windows®WebApp

Comercial Si Desde$26.10USD

9tiposdeelementos+80elementos4kits.

IRISE WebMóvil

Windows®WebApp

Comercial Si Desde$29.00USD

7tiposdeelementos

INDIGO™STUDIO

WebMóvilEscritorio

Mac®OSX®Windows®

ComercialAcadémicaBásica

Si Desde$249USD

21controlesinteractivos300iconos300escenas

HOTGLOO WebMóvilEscritorio

WebApp Comercial Si Desde$13USD

5000iconos2000elementos

MOCKING-BIRD

WebMóvilEscritorio

WebApp Comercial Si Desde$12USD

+90elementos

PROTO.IO WebMóvilEscritorio

WebApp Comercial Si Desde$24USD

6librerías3categoríasdeiconos49elementos

ORIGAMI Móvil Mac®OSX®WebApp

Gratuita - - +15secciones6animaciones17tiposdeelementos5formas40utilidades

JUSTINMIND

WebMóvil

Mac®OSX®Windows®

Comercial Si Desde$19USD

6tiposdeelementos6librerías6widgets

SKETCH WebMóvilEscritorio

Mac®OSX®

Comercial Si Desde$69USD

+1000elementosUI+130componentes8categorías

OMNIGRA-FFLE

WebMóvilEscritorio

Mac®OSX®

Comercial Si Desde$49.99USD

4categorías23categorías

BALSAMIQ®MOCKUPS

WebMóvilEscritorio

Mac®OSX®Windows®Linux

Comercial Si Desde$89USD

500iconos75elementos

MOQUPS WebMóvilEscritorio

WebApp ComercialGratuita

Si Dese$19USD

300objetos+600iconos10categorías

Tabla1.Tablacomparativadelasdistintasherramientasanalizadas.

Determinarcuáleslaherramientamásidónea,dependelasnecesidadesdelusuarioydelaexpertisdelmismo.Existenherramientasmuycompletas,peroquecuentacon una curva de aprendizaje muy extensa, lo que implicaría retrasos en el

proyecto.Otrasdelasherramientas,sonmuycompletas,peroloscostossobrelosplanesqueofrecesonmuycostososynopuedensercubiertosconelproyecto.Aunque existen otras herramientas, que brindan la facilidad de una licenciaacadémicalocualpermitecontarconunusogratuito,perolimitadoaqueelusonoserá comercial. Para el proyecto “MeAlcanza”, se realizaran los mockups en laherramientaBalsamiq®Mockups,debidoaqueesunreferenteenlaetapaspreviasdelproyectoycuantaconloselementosidóneosalasnecesidadesdelmismo.

BIBLIOGRAFÍABohemian.(2017).Scketch.Retrievedfromhttps://www.sketchapp.com

Busche, L. (2015). Web Design Style Guides. Retrieved fromhttps://designschool.canva.com/blog/apple-google-starbucks-inside-the-web-design-style-guides-of-10-famous-companies/

Cao,J.,Ellis,M.,&Khachatryan,N.(2016).Theguidetomockups.

Carroll,J.M.(1997).HUMAN-COMPUTERINTERACTION:PsychologyasaScienceofDesign.Annual Review of Psychology, 48(1), 61–83.https://doi.org/10.1146/annurev.psych.48.1.61

Constantine,L.,&Lockwood,L.(1999).Softwareforuse(1sted.).ACMPress.

Cooper. (2017). Designer’s Toolkit: Prototyping Tools. New York. Retrieved fromhttps://www.cooper.com/prototyping-tools

Facebook.(2017).OrigamiStudio.Retrievedfromhttp://origami.design

Faranello, S. (2012). Balsamiq Wireframes Quickstart Guide. Retrieved fromhttps://books.google.com/books?id=gk6b4gGQjjsC&pgis=1

Galitz,W.O. (2007).TheEssentialGuidetoAn IntroductiontoGUIDesignPrinciplesandTechniques.Xtemp01.

HotGloo. (2017). HotGloo. Hamburgo, Alemania.: HotGloo GbR. Retrieved fromhttps://www.hotgloo.com

Infragistics.(2017).IndigoStudio.

IRise.(2010).iRiseAdministrator’sGuide.iRiseInc.

Labrada, E., & Salgado, C. (2013). DiseñoWeb Adaptativo o responsivo.Revista DigitalUniversitaria [En Línea], 13. Retrieved fromhttp://www.revista.unam.mx/vol.14/num1/art07/index.html

Liu,H.,&Ma, F. (2010). Researchon visual elementsofwebUI design.2010 IEEE11thInternationalConferenceonComputer-AidedIndustrialDesignandConceptualDesign,CAIDandCD’2010,1,428–430.https://doi.org/10.1109/CAIDCD.2010.5681317

Omni,G.(2017).OmniGraffle.EstadosUnidos:OmniGroup.

Pakanati,S.,&Chakrabarti,S.(2017).Mockingbird.SanFrancisco,California.

S.C Evercoder, S. S. R. L. (2017).Moqups. S.C Evercoder Software S.R.L. Retrieved fromhttps://moqups.com/web

Schwartzman,E.(2017).Designer’sToolkit:PrototypingTools.

Tate, T. (2016). Concerning Fidelity in Design. Retrieved fromhttp://www.uxbooth.com/articles/concerning-fidelity-and-design/

Tidwell,J.(2011).DesigningInterfaces.(M.Treseler,Ed.)(Second).Sebastopol,CA:O’ReillyMedia.

UXPin, S. (2017). UXPin Prototyping. Retrieved fromhttps://www.uxpin.com/products/uxpin-prototyping

Vinh,K.,&Jacobs,M.(2015).DesignToolsSurvey.NewYork:DesignDept.Retrievedfromhttp://tools.subtraction.com/index.html