-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (84 loc) · 6.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--Check: Add relevant title-->
<title>Enhancing User Experience through Effective Transitions</title>
<!--Check: Add relevant css & js references-->
<!--Use / before urls to access the main repo files, like stylesheets and js-->
<!--This might break when hosted on a separate subdomain. Contact @rasagy or fix the relative url for all the css files-->
<link rel="stylesheet" href="/stylesheets/styles.css">
<link rel="stylesheet" href="/stylesheets/pygment_trac.css">
<script src="/javascripts/scale.fix.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<a id="home-link" href="/">
<header>
<!--Main header. Leave untouched-->
<h1 class="header">Information Design Lab</h1>
<p class="header">The digital presence of <nobr>Information Design Lab</nobr>, IDC, <nobr>IIT Bombay</nobr></p>
<!-- For a while, we don't need these button
<ul>
<li><a class="buttons github" href="https://github.com/info-design-lab">GitHub Profile</a></li>
</ul>
-->
</header></a>
<!--Main content goes here-->
<section>
<!--Check: -->
<a id="top" class="anchor" href="#top" aria-hidden="true"><span class="octicon octicon-link"></span></a>
<h2>Enhancing User Experience through Effective Transitions</h2>
<p>80 minute course held on 18<sup>th</sup> December, 2018 at <a href="https://indiahci.org/2018/">IndiaHCI 2018</a> at Srishti Institute of Art, Design and Technology.<br />Conducted by <a href="https://twitter.com/venkatrajam">Venkatesh Rajamanickam</a>, <a href="http://parsoyaarihant.github.io">Arihant Parsoya</a></p>
<a id="objective" class="anchor" href="#objective" aria-hidden="true"><span class="octicon octicon-link"></span></a>
<h3>Details</h3>
<p>
With dramatic improvements in display and processing abilities of computing devices, transitions in user interfaces (the visual changes on screen that take place during user interaction) have become an integral part of the user experience. However, most transitions use engaging animations or sophisticated motion graphics merely as a means to dazzle, impress or amaze users. We believe that transitions when employed correctly, can be powerful cognitive devices. They can help users form accurate mental models of complex information and task structures, navigate with ease, anticipate outcomes, and avoid errors. Drawing from time tested principles from the fields of animation, storytelling, and perception studies, this course will teach participants on how to employ good transitions to design effective user experiences.
</p>
<h3>Participants</h3>
<ul>
<li><b>Students</b> of interaction design who want to learn one of the fundamental aspects of designing good user experience.</li>
<li><b>Industrial</b> and academic researchers, who want to gain a new perspective on interface transitions, and be provoked to rethink the attitudes they currently have toward them.</li>
<li><b>Designers and developers</b>, who want to expand their repertoire of knowledge of how to improve user experiences in their practice.
</li>
</ul>
<h3>Content</h3>
<ol>
<li><b>Introduction to Transitions: </b> This section will provide brief background of how transitions are used as a means of communication in interfaces. We will discuss the fundamentals of transitions, such as Psychology of Motion Perception and Animation.</li>
<li><b>Elements of Transitions:</b> This section will present important factors which should be taken into consideration while designing a transition. The factors will be explained by reviewing experiments done in Psychology of Motion Perception.</li>
<li><b>Principles of Transition: </b> This section will describe how transitions can be used to convey meaning to the user. Several principles of transitions will be explained in detail. We also discuss different techniques to use the principles in practice.</li>
</ol>
<p><strong>Course Resources</strong><br/>
Presentation can be found <a href = "https://docs.google.com/presentation/d/1GnX78dlPiYfYIq6q4jgbQ2gWgB2t0SlZ8uTrDy04Z5M/edit?usp=sharing">here</a> as Google slides. <br>
Presentation summary document can be found <a href = "/transitions/Summary.pdf">here</a> <br>
Exercises which was used during the course can be found <a href = "/transitions/Exercises.pdf">here</a>.</p>
<!-- <a id="photos" class="anchor" href="#photos" aria-hidden="true"><span class="octicon octicon-link"></span></a>
<h3>Photos</h3>
<p>
<a href="Photos/Ethics-Workshop-3.jpg" target="_blank"><img src="Photos/Ethics-Workshop-3.jpg" alt="Ethics Workshop at IndiaHCI 2014" style="max-width:100%;"></a>
<a href="Photos/Ethics-Workshop-4.jpg" target="_blank"><img src="Photos/Ethics-Workshop-4.jpg" alt="Ethics Workshop at IndiaHCI 2014" style="max-width:100%;"></a>
<a href="Photos/Ethics-Workshop-2.jpg" target="_blank"><img src="Photos/Ethics-Workshop-2.jpg" alt="Ethics Workshop at IndiaHCI 2014" style="max-width:100%;"></a>
<a href="Photos/Ethics-workshop-Pano-Rasagy-1.jpg" target="_blank"><img src="Photos/Ethics-workshop-Pano-Rasagy-1.jpg" alt="Ethics Workshop at IndiaHCI 2014" style="max-width:100%;"></a>
</p>
<p>View more photos on the <a href="https://www.facebook.com/IndiaHCI">IndiaHCI Fb page</a>, or <a href="Photos/Ethics-Workshop-Photos.zip">Download zip archive</a> (<em>10 Photos, 3.8 MB</em>)</p>
<p>Photo Credits: <a href="https://www.facebook.com/IndiaHCI">IndiaHCI 2014 Documentation Team</a> & <a href="https://twitter.com/rasagy">Rasagy</a></p>
-->
<a id="contact" class="anchor" href="#contact" aria-hidden="false"><span class="octicon octicon-link"></span></a>
<h3>Contact</h3>
<p>
You can reach Prof. Venkatesh Rajamanickam <a href="mailto:venkatra@iitb.ac.in">via email</a>
</p>
</section>
<footer>
<!--Check: Update the footer link to the actual repo-->
<p><small>Powered by <a href="http://pages.github.com">GitHub</a> <a href="https://github.com/info-design-lab/ethics-in-design">Link to Github Repo</a></small></p>
</footer>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>