Human-Computer Interaction Chapter 2: Specific HCI Guidelines — Transcript

Full transcript

1. 0:07hello everyone and welcome to human
2. 0:09computer interaction
3. 0:10chapter 2 course so for this chapter
4. 0:14we will be discussing about the specific
5. 0:17get
6. 0:17fair guidelines or what are the
7. 0:20different
8. 0:20guidelines that we need to consider in
9. 0:23order for us to develop
10. 0:25a really good software a really good
11. 0:27system
12. 0:28okay so specific it's
13. 0:31ci data it starts with our first
14. 0:38guideline okay so
15. 0:41the criteria or categories for each
16. 0:43guidelines
17. 0:44first criteria is the user type as for
18. 0:47the user type
19. 0:48its main categories it involves the
20. 0:52age or generation the disability
21. 0:55or accessibility the gender the consumer
22. 0:58group
23. 0:59the occupation the culture in the
24. 1:02country
25. 1:03so when developing a system
26. 1:06you must consider who will gonna use
27. 1:09your system
28. 1:10what is the user type or who are the
29. 1:13users
30. 1:14okay so for example if your system is
31. 1:17for the kids
32. 1:18the elders the visually challenged or
33. 1:21the baby boomers
34. 1:23this is it for the students is it for
35. 1:26the parent
36. 1:27is it for the institutions is it for the
37. 1:29assets
38. 1:30or etc so it's very important that when
39. 1:34you decide to create a system
40. 1:36you must identify
41. 1:39the user type or who will gonna use your
42. 1:42system okay so that's
43. 1:46that is our first guideline know the
44. 1:49user type
45. 1:50know the um the user we're going to use
46. 1:54your application
47. 1:55okay next criteria
48. 1:58is okay let me
49. 2:03yeah next criteria
50. 2:06is the platform or system setup
51. 2:09after knowing who will get a user system
52. 2:12you must know
53. 2:14what which platform or what would be the
54. 2:17set of your system okay so it categories
55. 2:21involved would it be um
56. 2:24mobile or handheld would it be a
57. 2:27desktop application or would it be a
58. 2:30large
59. 2:31display of virtual reality would it be
60. 2:34embedded
61. 2:34or public installation or operating
62. 2:36system or network
63. 2:38so you must identify the setup of your
64. 2:40system
65. 2:41okay so examples for that would be
66. 2:44smartphones pod like device desktop
67. 2:48kiosk embedded os cloud-based
68. 2:51navigation systems personal game players
69. 2:54qr assistants and etc so this is very
70. 2:58important that you should
71. 2:59know what would be the system of your
72. 3:01system okay before
73. 3:03creating a really good hci design okay
74. 3:07and next for that next criteria
75. 3:11the vendors or the organizations
76. 3:14okay so the main categories involved is
77. 3:17it in the private
78. 3:19public or design style or identity
79. 3:22so um examples for that would be nasa
80. 3:26or korea university is it for the
81. 3:28android is it for the usdp
82. 3:30is it in ios windows so you must know
83. 3:33the organization
84. 3:34you must know the vendors right that's
85. 3:37one of the most important thing also
86. 3:39before
87. 3:40creating a good system okay
88. 3:43again first that we need to consider is
89. 3:45the user type
90. 3:47next is let me go back again the user
91. 3:51type
92. 3:52the platform or the system set up
93. 3:56and the third is the vendor's
94. 3:58organization
95. 3:59and the fourth one is the interface
96. 4:02style
97. 4:03okay the modality the technology
98. 4:07is it is it a web
99. 4:10will it involve windows icons we use
100. 4:13printers
101. 4:14or none web or is it in
102. 4:183d or multimodal
103. 4:21so it's kind of very very important also
104. 4:24to consider
105. 4:25that we need to know the interface style
106. 4:29okay so the interface style the modality
107. 4:31and the technology
108. 4:32examples for that would be voice or oral
109. 4:36the your application of this voice
110. 4:40features voice command features the
111. 4:42gestures
112. 4:43using is it single or multi-touch
113. 4:47tactile or haptic multimodal
114. 4:50menu driven goalie very visible widgets
115. 4:54visual perceptions and etc so it's very
116. 4:57important also
117. 4:58that when designing a really good svi
118. 5:02you must know the interface style okay
119. 5:07let's move on with the next criteria the
120. 5:09task or operational context
121. 5:12so again in the previous
122. 5:15presentation i have discussed that when
123. 5:17creating a system you must
124. 5:19identify the different jobs or the
125. 5:22different tasks or what are the
126. 5:24different
127. 5:24features that your system will going to
128. 5:27do
129. 5:28how it will going to solve the problem
130. 5:30okay so
131. 5:31for for the task or the operational
132. 5:33context
133. 5:34the main categories involve the location
134. 5:36or the pace
135. 5:38the time the noise lighting
136. 5:41readily constraint okay for example that
137. 5:44would be
138. 5:45office outdoor road or street
139. 5:49home auto mobile subway is it for the
140. 5:52classroom
141. 5:53is it ice ice free hands-free
142. 5:57handedness and etc so it's kind of very
143. 6:00important that we should and
144. 6:01identify all the tasks all the jobs that
145. 6:04your
146. 6:05system we're going to do okay
147. 6:09next next criteria application
148. 6:15what kind of application will that be is
149. 6:17it is it pretty gamey
150. 6:19is it a game application is it a media
151. 6:22or
152. 6:23information is it an electronic
153. 6:26e-commerce
154. 6:27or is it for the design or editing
155. 6:30is it a social network service so
156. 6:34um you need to identify what kind of
157. 6:36application will
158. 6:37that will gonna solve a problem okay
159. 6:40so i think this is the last
160. 6:44okay now this is
161. 6:48uh second to the left okay so after
162. 6:51knowing the application
163. 6:52you must know this next criteria
164. 6:56the general let's say design so in
165. 6:58general let's
166. 6:59say i design it just involved the
167. 7:01display layout
168. 7:02the information structure and navigation
169. 7:05the soliciting input
170. 7:08and as for the soliciting input
171. 7:11it's just the application
172. 7:14forms where it gets the
173. 7:18details of the user to assume he'll
174. 7:20observe all applications of forms
175. 7:23for you to fill out and yeah for you to
176. 7:27send your details
177. 7:28and the information or out of
178. 7:30visualization
179. 7:31very important the design process and
180. 7:34practices
181. 7:35the user experience okay was it
182. 7:39good was it nice and then the general
183. 7:43aesthetics
184. 7:45okay so that is the main stage of the
185. 7:48general hsa design so those were the
186. 7:52different categories
187. 7:54and the different um
188. 7:57categories when creating you know a
189. 8:00really good interface
190. 8:02so if there are things that is not
191. 8:05really clear to you
192. 8:06you may go back you may replay the video
193. 8:09and then just
194. 8:10watch it again okay the next topic
195. 8:13is the examples of hsi guidelines so
196. 8:16what are
197. 8:17the different examples okay as for the
198. 8:20visually
199. 8:21display layout the display layout should
200. 8:24be such
201. 8:26that it is organized according to the
202. 8:28information conduct
203. 8:30okay um example important
204. 8:34frequency functionality
205. 8:37is size manageably okay
206. 8:40it is divided into proper section
207. 8:44okay and is attention grabbing and is
208. 8:47visually pleasing
209. 8:49is it nice for the for the eye
210. 8:52is it does it have a really good
211. 8:55interface
212. 8:57this is um our everything
213. 9:00is aligned and with restricted use of
214. 9:03colors
215. 9:04let's say baja go because in colors
216. 9:08okay so in a visual display layout the
217. 9:11guidelines for that would be
218. 9:13avoid flatter displays
219. 9:16okay imagine yourself as a user browsing
220. 9:20this
221. 9:21system and then there are clutter
222. 9:23displays
223. 9:24what how would you feel okay so you
224. 9:27might end up
225. 9:28closing the application if there are
226. 9:30some father displays or
227. 9:32there are this place that you don't
228. 9:34really like okay
229. 9:36and place important items consistently
230. 9:40okay and then place important items at
231. 9:43the top center
232. 9:44okay for example what is the most
233. 9:46important item
234. 9:49um navigation okay where are you
235. 9:52going to put the navigation it should be
236. 9:55at the top center wherein the user can
237. 9:57easily
238. 9:58click it you can easily navigate to it
239. 10:02okay structure for easy comparison
240. 10:07established level of importance
241. 10:10so what are this section
242. 10:15it is planning a section next section of
243. 10:18what index section
244. 10:19next section so so you must have
245. 10:23established the level of importance
246. 10:26and then optimize display density
247. 10:31align items on the page
248. 10:39you set appropriate page length hold
249. 10:43your your page one page should that be
250. 10:46too long
251. 10:49the user gonna work you know if there
252. 10:52are too much information
253. 10:54is seen in your home page okay
254. 10:58and then use frames when functions must
255. 11:01remain accessible
256. 11:02so as you can see we have this example
257. 11:05here
258. 11:06the navigation is at the right corner
259. 11:09okay the items are you know are
260. 11:12displayed appropriately so the alignment
261. 11:15is good
262. 11:16the color is this goes good so it should
263. 11:20be
264. 11:20pleasing it should be visually pleasing
265. 11:23okay
266. 11:25next information structuring
267. 11:29navigation this is very important all
268. 11:31system
269. 11:32as you may have noticed there are
270. 11:34navigation because it would be very hard
271. 11:36for the user
272. 11:37to you know access the pages if there is
273. 11:40no
274. 11:41navigation from being used in your
275. 11:44system so as you can see we have this
276. 11:46example
277. 11:47okay if the user wants to
278. 11:51check the different compasses just going
279. 11:54to
280. 11:55click here and then if the user wants to
281. 11:59contact you know contact the
282. 12:01administrator
283. 12:02you can actually go to the contact us or
284. 12:05check the different faculty and stuff
285. 12:07and etc
286. 12:08so this example it has
287. 12:11your system must be properly structured
288. 12:15and the user must easily was able to
289. 12:18navigate
290. 12:18to your system okay that's very
291. 12:21important there should be
292. 12:23structuring and navigation
293. 12:26next taking user input okay
294. 12:30as uh this is one of the most important
295. 12:32thing because
296. 12:34it would be um
297. 12:38wait
298. 12:41okay it would be you know
299. 12:44let's say pulos if if
300. 12:47the system now comes
301. 12:52user so as you may have seen
302. 12:56that the clever designs for taking user
303. 12:59input
304. 12:59or raw information resistant commands
305. 13:01can improve
306. 13:02the overall performance in terms of
307. 13:06both time and accuracy for highly
308. 13:09interactive system
309. 13:11okay so of course as you may have
310. 13:14noticed that when you use the system
311. 13:19you need to create an account so there's
312. 13:21a form
313. 13:22that you need to fill out and then
314. 13:25there's a login page where you need to
315. 13:28enter your username and password
316. 13:30there's a photo and etc okay so what are
317. 13:33the
318. 13:34guidelines when you take user inputs
319. 13:37first consistency of data entry
320. 13:40transactions
321. 13:42minimal input action per user of course
322. 13:45we don't like na
323. 13:46they can cut your if you're out right
324. 13:50and they can get a hat on so
325. 13:53minimal memory load on users and also
326. 13:56compatibility of data entry
327. 13:58with data display and clear
328. 14:02and effective leveling of buttons and
329. 14:04data entry fields
330. 14:05okay it should be properly
331. 14:10you know listed if it is for the first
332. 14:12name
333. 14:13last name or email address something
334. 14:16like that
335. 14:17then match and place the segments of
336. 14:20data entry and selection fields in
337. 14:22natural scanning
338. 14:23and hand moving directions and do not
339. 14:26play semantically opposing entry or
340. 14:28selection options close together as for
341. 14:32example um you you put
342. 14:35the display button then the undo
343. 14:39button so the user usually uses
344. 14:46netflix is undo so and do
345. 14:49something like that so it should be
346. 14:51properly
347. 14:52um put together okay design and form and
348. 14:57dialog boxes
349. 14:58so there should be some design that is
350. 15:00really good and facing for the eye
351. 15:02just fine like a design design
352. 15:05as you can see in here the form has you
353. 15:08know
354. 15:09place folder and name email address
355. 15:12and so the buttons are properly laid out
356. 15:15okay
357. 15:17so that is um
358. 15:20when you take user input that is for the
359. 15:22form
360. 15:24next
361. 15:31okay users with disability
362. 15:34we use our text this is a user type okay
363. 15:37so when developing system when creating
364. 15:39a system it should be
365. 15:41you know there should be options
366. 15:44where in users with a valid disability
367. 15:47can
368. 15:48actually help there are some features
369. 15:52that we can actually use okay
370. 15:55so the guidelines for that would be it
371. 15:57should be receivable
372. 16:00meaning it provides text alternatives
373. 16:02for non-text content
374. 16:05okay provide captions and other
375. 16:07alternatives for multimedia
376. 16:11as you can see um youtube now has
377. 16:14captions right okay you create content
378. 16:17that can present it in different ways
379. 16:20including by assistive technologies
380. 16:22without losing meaning you make it
381. 16:25easier for users to see
382. 16:27and hear content so it should be
383. 16:29perceived upon
384. 16:31and next is operable when you say a
385. 16:34variable
386. 16:34you make all functionality available
387. 16:37from a keyboard
388. 16:38so it's not really good is that when you
389. 16:41develop
390. 16:42like a system um
391. 16:44[Music]
392. 16:47apart board okay
393. 16:51so for for copy and paste ctrl
394. 16:54c and ctrl v
395. 16:57okay and give users enough time to read
396. 17:00and use content
397. 17:02do not use content that consists of
398. 17:04feeds or
399. 17:06help users navigate and find content
400. 17:10so there should be
401. 17:12[Music]
402. 17:13something like something like a feature
403. 17:16that we're gonna help the user
404. 17:18and next understand the bonds
405. 17:22okay it must be user friendly it must be
406. 17:25quick and easy
407. 17:26make text readable and understandable
408. 17:30okay so the font sizes must not be
409. 17:34too much small it must not be too much
410. 17:37large
411. 17:38must be readable and understandable
412. 17:42make content appear and
413. 17:45operate in predictable ways help users
414. 17:48avoid increased mistakes
415. 17:51okay and lastly for the users with
416. 17:54disability it must be robust
417. 17:57you maximize with current
418. 18:01recurrent and features user tools
419. 18:04okay so there are a lot of tools that
420. 18:07you
421. 18:08can actually use
422. 18:12we have this example uh if we have this
423. 18:15example in here
424. 18:16as you can see this um this
425. 18:20website has this option this option is
426. 18:23for the visually challenged users
427. 18:26where in the user can actually change
428. 18:29the colors of the background
429. 18:31and the foreground foreground so there
430. 18:33should be
431. 18:34some um some features like this
432. 18:38okay next
433. 18:42is the mobile device so assume we have
434. 18:46notices you may have seen in all
435. 18:48applications
436. 18:50that where that is a web
437. 18:53or mobile applications they're all
438. 18:55mobile friendly
439. 18:56not everything or sys
440. 18:59the system can now be used through
441. 19:03uh using mobile phones okay as for
442. 19:06our guidelines for that it should be
443. 19:09fast status information
444. 19:11minimize typing and leverage on varied
445. 19:14input hardware
446. 19:16examples photons touch
447. 19:19voice handwriting recognition
448. 19:22um virtual cable and a chat account
449. 19:26and then you first task focus
450. 19:30for this confusion in a highly dense
451. 19:33information space
452. 19:34large hit target for easy and correct
453. 19:37selection
454. 19:38and manipulation and efficient use of
455. 19:41screen space
456. 19:42with condensed information so as you can
457. 19:45see this
458. 19:46example also or i actually have noticed
459. 19:49on
460. 19:49when you actually use facebook
461. 19:52or messenger or instagram or twitter
462. 19:57i believe you you always use that now
463. 20:00every day and as you have noticed that
464. 20:03you can actually navigate everything in
465. 20:06in
466. 20:07real quick and easy okay so it should be
467. 20:10something like that they
468. 20:13[Music]
469. 20:15should be properly buttoned
470. 20:31next one of the most example
471. 20:36um best application that this everyone
472. 20:38is using today is
473. 20:39an e-commerce if you have an
474. 20:42online business so
475. 20:46i believe some of you have um have
476. 20:50an idea about what immediate cameras is
477. 20:52so so
478. 20:53you have been using lazada shoppies
479. 20:56and a lot more businesses actually today
480. 21:00are transforming into online so that's
481. 21:02an
482. 21:03e-camera okay
483. 21:06so if you want if naming idea
484. 21:10and you wanted to you know create
485. 21:13an e-commerce application to it and it's
486. 21:16your choice
487. 21:20okay so i believe you have learned
488. 21:23something
489. 21:23for the hsi guidelines and we are now on
490. 21:27our summary
491. 21:29okay wait
492. 21:32[Music]
493. 21:42okay let me go back here
494. 21:46okay this is the example of an
495. 21:47e-commerce
496. 21:49because i think now post on screen
497. 21:51sharing
498. 21:54okay let's move on with the summary
499. 21:58so while most of the guidelines specific
500. 22:01or general
501. 22:02seem quite straightforward and are easy
502. 22:04to understand
503. 22:06incorporating them in actual design and
504. 22:08implementation is very
505. 22:10difficult it is indeed really difficult
506. 22:14but if you have familiar as yourself
507. 22:16into it
508. 22:17it would be more easy for you okay and
509. 22:20many guidelines are still
510. 22:21at quite a high level similar to the
511. 22:24etsy principles
512. 22:26so if you don't know yet the different
513. 22:29hi principles then go back to our
514. 22:32previous video in the chapter one
515. 22:34the hr principles was discussed in there
516. 22:37okay
517. 22:38and leave the developer wondering how to
518. 22:40actually apply them in practice
519. 22:43another reason is that there is just too
520. 22:46many different
521. 22:46aspects to consider yes indeed
522. 22:49there are a lot of things that you need
523. 22:52to consider
524. 22:53especially for a large scale system
525. 22:56so sometimes the guidelines can even be
526. 22:59in conflict with each other
527. 23:01which requires prioritizing on the part
528. 23:04of
529. 23:04the designer okay and who is this
530. 23:08designer
531. 23:08it is you okay because you're the one
532. 23:11who are gonna
533. 23:12design your system for instance
534. 23:15it can be difficult to give contrast to
535. 23:17an item
536. 23:18for highlighting its importance when one
537. 23:21is restricted to using
538. 23:23certain colors okay example
539. 23:26for a corporate identity purpose another
540. 23:30example might be when attempting to
541. 23:32introduce a new
542. 23:33interface technology or attached
543. 23:36gestures
544. 23:37while the new interface may have been
545. 23:40proven
546. 23:41effective in the laboratory it still may
547. 23:44require significant
548. 23:45familiarizing and training on the part
549. 23:47of the user
550. 23:49it is often the case that external
551. 23:52constraints
552. 23:52such as monetary and human resource
553. 23:56restrict
554. 23:57sound hsci practice so there is no
555. 24:00straight answer to how such can facts
556. 24:03can be managed
557. 24:04and how to incorporate all the
558. 24:06requirements simultaneously
559. 24:09particularly under strength
560. 24:13strengthened external constraints
561. 24:18constrain under stringent external
562. 24:21constraints
563. 24:22one must realize that all designs
564. 24:25involves compromises and tradeoffs
565. 24:28experienced designers understand the
566. 24:30ultimate benefit and cost
567. 24:32of practicing sound hsa design
568. 24:35in spite of the acknowledge aspect of
569. 24:38block art
570. 24:39to hsi design in which good judgment
571. 24:43are made by experienced developers the
572. 24:46hsi guidelines still help greatly to
573. 24:48ensure
574. 24:48overall usability and performance
575. 24:52so it's very important that you must
576. 24:55understand
577. 24:56the different guidelines in order for
578. 24:59you to develop
579. 25:00in order for you to create a really good
580. 25:02hci
581. 25:03design so i hope you have understand
582. 25:07something you have learned
583. 25:08something for this video and i hope that
584. 25:12you
585. 25:12will familiarize yourself or yourself
586. 25:15with
587. 25:15the different hsi guidelines
588. 25:19so thank you so much and we'll proceed
589. 25:22with
590. 25:22the next chapters have a great day
591. 25:26and dressed so everyone