A presentation regarding the Human-Computer Interaction (2015): Visual Design. Information Architecture. Design Patterns.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2015 (6/10) Design Patterns: Social InteractionSabin Buraga
A presentation regarding the Human-Computer Interaction (2015): Design Patterns: Social Interaction.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
A presentation regarding the Human-Computer Interaction (2015): Human Factor. Users.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
A presentation regarding the Human-Computer Interaction (2015): Design Methodologies.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2015 (8/10) Data Visualization (an introduction)Sabin Buraga
A presentation regarding the Human-Computer Interaction (2015): Data Visualization (an introduction).
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2014 (4 of 10): From Information Architecture to Design PatternsSabin Buraga
Several details regarding visual design, Information Architecture (IA), and HCI design patterns. Addition resources at http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (5/10) Information Architecture. From Design Patterns to FlowSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (8/10) An Introduction to Data Visualization. Design, processes, tec...Sabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (6/10) Design Patterns for Social (Web/mobile) InteractionsSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2015 (6/10) Design Patterns: Social InteractionSabin Buraga
A presentation regarding the Human-Computer Interaction (2015): Design Patterns: Social Interaction.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
A presentation regarding the Human-Computer Interaction (2015): Human Factor. Users.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
A presentation regarding the Human-Computer Interaction (2015): Design Methodologies.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2015 (8/10) Data Visualization (an introduction)Sabin Buraga
A presentation regarding the Human-Computer Interaction (2015): Data Visualization (an introduction).
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2014 (4 of 10): From Information Architecture to Design PatternsSabin Buraga
Several details regarding visual design, Information Architecture (IA), and HCI design patterns. Addition resources at http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (5/10) Information Architecture. From Design Patterns to FlowSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (8/10) An Introduction to Data Visualization. Design, processes, tec...Sabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (6/10) Design Patterns for Social (Web/mobile) InteractionsSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual DesignSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (10/10) Natural User Interfaces. Ubiquitous ComputingSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (2/10) Human Factor. From interaction idioms to human capacities & c...Sabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
A presentation regarding the Human-Computer Interaction (2015): HCI Engineering. UI Evaluation. Models.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
General aspects regarding human-computer interaction, including key concepts and main directions of research. For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (8 of 10): Data VisualizationSabin Buraga
An introduction to data visualization: definitions, classification, methods, examples. See also http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (9/10) Affective Factors. From Emotion to Persuasive TechnologiesSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI: Design Patterns for Social Web InteractionSabin Buraga
A presentation about social (Web) interaction in the context of HCI (Human-Computer Interaction), with a focus on specific design patterns & several case studies.
For more details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (2 of 10): Human Factor. UsersSabin Buraga
Human capacities, cognition, modeling users, empirical laws, personas. For other details, see http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (6 of 10): Social (Web) InteractionsSabin Buraga
Important aspect regarding design patterns for social interactions. For additional info, consult http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous ComputingSabin Buraga
Key concepts about sensorial experience, natural user interfaces, multimodal interaction, and ubiquitous computing. See also http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
Model-based user interaction in the context of software engineering. Other aspects of interest at http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
A presentation regarding the Human-Computer Interaction (2015): Affective Factors.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
Inspired by science fiction movies such as Star Wars, two FinnishInspired by science fiction movies such as Star Wars, two Finnish virtual reality researchers created the Fog Screen to recreate some virtual reality researchers created the Fog Screen to recreate some of the effects from these movies in real life.of the effects from these movies in real life. Fog Screen is an exciting new projection technology that allows toFog Screen is an exciting new projection technology that allows to project images and video onto a screen of dry fog, creating the project images and video onto a screen of dry fog, creating the illusion that the images are floating in mid air.illusion that the images are floating in mid air. The Fog Screen is an innovative display technology that allows forThe Fog Screen is an innovative display technology that allows for projections on a thin layer of dry fog.projections on a thin layer of dry fog.
HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual DesignSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (10/10) Natural User Interfaces. Ubiquitous ComputingSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (2/10) Human Factor. From interaction idioms to human capacities & c...Sabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
A presentation regarding the Human-Computer Interaction (2015): HCI Engineering. UI Evaluation. Models.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
General aspects regarding human-computer interaction, including key concepts and main directions of research. For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (8 of 10): Data VisualizationSabin Buraga
An introduction to data visualization: definitions, classification, methods, examples. See also http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (9/10) Affective Factors. From Emotion to Persuasive TechnologiesSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI: Design Patterns for Social Web InteractionSabin Buraga
A presentation about social (Web) interaction in the context of HCI (Human-Computer Interaction), with a focus on specific design patterns & several case studies.
For more details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (2 of 10): Human Factor. UsersSabin Buraga
Human capacities, cognition, modeling users, empirical laws, personas. For other details, see http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (6 of 10): Social (Web) InteractionsSabin Buraga
Important aspect regarding design patterns for social interactions. For additional info, consult http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2014 (10 of 10): Natural User Interfaces. Ubiquitous ComputingSabin Buraga
Key concepts about sensorial experience, natural user interfaces, multimodal interaction, and ubiquitous computing. See also http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
Model-based user interaction in the context of software engineering. Other aspects of interest at http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
A presentation regarding the Human-Computer Interaction (2015): Affective Factors.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
Inspired by science fiction movies such as Star Wars, two FinnishInspired by science fiction movies such as Star Wars, two Finnish virtual reality researchers created the Fog Screen to recreate some virtual reality researchers created the Fog Screen to recreate some of the effects from these movies in real life.of the effects from these movies in real life. Fog Screen is an exciting new projection technology that allows toFog Screen is an exciting new projection technology that allows to project images and video onto a screen of dry fog, creating the project images and video onto a screen of dry fog, creating the illusion that the images are floating in mid air.illusion that the images are floating in mid air. The Fog Screen is an innovative display technology that allows forThe Fog Screen is an innovative display technology that allows for projections on a thin layer of dry fog.projections on a thin layer of dry fog.
E-paper is a revolutionary material that can be used to make next generation electronic displays. It is portable reusable storage and display medium that look like paper but can be repeatedly written one thousands of times. These displays make the beginning of a new area for battery power information applications such as cell phones, pagers, watches and hand-held computers etc.
Like traditional paper, E-paper must be lightweight, flexible, glare free and low cost. Research found that in just few years this technology could replace paper in many situations and leading us ink a truly paperless world.
A presentation regarding the Human-Computer Interaction (2015): Information Architecture. Design Patterns. Layout, Actions, Data Editing
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2015 (10/10) Natural User Interfaces. Ubiquitous ComputingSabin Buraga
A presentation regarding the Human-Computer Interaction (2015): Natural User Interfaces. Ubiquitous Computing.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
Web Technologies (3/12): Web Programming – Web Application Architecture. Web ...Sabin Buraga
A presentation from the lectures regarding Web Technologies, a discipline taught by Dr. Sabin Buraga at the Faculty of Computer Science, UAIC, Romania: https://profs.info.uaic.ro/~busaco/teach/courses/web/
The Good the Bad and the Ugly of Dealing with Smelly Code (ITAKE Unconference)Radu Marinescu
We all have a burning desire to write clean code. Every morning we wake up, look in the mirror, and promise ourselves that today we will follow the principles and best practices learned from Uncle Bob and his disciples. But we live in a cruel environment, surrounded by millions of smelly lines of code, reflections of a stinky design… and these constantly challenge our pure-hearted desire for writing clean code.
In such an environment, the stubbornness to practice daily the writing of clean code is vital.
But is it enough? Can we avoid getting lost in a sea of smelly code and design?
In this talk I will try to persuade you that, in dealing with large-scale systems, craftsmanship must be supported by proper techniques and tools that can help us to quickly understand, assess and improve the sea of smelly design that surrounds us.
I will present a pragmatic approach on how design anti-patterns (e.g. God Class, Feature Envy, Refused Bequest, Shotgun Surgery) can be automatically detected using a set of metrics-based detection rules, by analyzing the history of the system, and by using intriguing software visualizations.
The presentation will also include a live demo of tools that can automate the entire approach to a high-extent. These tools are so robust that they can deal with systems of several million lines of code; but they are also friendly enough to provide you with customized hints that help you deal with each and every case of an “unclean” code.
Web Technologies (9/12): Web Services. From Service-Oriented Architectures to...Sabin Buraga
A presentation from the lectures regarding Web Technologies, a discipline taught by Dr. Sabin Buraga at the Faculty of Computer Science, UAIC, Romania: https://profs.info.uaic.ro/~busaco/teach/courses/web/
Descriptions of UX Design projects and the design thinking behind them. The foundational work includes personas, task analysis, user stories, user goals, and problem statements. Later steps include wireframing, mockups and prototypes constructed in tools like Axure, Balsamiq, Sketch. or Figma. User Research and Usability test reports appear in several projects.
Web 2020 01/12: World Wide Web – aspecte arhitecturaleSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object ModelSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 09/12: Servicii Web. Paradigma RESTSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţialeSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
STAW 08/12: Programare Web. Suita de tehnologii HTML5Sabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
1. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Human-Computer Interaction
from information architecture
to design patterns
2. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“I’ve been amazed at how often those outside
the discipline of design assume that
what designers do is decoration.
Good design is problem solving.”
Jeff Veen
3. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI designvisual design
4. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI designvisual design
visualization = graphical representation of data/concepts
Ware, 2004
5. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
layout
grid
visual flow
typography
color, shape, texture
6. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
layout
where & how content and interaction controls are placed
http://alistapart.com/topic/layout-grids
7. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
grid
gives a coherent structure of information
www.thegridsystem.org
8. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
visual flow
refers to methods of understanding and/or interacting
with presented data
9. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
discussion
10. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
typography
presents the textual content via fonts
conforming to certain presentation rules
http://webtypography.net/toc/
11. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
color, shape, texture
most important visual dimensions
used for a proper perception of information
12. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
color semantics
syntax highlighting
color-pick control
13. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Form versus function
for the majority of users,
the look & feel is more important than functionality
remember UX?
14. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Common mistakes
lack of organization (structure)
visual interference
complexity
excessive details
lack of adaptability
16. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Strategies
visual focus
consistency
modularity
adaptability
responsive (Web) design
Visual design
next lecture
17. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
To properly present information,
visual dimensions are used
18. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
To properly present information,
visual dimensions are used
19. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Different perceptions
regarding a certain visual dimension
20. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Different perceptions
regarding a certain visual dimension
insignificant differences must be eliminated
simplicity
21. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished via
visual variables (Jacques Bertin, 1989)
22. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished via
visual variables (Jacques Bertin, 1989)
do not require additional cognitive processing
23. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished via
visual variables (Jacques Bertin, 1989)
communication
data codification
indicating differences between UI elements
24. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Example: showing the temperature
any visual variable could be used
color (hue), position relative to a scale,
length of thermometer, using an icon (shape),…
25. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual variables have different levels of perception
>100 levels – hue and value
~10 levels – size
~4 levels – orientation
26. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Some visual variables could not be easily recognized
27. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all letters placed in the right
28. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all letters placed in the right
we must perceive only the position
29. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all green letters
30. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all green letters
we are using hue as a visual variable
31. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all N letters
32. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all N letters (shape)
interferences: multiple visual variables
33. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Perception could be associative
associative visual variables:
position, hue, texture, shape, orientation
34. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Perception could be associative
non-associative visual variables:
size, value
35. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Perception could be associative
non-associative visual variables:
size, value
example:
the color of small objects is difficult to be perceived
36. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Modularity (grouping) could be achieved by considering
the Gelstalt principles of perception
using visual perception, the mind creates
the entire picture (Gelstalt) from existing fragments
37. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
various examples: http://tinyurl.com/y6ao7k
38. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
39. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity
A certain structure and presentation manner
for the information in order to be easily
perceived and consumed by users
40. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Solution
IA – Information Architecture
41. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Software applications are organized by using
lists of objects
sequences of actions
lists of categories (topics) of interest
lists of software tools/components
42. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of objects
denoted by substantives
examples:
operating system updates, e-mails,
shared pictures, locations of interest,…
43. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of objects
denoted by substantives
ideally, the application could
recommend interesting items
for each user
44. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequences of actions
specified by verbs
e.g., browse, buy, register, sell, subscribe,…
45. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequences of actions
specified by verbs
e.g., browse, buy, register, sell, subscribe,…
software could suggest certain actions to be selected
by the users, conforming to their profiles
46. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
47. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantive
object–action versus action–object
48. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantive
object–action versus action–object
it is recommended to use
the substantive-verb style of interaction
Raskin, 2000
49. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantive
object–action versus action–object
verb-substantive style could be useful for toolboxes
why?
50. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of categories (topics) of interest
context: information-centric applications
examples:
science, technologies, entertainment, etc.
51. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
52. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of software tools/components
useful for task-oriented applications
e.g., calendar, text editor, resource manager,…
53. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
nature and domain of the software application
54. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
background knowledge of the target users
55. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
context of interaction
56. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
How information could be organized?
57. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Linear presentation
usually, different sorting criteria are applied:
alphabetical, spatial, temporal, significance,…
58. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
59. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
60. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Bidimensional presentation
2 criteria/dimensions of interest are considered
examples:
geographical location + time
61. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Bidimensional presentation
a common use:
grid-based visualization of data
62. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
63. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Hierarchical presentation
tree-like structures having one or more levels
used to show certain relations between things:
parent–child, grouping, etc.
64. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
65. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
66. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Context-based presentation
space
time
user profile
67. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Context-based presentation
space
time
user profile
examples:
maps, charts, timelines, recommended information,…
68. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
69. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
70. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Complex presentation
could use a combination of previous solutions
71. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
3D visualization of the DOM – Mozilla Firefox
contributor: Victor Porof, Tilt project (2011—2012)
72. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Traditionally, the presentation of data will employ
regions: windows, pages
+
interaction elements: UI controls
73. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
organizing information
74. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Design patterns
recurring solutions that solve common design problems
75. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Design patterns
recurring solutions that solve common design problems
J. Tidwell, Designing Interfaces, O’Reilly, 2005
Ecaterina Moraru, Interaction Design Patterns, 2011
http://profs.info.uaic.ro/~evalica/patterns/
76. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Two-panel selector
Jenifer Tidwell, 2005
used to show selectable interactive elements
for each selected element,
certain details or its content could be presented
77. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
h5ai – a beautified Apache index based on HTML5
http://larsjung.de/h5ai/
78. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Two-panel selector
useful for presentation of lists:
resources
categories
actions
…
79. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Two-panel selector
decreases the interaction effort: e.g., mouse manipulation
reduces the cognitive load
facilitates exploration
80. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
81. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Canvas + palette
Jenifer Tidwell, 2005
offers a palette (toolbox) containing objects/actions
used in conjunction to a workplace (canvas)
82. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
MacPaint (1984)
versus
Photoshop (now)
83. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Canvas + palette
used by visual editing applications to create objects
and to arrange them within a virtual space
84. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Canvas + palette
the palette facilitates visual recognition via icons
(sometimes, grouped by categories)
for interaction,
selections or drag & drop could be adopted
85. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
One-window drilldown
Jenifer Tidwell, 2005
presenting information by using a single window only
86. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
87. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
One-window drilldown
useful for depicting the content on reduced-size screens:
mobile device, TV, appliance, etc.
see also A. Dawson, “The Science Behind a Single Page Website”
http://sixrevisions.com/web_design/the-science-behind-a-single-page-website/
88. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Alternative views
Jenifer Tidwell, 2005
user has the possibility to choose alternative views
these presentations are structurally different,
not just visually
89. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
90. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Alternative views
accommodate certain user preferences or goals
regarding a given context of interaction
91. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Wizard
instructs user to execute step-by-step actions,
conforming to a predefined scenario
“don’t make me think, just tell me what to do next”
92. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
93. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Wizard
must provide:
an accurate (logical) sequence of tasks
+
a suitable structure of presented information
94. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Extras on demand
Jenifer Tidwell, 2005
presenting main information only, “hiding” the details
95. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
96. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Extras on demand
make sure the entrance to and exit from
the “extras” window/page are obvious
97. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Multi-level help
Jenifer Tidwell, 2005
using multiple help methods,
directly located in the user interface
98. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
99. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
design patterns: exploration
100. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Locating objects in the user proximity
signposts
window/page title
logo
selection signage
…
101. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Help users to find the way towards their goal
wayfinding
good signage
environmental clues
maps
102. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
What signposts are used? There are wayfinding clues?
103. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Important aspect
minimizing distanceincreasing interface ergonomics
104. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Important aspect
minimizing distanceincreasing interface ergonomics
3-Click-Rule: users stop using the site if they aren’t able
to find the information or access the site features
within 3 mouse clicks
105. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Using UML diagrams – Tidwell (2005)
4 pages + 7 “jumps” (clicks)
106. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
the user makes 9 actions – being “lost in space”,
but the optimal number of steps (clicks) is 3
T. Tullis, B. Albert, Measuring the User Experience
(2nd Edition), Morgan Kaufmann, 2013
107. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
(Goals, Operators, Methods, and Selection rules)
Card et al., 1983; John & Kieras, 1996
to study the sequence of actions that must be performed
by users in order to accomplish their goal,
conforming to their abilities
http://web.eecs.umich.edu/~kieras/goms.html
108. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
offers a quantitative analysis
initially, keyboard-based interaction was considered
(keystroke-level model)
www.it.bton.ac.uk/staff/rng/teaching/notes/goms.html
109. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
K = 0.2 sec – Keying: time it takes to tap a key on the keyboard
P = 1.1 sec – Pointing: time it takes to point to a position on display
H = 0.4 sec – Homing: time it takes to move hand from
the keyboard to the interface or vice-versa
M = 1.35 sec – Mentally preparing: time to prepare for the next step
R – Responding: wait for a computer to respond to input
110. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
K = 0.2 sec – Keying: time it takes to tap a key on the keyboard
P = 1.1 sec – Pointing: time it takes to point to a position on display
H = 0.4 sec – Homing: time it takes to move hand from
the keyboard to the interface or vice-versa
M = 1.35 sec – Mentally preparing: time to prepare for the next step
R – Responding: wait for a computer to respond to input
the values could vary depending on the user abilities
111. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
case study (Raskin, 2000):
evaluating an interface
for converting Celsius Fahrenheit temperature
112. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
~5.4 sec.
~20.8 sec.
113. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
extensions:
NGOMSL – Natural GOMS Language
CMP-GOMS – Cognitive-Motor-Perceptual GOMS
http://cogtool.hcii.cs.cmu.edu/use-today/examples
114. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
without a quantitative guide,
we are only guessing at how well we are doing
and at how much room there is for improvement
Jef Raskin
115. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Global navigation
Jenifer Tidwell, 2005
assures the existence of navigational elements –
consistently positioned – to help users to access
the most important sections of the application/site
116. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Hub and spoke
Jenifer Tidwell, 2005
isolating application sections into independent
mini-applications/mini-sites,
that can be directly accessed via main window/page
117. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
hub & spoke: used mainly in mobile computing context
118. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Hub and spoke
like global navigation pattern, it could be used
to structure typical “paths” of the user thru the interface
also, assure scalability
119. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Pyramid
Jenifer Tidwell, 2005
a solution for hierarchical + sequential exploration
120. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Pyramid
could be used in conjunction to the one-window drilldown
121. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Modal panel
Jenifer Tidwell, 2005
showing only one page, with no other navigation options,
until the user solves the immediate problem
122. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
123. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
124. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Modal panel
interrupts the current task – it could break the state flow
anti-pattern
apply this design pattern sparingly
125. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
discussion
Brazil (1985) – director: Terry Gilliam
www.imdb.com/title/tt0088846/
126. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
an error message is really helpful?
bad file number
segmentation fault: core dumped
broken pipe
404 not found
fatal error 312: aborting
literal 13 could not be allocated
internal error: object container empty
error exit delayed from previous errors
discussion
127. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
128. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
error messages must not confuse users
discussion
129. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
the tone of an error message must inspire confidence
an unknown error occurred
discussion
130. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
avoid patronizing and arrogant attitudes
Cannot delete Document: Access is denied!
versus
This file is protected and cannot be
deleted without specific permission.
discussion
131. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
abort end, cancel, stop
available ready
boot start, run
error
execute complete
hit press, depress
invalid not correct/good/valid
kill end, cancel
output report, list, display
terminate end, exit
discussion
132. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
don’t make user to feel guilty
(users are more important than code)
discussion
133. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error message positive feedback message
discussion
for creative examples,
visit http://fab404.com/
134. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Breadcrumbs
Jenifer Tidwell, 2005
give users an alternative method of navigation
types:
path
location
attribute
135. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
136. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Breadcrumbs
revealing useful clues about the site/application’s
information architecture
this pattern does not provide information
regarding the next possible – if any – step
137. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequence map
Jenifer Tidwell, 2005
indicates a sequence of actions
+
the current step
138. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequence map
it can be used in conjunction to wizard
if the navigational topology is large & hierarchical,
it could be substituted by breadcrumbs
139. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Color-coded sections
Jenifer Tidwell, 2005
facilitates the recognition of a certain place
within a site/application
140. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Color-coded sections
alternatively, other visual variables – e.g., shapes,
textures,… – could be used to convey
the differences/meanings between various UI regions
141. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Escape hatch
Jenifer Tidwell, 2005
provides means for “escaping”
from a place having limited navigational options
142. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Escape hatch
helps people feel like they can safely explore
an application
when navigation assumes the execution of an action,
an alternative is the undo design pattern
143. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
144. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusion”
visual design, IA, HCI design patterns
145. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lecture:
from design patterns to flow