PROBLEM
In this study, we explore the behavior of AI in cooperative gameplay (social games)–Pictionary, with an intention to understanding atypical activity (cheating).
SOLUTION
To test our hypothesis, we developed an online social game–Pictionary. Concurrent test sessions enabled us to collect data, leading to interesting findings.
IMPACT
I optimized the design to be fluidic adopting to diverse screen sizes leading to widespread adoption and optimized the code to support 100+ concurrent sessions.
KEY DECISIONS
The major decisions were of understanding the system (AI) complexity, helping me to implement relevant design principles for the same.
TOOLS USED
Human-AI Interaction
People use digital whiteboards to share ideas and brainstorm, human-AI interaction will improve this by removing aberrant activities (profanity, cheating), therefore, improving user experience.
Atypical behavior
text
No text
123
No numbers
No symbols
The above mentioned actions are classified as atypical behavior. Gameplay only allows the use of sketches.
Design Systems
The application did NOT have a dedicated design system to guide its future iterations.
AI Complexity
In order to design for an AI application the correct level of AI complexity was to be identified.
UI Design
The UI design was lacking in basic UI principles such form, hierarchy, scale and harmony.
Pictionary is a social game. But for the study it was restricted between two players. The drawer - person who sketches the prompted word, and the guesser - person who guesses the word based on the sketch.
Why Gamification?
Remote Gameplay
We used gamification to understand the difference in collaboration between human-human and human-AI.
Playing against the unknown
Gamification will help in understanding the behavior of users when they play against an AI-agent unknown.
“How to design to optimize for AI complexity and partially observable cooperative games?
“How to design to provide a delightful gaming experience, engaging players in a ‘flow state’?
Identified Complexity
Level 1
Current Complexity
Level 3
Evolving Complexity
Current level of complexity is at 1 but it may increase to level 3 once the database becomes dynamic.
Design Guidelines
System
Outputs
Fixed outputs - Hit, Miss,
False Alarm, Correct Rejection
System
Capability
Current database is fixed,
therefore probabilistic.
Re
Design
Level 1 is benefited by user testing and iterative design.
Design
Prototype
The prototype ensures the code is human-centric.
AI and Gamification
The broader impact is to make training datasets on atypical behavior (cheating, profanity) more accessible.
User behaviors
Turing Test!
The game encourages the players to guess whether they are playing against other players or AI agents. Which helps in identifying humanness of the agents.
Deviant Behaviors
The game also serves as a tool to identify the player’s tendency to behave atypically (writing words), testing the AI agent’s ability to identify the same.
User Profile
479
Participants
328
328 male and
98 female
388
388 right-handed
38 left-handed
19-60
Diverse age range
Jobs to be Done
1
Our users need a clean design implementation to make it easier for them to engage in the gameplay.
2
Our users did not know if they are playing against AI, therefore design implementation increasing transparency is imperative.
3
For optimal gameplay, the gameplay should be engaging - neither difficult nor simple helping our users in achieving ‘flow state’.
Goals
AI
Inclusion
Designing for AI ethics, ensuring user autonomy.
Responsive
UI
Diverse age group makes responsive design imperative.
Minimal
Design
WCAG guidelines ensures ease-of-access and accessibility.
Application
Development
The prototype was developed in a Django-based platform.
Navigation
The old design did not feature clear directions to the user for navigating through the website, as evident in the image shown above - there is no clear way to exit the ‘Terms and Conditions’ screen.
Color Palette
The initial design was using a lot of colors like - yellow, red, green, blue and many more, which made it confusing for our users, as they were unable to locate the CTA at times.
Legibility and Readability
It was difficult to establish hierarchy as the previous design was using a noisy background image, along with that the noisy background also made it difficult to locate the icons located at the top right corner of the screen.
Atoms
These atoms include basic HTML like forms, labels, inputs, buttons and others that cannot be broken down any further without ceasing to be functional.
Pencil
Button
NEXT
False Alarm
Molecules
UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
Pencil
Eraser
Highlighter
Guesser on right track
Guesser on wrong track
Correct
Organisms
Complex UI components composed of group and molecules and/or atoms and/or other organisms.
Templates
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
tower
tree
house
treehouse
Type your guess h...
Pages
Pages are specific instances of templates that show what a UI looks like with real representative content in place.
Primary
Used across all interactive elements such as CTA’s, links, active states.
#F8FAFC
50
#F1F5F9
100
#E2E8F0
200
#CBD5E1
300
#94A3B8
400
#64748B
500
#475569
600
#334155
700
#1E293B
800
#0F172A
900
Secondary
Used for secondary button and to establish hierarchy among non-interactive UI elements.
#F8FAFC
50
#F1F5F9
100
#E2E8F0
200
#CBD5E1
300
#94A3B8
400
#64748B
500
#475569
600
#334155
700
#1E293B
800
#0F172A
900
Error
Used to draw users attention towards faults and errors to varying degrees.
#F8FAFC
50
#F1F5F9
100
#E2E8F0
200
#CBD5E1
300
#94A3B8
400
#64748B
500
#475569
600
#334155
700
#1E293B
800
#0F172A
900
Permanent Marker
This was the primary font for the application, but it was later substituted with Inter, to increase the readability and legibility of the application, overall.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz
1234567890
Inter - Redesign Typeface
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz
1234567890
Google Material Icons
Google material design rounded icons were used to keep a harmony between the fonts and the icons, and to provide an overall friendly user interface for the target demographic.
Messages
In order to give our users the best possible experience, I reduced the messages section to floating messages, which can be toggled by the user, to a full messages screen if desired.
Graceful Degradation - THE REDESIGN
Responsive web design
The Pictionary application was designed under the theme of graceful degradation to optimally scale down the design when transitioning from a PC to mobile phones.
Responsive Web Development
I used a Django based framework to develop the Pictionary application. Working with HTML and CSS to convert my design into code.
Database Integration
We integrated Django with PostgreSQL for data collection and analysis. PostgreSQL adds an extra layer of security via password verification and role-based hierarchy.
Atypical behavior
Atypical behavior was observed more for texts rather than icons like arrows used for directing the guesser’s attention. Advancing the understanding of human-like AI agents.
Inclusion of AI
The acquired data from the experiments will aid in increasing the accuracy of the currently implemented AI agents, as they mimic human-like responses.
AI Agents
As I went ahead with the redesign it was insightful to learn about the capabilities of AI agents along with their limitations. We identified which framework is best for checking atypical behavior and laying future groundwork which explores ethics of AI agents.
Ethics in AI
I realized that how users may perceive AI is essential, raising questions on AI ethics. In the controlled experiment users were not made aware of the use of AI right away, but in general settings should they be?
Remote Collaboration
Most of my work was online, which helped me in developing skills for remote collaboration. Leading me to understand stakeholder expectations and communicating my thought process effectively and succinctly.
