DESIGN CENTRADO NO USUÁRIO
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</@>
Se existe um âmbito onde a digitalização é mais palpável, este é o empresarial: a inteligência artificial, o machine learning, a Internet das Coisas e, especialmente, o big data, que permite processar os dados para convertê-los em informações úteis para as empresas. Conhecer a opinião dos usuários se tornou fundamental para que as empresas possam desenvolver suas estratégias e isso influencia, por exemplo, a forma de criar seus produtos digitais —dispositivos, sites, aplicativos, etc.—.
O QUE É O DESIGN CENTRADO NO USUÁRIO (DCU). OBJETIVOS
Durante várias décadas, o design de produtos e serviços por parte das empresas foi feito sem levar em conta os usuários. No entanto, a partir dos anos 90, esse panorama começou a mudar, em parte graças às contribuições do professor norte-americano especializado em engenharia de usabilidade Donald Norman, que evidenciou dois aspectos que mudaram o mundo do design: a usabilidade dos produtos e a conveniência de incluir as necessidades e os interesses reais do usuário.
Norman colocou pela primeira vez o usuário no centro do design, inaugurando assim a era do user centric. Porém, o que é exatamente o Design Centrado no Usuário (DCU)? O desenvolvedor de software HubSpot define esse conceito como “um processo de design iterativo onde os designers se concentram nos consumidores e em suas necessidades, apoiando-se em uma variedade de técnicas de pesquisa para criar produtos altamente utilizáveis e acessíveis”.
"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 INFOGRÁFICO: As vantagens do Design Centrado no Usuário (DCU) em um ambiente digital [PDF]Entre as ferramentas da metodologia DCU se destacam: pesquisas, focus groups, testes de usabilidade, avaliações heurísticas, eye tracking, análise web, etc. Também merece destaque as métricas user centric e site centric. A primeira proporciona dados precisos e quantificáveis de todos os usuários que visitam um site através, por exemplo, dos cookies. A segunda permite obter informações qualitativas e detalhes sobre o comportamento dos usuários.
Apesar do apoio das ferramentas mencionadas, existem diversas razões pelas quais um projeto de TI pode fracassar. Susan Weinschenk, especialista em experiência de usuário e autora do livro: 100 Things Every Designer Needs to Know About People (em tradução livre: 100 coisas que todo designer precisa saber sobre as pessoas): requisitos mal definidos, comunicação deficiente entre os clientes, desenvolvedores e usuários, objetivos pouco realistas do projeto, avaliação incorreta dos recursos necessários ou uso de tecnologias imaturas.