...
Later that day, Stephen receives a message from someone claiming to be on Team Pullman. He asks to establish a secure messaging connection with Stephen, which Stephen agrees to. The other person turns out to be Tom Duffy, campaign manager of Team Pullman, and he suspiciously suggests that Stephen ought to consider working for Team Pullman instead of Team Morris. Stephen does not like where the conversation is heading, and decides to end the conversation. He also erases any record of the conversation occurring and removes Tom as a contact, to ensure that no trace of the conversation can be found.
Design 1
Task #1Design Notes: These were drawn in pencil (a ui mockup program) as my hand writing is pretty much illegible. I specifically chose to use Comic Sans as the font to indicate to users that this is not a finished product (as no sane designer would use comic sans).
First, in order to establish a secure connection, Stephan meets with Team Morris and shares his identity. He does this by going to his Contacts panel and clicking share.
Learnability: The "share" action is somewhat ambiguous and may confuse new users (the user may wonder what they are sharing). The use of the standard contacts list should help learnability.
Efficiency: Adding and sharing contact information from the same panel groups temporally related operations and helps make them more efficient.
Safety: The are no unsafe actions available from this screen.
This brings up a Stephan's QR code along with his key. Users can manually enter the key or take a picture of the QR code. In this scenario, Stephan prints out the ID page and passes it around to the other members of Team Morris (the lock button is provided in case the user wants to pass around his or her phone).
...
Storyboard
...
Learnability
...
Efficiency
...
Safety
Learnability: Most potential users will be familiar with QR codes so this screen shouldn't pose a learnability problem. As the key looks like a serial number under a bar code, the user should pick this out as a numerical representation of the QR code.
Efficiency: QR codes are extremely efficient as the user only needs to take a picture of it.
Safety: If an attacker takes a picture of this QR code or writes down the key, it could allow them to attempt a fishing attack (as seen in this scenario).
Each member of team morris goes to his or her contacts panel and clicks Add. When they do so, they are shown the following, click By QR Codem and are taken to a standard QR code reader. The contact is then added.
Learnability: Again, most users are familiar with QR codes so adding by QR code should be easy. Sadly, many users are also familiar with entering software activation keys and shouldn't have a problem entering the key manually if they need to.
Efficiency: QR Codes are efficient.
Safety: There are two potential safety problems: the user could be tricked into adding the wrong contact or fail to enter they key correctly. Dealing with the former is beyond the scope of this application and the latter can be dealt with by including error detection in the key.
To allow Stephan to contact them, each member of Team Morris clicks the Actions button next to Stephan's name in their contacts page. They are then presented with the following dialog from which they select Send Contact Information.
Learnability: Learning that one can send contact information to a user by clicking on Actions is not obvious and will probably have to be taught by another user. However, putting a button on the contact itself would clutter the interface and confuse the user further.
Efficiency: This method of sharing contact information is very efficient and requires very little work on the coordinator's part.
Safety: This method of sharing contact information could lead a user to accidentally tell the wrong person who they are. However, contacts are generally assumed to be mutual so this shouldn't be a problem.
As Stephan created this identity for this event, he knows that it is only known to members of Team Morris. As such, Stephan trusts any new contact information at face value. Stephan receives these requests as messages.
Learnability: As it uses the messaging system, there is nothing new to learn.
Efficiency: Adding multiple contacts could be slow.
Safety: The user could easily be tricked into adding an untrusted contact. Time sensitive codes could be used to mitigate this.
Later that day, when Stephan learns that the members of Team Morris should move back to the city, he sends a message to Mark Dunn by browsing to the contacts page, clicking Actions next to his name, and clicking Send Message.
Learnability: This is fairly standard and straight forward.
Efficiency: Sending a message to multiple contacts is inefficient.
Safety: Explicitly choosing the recipient reduces the risk of sending to the wrong person.
Stephan is then presented with a send message dialog.
Learnability: Like email.
Efficiency: Typing speed.
Safety: Including the recipient in the send button further reduces the changes of sending to the wrong person.
Mark receives the message as the following.
Learnability: Like email.
Efficiency: Only one message per screen may cause a problem.
Safety: The message clearly indicates the sender and the encryption status.
As it turns out, Stephan lost the sheet of paper with his contact QR code. Tom Duffy picks it up and sends Stephan his contact information. Stephan makes the mistake of trusting him and adds him to his contacts. They converse in the manner shown above and eventually Stephan catches on and removes Tom Duffy (known to Stephan as Bob) from his contacts, erasing all evidence of communication.
Learnability: By the point where a user feels the need to erase evidence of communication, he or she should be familiar enough with the interface to have seen the Actions menu. However, he or she may not know that there exists an option to remove records of communication. This should not be a problem as he or she will see this feature as he or she attempts to delete the contact.
Efficiency: This action is inefficient and requires 4-5 clicks. In this case, this is a non-issue because this feature will only be used rarely.
Safety: The user cannot undo deleting a contact (for security reasons). The application tries to communicate this to the user to reduce the changes of an error. Additionally, the interface repeatedly mentions the name of the contact being removed.
Design 2
Adding/Managing Contacts
...
Task #2
...
Storyboard
...
Learnability
...
Efficiency
...
Safety
...
Task #3
Storyboard | Learnability | Efficiency | Safety | SB#1
---|
Design 2
Task #1
...
Storyboard
...
Learnability
...
Efficiency
...
Safety
...
| Pros: The look and feel mimics the standard | Pros: Key Server enables contacts to be | Pros: Multiple graphical cues suggest that a contact |
| Pros: Look and Feel is similar to contact manager on | Pros: Contacts auto populated from key server | Pros: Few safety issues here, as contact data is always updatable. |
Messaging (Secure and Unsecure)
...
Task #2
Storyboard | Learnability | Efficiency | Safety |
---|---|---|---|
|
Task #3
...
Storyboard
...
Learnability
...
Efficiency
...
Safety
...
| Pros: Mimics Conversation/Chat flow concepts. | Pros: Streamlined interface for all secure and | Pros: Multiple visual cues to signify message security. |
Erasing Contacts and Communication Trail
...
Design 3
Task #1
Storyboard | Learnability | Efficiency | Safety |
---|---|---|---|
SB#1 | Pros: | Pros: | Pros: |
SB#2 | Pros: | Pros: | Pros: |
SB#3 | Pros: | Pros: | Pros: |
Design 3
This design focuses on being very straightforward/simple for any one to use.
Adding and managing secure contactsTask #2
Storyboard | Learnability | Efficiency | Safety | SB#1 |
---|---|---|---|---|
| Pros: Straightforward to operate for new users, as most of the | Pros: Quick and easy. | Pros: Very clear what's going to happen. | |
| Pros: Straightforward interface. Clear what does what. | Pros: Quick access to all the needed | Pros: All actions are very explicit and require |
Secure chatTask #3
Storyboard | Learnability | Efficiency | Safety |
---|---|---|---|
| Pros: Just like standard text messaging interfaces | Pros: | Pros: |