USER-CENTRED DESIGN
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</@>
If there is one area in which digitalisation is most noticeable, it is in the business world: artificial intelligence, machine learning, the Internet of Things and, above all, Big Data, which allows us to process data and turn it into useful information for companies. Knowing users' opinions has become fundamental for companies when it comes to developing their strategies, and this affects, for example, the way they design their digital products — devices, webs, applications, etc. —.
WHAT IS USER-CENTRED DESIGN (UCD). OBJECTIVES
For several decades, products and services were designed by companies without taking the users into account. In the '90s, however, this began to change, partly thanks to the efforts of US professor, and specialist in usability engineering, Donald Norman, who highlighted two aspects that changed the world of design: the usability of products and the advantages of incorporating the real needs and interests of the user.
Norman put the user at the heart of design for the first time, thereby giving birth to the user centric era. But what exactly is User-Centred Design (UCD)? The HubSpot software developer defines it as "a process of ongoing design in which designers focus on consumers and their needs, supported by a variety of research techniques to create highly usable and accessible products".
"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'
UCD has turned out to be fundamental when it comes to providing a better experience for the user and has assumed great importance for businesses in recent years. A report
External link, opens in new window. from the consultants McKinsey & Company links the financial results of 300 businesses with the importance they give internally to UCD, and goes on to say that companies should think about it in strategic terms, bearing in mind these four maxims: UCD is more than a feeling, it's more than a department, it's more than a phase, it's more than a product.
THE USER-CENTRED DESIGN (UCD) PROCESS
The User-Centred Design process involves several phases and these, with some variations depending on whether they are applied in the creation of a device, website or application, are valid for any digital product:
Research. Specify the context for the use
Identify the user characteristics, in other words the people who will use the product, what they will use it for, and under what conditions they will use it. This means that as well as the user, the task and the environment must be considered.
Concept. Specify the requirements
The aim is to arrive at desirable, achievable and viable solutions. This means studying users and determining a range of solutions, then starting to investigate which ones are technically achievable and how to make them financially viable.
Design. Create solutions
This part of the process goes from a rough concept to a complete design. From what has been learned, a lot of ideas will present themselves, opportunities will be identified, and solutions will be tested and perfected using prototypes.
Evaluation. Test
The sooner the design is shown to real users and their feedback is gained, the easier it is to come up with the best solution. Evaluation is as integral to UCD as quality testing is to software development.
Launch. Monitor the product
When a product is launched it needs monitoring to see if it has the desired impact. As well as looking at the qualitative indicators, it is also necessary to monitor the performance and get user feedback again.
USER-CENTRED DESIGN (UCD) TOOLS
As can be seen, UCD involves having a profound knowledge of the user. So this discipline goes hand in hand with a wide set of techniques and tools that make it possible to gather this information and achieve the best user experience or UX. In the digital sphere, this concept refers to the satisfaction that a consumer gets when dealing with a brand through the various points of contact with a company — websites, apps, bots, social media, etc. —.
SEE INFOGRAPHIC: The benefits of User-Centred Design (UCD) in a digital environment [PDF]
The main UCD methodology tools include: surveys, focus groups, usability tests, heuristic evaluations, eye tracking, web analytics, etc. User-centric and site-centric metrics are also important. The former provides precise and quantifiable data on all the users that visit a website, e.g. through the use of cookies. The latter makes is possible to obtain qualitative information, such as details about user behaviour.
Despite the help of these tools, there are a number of reasons why an IT project can fail. Susan Weinschenk, expert in user experience and author of the book Intelligent Design: 100 Things Every Designer Needs To Know About People lists the main ones: poor communication between customers, developers and users, unrealistic project targets, incorrect assessment of the necessary resources, and the use of immature technology.