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