DISEÑO CENTRADO EN EL USUARIO
The following has evaluated to null or missing:
==> mostrarTituloH2 [in template "20102#20129#105831" at line 4, column 40]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign hayH2 = getterUtil.getBoolean... [in template "20102#20129#105831" at line 4, column 1]
----
1<#assign title = .vars['reserved-article-title'].getData()>
2<div class="containerInterior">
3<#assign hayH1 = getterUtil.getBoolean(MostrarTituloH1.getData())>
4<#assign hayH2 = getterUtil.getBoolean(mostrarTituloH2.getData())>
5
6<#if hayH1>
7 <h1 aria-level="1" role="heading" id="titulo">${layout.getName(locale)}</h1>
8</#if>
9<#if hayH2>
10
11 <#if TituloContenido.getData()?? && TituloContenido.getData() != "">
12 <#assign contenido = TituloContenido.getData()>
13 <#else>
14 <#assign contenido = title>
15 </#if>
16
17 <#if hayH1>
18 <p id="subtitulo"
19 aria-level="2"
20 role="heading"
21 style="
22 color: #007f33 !important;
23 font-size: 45px;
24 font-family: 'IberPangea Medium', sans-serif;
25 line-height: 45px;
26 margin-top: .75em;
27 margin-bottom: .9em;">
28 ${contenido}
29 </p>
30 <#else>
31 <p id="subtitulo"
32 style="
33 color: #007f33 !important;
34 font-size: 45px;
35 font-family: 'IberPangea Medium', sans-serif;
36 line-height: 45px;
37 margin-top: .75em;
38 margin-bottom: .9em;">
39 ${contenido}
40 </p>
41 </#if>
42
43</#if>
44
45<#if getterUtil.getBoolean(MostrarCategorias.getData())>
46
47
48
49 <#assign journalArticleId = .vars['reserved-article-id'].data>
50 <#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")>
51
52 <#assign assetCategoryPropertyLocalService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
53
54 <#assign article = journalArticleLocalService.getArticle(groupId, .vars['reserved-article-id'].data) />
55 <#assign assetEntryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService")>
56 <#assign asset = assetEntryLocalService.getEntry('com.liferay.journal.model.JournalArticle', article.resourcePrimKey) >
57 <#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") />
58
59 <p class="tag-categorias">
60
61 <#list asset.getCategories() as category>
62
63
64
65 <#if assetCategoryPropertyLocalService.fetchCategoryProperty(category.getCategoryId(), "friendlyURL")??>
66
67 <#assign categoryFriendly = '/tag/' + assetCategoryPropertyLocalService.fetchCategoryProperty(category.getCategoryId(), "friendlyURL").getValue() />
68
69 <#if layoutLocalService.fetchLayoutByFriendlyURL(groupId, false, categoryFriendly)??>
70 <#assign categoryLayout = layoutLocalService.fetchLayoutByFriendlyURL(groupId, false, categoryFriendly) />
71 <#assign categoryLayoutURL = portalUtil.getLayoutFullURL(categoryLayout, themeDisplay) />
72
73 <a class="tag-categoria" href="${categoryLayoutURL}">${category.getTitle(locale)?cap_first}</a>
74
75 <#else>
76 <a class="tag-categoria" href="/tag/#">${category.getTitle(locale)?cap_first}</a>
77
78 </#if>
79 </#if>
80
81
82
83
84 </#list>
85
86 </p>
87
88</#if>
89<div id="contenidoEntradilla">${DescripcionDetalleContenido.getData()}</div>
90
91
92<#if ContenidoWebcofl.getSiblings()?has_content>
93 <#list ContenidoWebcofl.getSiblings() as cur_ContenidoWebcofl>
94 <#assign
95 webContentData = jsonFactoryUtil.createJSONObject(cur_ContenidoWebcofl.getData())
96 />
97
98 <#if webContentData?length gt 5>
99 <@liferay_asset["asset-display"]
100 className = webContentData.className
101 classPK = webContentData.classPK?number
102 />
103
104 </#if>
105
106
107 </#list>
108</#if>
109</div>
110<@liferay_util["html-top"]>
111<style>
112 #decPagination div.containerInterior p#subtitulo {
113 font-family: "Iberpangea Medium";
114 font-size: 45px;
115 line-height: 45px;
116 color: #007F33;
117 margin-bottom: 20px;
118 }
119
120
121 div.contenidoCentrado div.contenidoInterior div.containerInterior p.tag-categorias a.tag-categoria:focus{
122 outline: 2px solid rgba(0, 0, 0, 0.7) !important;
123 }
124 p.tag-categorias > .tag-categoria {
125 width: auto !important;
126 max-width: inherit !important;
127 }
128
129 div.faldon h2 {
130 width: 100%;
131 float: left;
132 font-size: 1.26em;
133 font-family: IberPangeaText Light, sans-serif;
134 margin-bottom: 2em;
135 border-bottom: 1px solid #e0e0e0;
136 padding-bottom: .8em;
137 color: #427314 !important;
138
139 line-height: 1.35em;
140 margin-top: .75em;
141 }
142 .contenidoInterior div.faldon h2+ul li:before {
143 margin: .15em 0 0 -1.75em;
144 font-size: 1em;
145 }
146 .cursiva_texto {
147 font-style: italic;
148 }
149 .contenidoInterior h1 {
150 font-family: 'IberPangea', sans-serif !important;
151 font-size: 32px !important;
152 border: none !important;
153 line-height: 36px !important;
154 letter-spacing: 0px !important;
155 color: #00402A !important;
156 padding-left: 0em !important;
157 margin-bottom: 14px !important;
158 }
159 p span.table a.enlace-actualidad[href*="/tag/"],
160 p span.table a.enlace-actualidad[href*="/label/"],
161 p.tag-categorias a.tag-categoria[href*="/tag/"],
162 p.tag-categorias a.tag-categoria[href*="/label/"]{
163 line-height: 23px !important;
164 }
165 .contenidoInterior #contenidoEntradilla p.entradilla {
166 font-family: IberPangeaText, sans-serif !important;
167 font-size: 17px !important;
168 line-height: 23px !important;
169 font-weight: 700;
170 color: #615D5A !important;
171 margin-top: 2em;
172 }
173
174 .contenidoInterior h2#subtitulo{
175 font-family: 'IberPangea Medium', sans-serif !important;
176 margin-bottom: 0.4em;
177 }
178 #decPagination div.containerInterior{
179 max-width:980px;
180 margin:0 auto 25px;
181 }
182 #decPagination div.containerInterior h1#titulo{
183 font-family:"Iberpangea Medium";
184 font-size:32px;
185 line-height:36px;
186 color:#00402A;
187 text-transform:none;
188 border-left:none;
189 margin-top:20px;
190 }
191 #decPagination div.containerInterior h2#subtitulo{
192 font-family:"Iberpangea Medium";
193 font-size:45px;
194 line-height:45px;
195 color:#007F33;
196 margin-bottom:20px;
197 }
198 #decPagination div.containerInterior p.tag-categorias{
199 margin-bottom:30px !important;
200 }
201 #decPagination div.containerInterior p.tag-categorias a.tag-categoria{
202 margin-right:20px;
203 color:#00402A;
204 }
205 #decPagination div.containerInterior div#contenidoEntradilla p.entradilla{
206 font-family:"IberpangeaText";
207 font-size:20px ;
208 line-height:26px;
209 color:#615D5A;
210 }
211 @media all and (max-width:500px){
212 #decPagination div.containerInterior h1#titulo{
213 font-size:26px;
214 line-height:36px;
215 }
216 #decPagination div.containerInterior h2#subtitulo{
217 font-size:35px;
218 line-height:35px;
219 margin-bottom:20px;
220 }
221 #decPagination div.containerInterior div#contenidoEntradilla p.entradilla{
222 font-family:"IberpangeaText Bold";
223 font-size:16px ;
224 line-height:24px;
225 }
226 }
227 @media screen and (max-width: 47.95em) {
228 .contenidoInterior h1 {
229 font-size: 26px !important;
230 }
231 .contenidoInterior h2#subtitulo{
232 font-size: 35px;
233 line-height: 35px;
234 color: #007F33 !important;
235 margin-bottom: 1em;
236 }
237 .contenidoInterior #contenidoEntradilla p.entradilla {
238 margin-top: 0.8em;
239 }
240 .contenidoInterior #contenidoEntradilla p.entradilla {
241 line-height: 24px !important;
242 }
243 }
244
245
246</style>
247</@>
Si hay un ámbito en el que la digitalización es más palpable, ese es el empresarial: la inteligencia artificial, el machine learning, el Internet de las Cosas y, sobre todo, el big data, que permite procesar los datos para convertirlos en información útil para las empresas. Conocer lo que opinan los usuarios se ha vuelto fundamental para las compañías a la hora de desarrollar sus estrategias y esto influye, por ejemplo, en la forma de diseñar sus productos digitales —dispositivos, webs, aplicaciones, etc.—.
QUÉ ES EL DISEÑO CENTRADO EN EL USUARIO (DCU). OBJETIVOS
Durante varias décadas, el diseño de productos y servicios por parte de las empresas se hizo al margen de los usuarios. A partir de los años 90, sin embargo, esto empezó a cambiar, en parte gracias a las aportaciones del profesor norteamericano especializado en ingeniería de la usabilidad Donald Norman, quien puso de manifiesto dos aspectos que cambiaron el mundo del diseño: la usabilidad de los productos y la conveniencia de incorporar las necesidades y los intereses reales del usuario.
Norman colocó por primera vez al usuario en el centro del diseño, inaugurando así la era del user centric. Pero, ¿qué es exactamente el Diseño Centrado en el Usuario (DCU)? El desarrollador de software HubSpot lo define como "un proceso de diseño iterativo en el que los diseñadores se centran en los consumidores y sus necesidades apoyándose en una variedad de técnicas de investigación para crear productos altamente utilizables y accesibles".
"Ningún producto es una isla. Un producto es más que el producto. Es un conjunto cohesivo e integrado de experiencias"
Donald Norman, creador del término 'experiencia de usuario'
EL DCU se ha revelado fundamental a la hora de proporcionar una mejor experiencia al usuario y ha cobrado gran importancia para las empresas en los últimos años. Un informe
de la consultora McKinsey & Company relaciona los resultados financieros de trescientas empresas con la importancia que se le da internamente al DCU e, incluso, apunta a que las compañías deberían pensar en él en términos estratégicos teniendo en cuenta estas cuatro máximas: el DCU es más que una sensación, es más que un departamento, es más que una fase, es más que un producto.
PROCESO DE DISEÑO CENTRADO EN EL USUARIO (DCU)
El proceso de Diseño Centrado en el Usuario comprende diversas fases que, con ciertas variaciones en función de si se aplican en la creación de un dispositivo, una web o una aplicación, son válidas para cualquier producto digital:
Investigación. Especificar el contexto de uso
Se analizan las características de los usuarios, es decir, se identifica a las personas que usarán el producto, para qué lo usarán y las condiciones en las que lo usarán. Por tanto, además de al usuario se tiene en cuenta la tarea y el entorno.
Concepto. Detallar los requisitos
El objetivo es alcanzar soluciones deseables, factibles y viables. Para ello, tras estudiar a los usuarios y determinar una gama de soluciones, se comienza a investigar cuáles son técnicamente factibles y cómo hacer que sean financieramente viables.
Diseño. Crear las soluciones
Esta parte del proceso va desde un concepto aproximado al diseño completo. En base a lo aprendido, surgirán numerosas ideas, se identificarán oportunidades, y se probarán y perfeccionarán soluciones a través de prototipos.
Evaluación. Realizar las pruebas
Cuanto antes se muestre el diseño a los usuarios reales y se obtengan sus comentarios, más fácil será dar con una solución óptima.La evaluación es tan integral en el DCU como las pruebas de calidad en el desarrollo de software.
Lanzamiento. Monitorizar el producto
Al lanzar el producto debe realizarse un seguimiento para saber si tiene el impacto deseado. Además de atender a los indicadores cualitativos, también se debe monitorear el desempeño y volver a recopilar información de los usuarios.
HERRAMIENTAS DEL DISEÑO CENTRADO EN EL USUARIO (DCU)
Como hemos venido viendo, el DCU implica conocer a fondo al usuario. Por ello, esta disciplina se relaciona con un amplio conjunto de técnicas y herramientas que permiten obtener esa información y alcanzar la mejor experiencia de usuario o UX —User eXperience por sus siglas en inglés—. En el entorno digital, este concepto se refiere a la satisfacción que el consumidor obtiene al relacionarse con una marca a través de los diversos puntos de contacto de una compañía —webs, apps, bots, redes sociales, etc.—.
VER INFOGRAFÍA: Las ventajas del Diseño Centrado en el Usuario (DCU) en un entorno digital [PDF]Entre las herramientas de la metodología DCU destacan: encuestas, focus groups, tests de usabilidad, evaluaciones heurísticas, eye tracking, analítica web, etc. A destacar también las métricas user centric y site centric. La primera, proporciona datos precisos y cuantificables de todos los usuarios que visitan una web a través, por ejemplo, de las cookies. La segunda, permite obtener información cualitativa, como detalles sobre el comportamiento de los usuarios.
Pese al apoyo de las herramientas mencionadas, existen diversas razones por las que un proyecto de IT puede fracasar. Susan Weinschenk, experta en experiencia de usuario y autora del libro Diseño inteligente: 100 cosas sobre la gente que todo diseñador necesita saber, señala las principales: requisitos mal definidos, mala comunicación entre clientes, desarrolladores y usuarios, objetivos poco realistas del proyecto, evaluación incorrecta de los recursos necesarios o uso de tecnologías inmaduras.