Year
January - February, 2015
Type
Individual, Academic,
Conceptual Design
Role
UX/UI Designer,
Interaction Designer
Tools
Adobe Illustrator,
Adobe After Effects
Loci is a creativity support tool, used to learn the semantics, definition and related content and media for a particular word, sentence or phrase. The tool taps into the querying capabilities of search engines such as Google, but utilizes the searching capabilities in the form of a desktop gadget for quick and easy, on-the-fly use, compatible with any desktop applications such as Microsoft Word, OneNote and Excel.
My intentions for conceptualizing this tool was to benefit writers, designers and creative professionals, aiding them in early research, brainstorming and general learning for their own areas of interest and for making this information more easily accessible.
Anatomy of Loci
The top portion contains the term or phrase for the search query and the option for selecting which search engine the search results will return from. It will also return the best definition that it finds for the user's term or phrase.
The middle portion contains the preview for the user's selected search result node.
The bottom portion contains search result nodes from the search query. The coloured nodes represent a visual thumbnail for a search result in different mediums such as text, image, video and audio.
The circular element contains the "store" functionality along with other options for a curated, compiled row of search result nodes.
The grey rectangle beneath contains toggles for left and mouse clicks, used for switching between advanced features for the application.
Definition
Google / Wikipedia does it's best to define.
Subject
The placeholder for content to be defined.
Quick View
View for designated search result node.
Archive Toggles
Store, import and record search node sets.
Mouse Toggles
Toggle left and right mouse clicks for advanced features.
-
Node Archive
-
Search Result Nodes
Aggregated nodes
from individual search results.
Application Domain
“Low Thresholds, Tall Ceilings, Wide Walls”
In order to integrate the application successfully for an environment suitable for creative professionals, there needed to be certain principles to follow for an effective approach. Learning about the different design principles, one example became prominent for creative tool development, which came in the form of an expression called "Low Thresholds, Tall Ceilings, and Wide Walls".
Low thresholds meant that the tool is easy for beginners to initially learn. I created low thresholds in my application because I drew inspiration for user interactions from similar and familiar applications such as Pinterest and the Windows 10 start menu, which have been met with decent success for intuitive user interaction.
Tall ceilings means that the application offers enough features for advanced users to facilitate certain tasks with a deeper understanding of the capabilities of the software. I offered advanced features such as storing search results, and renewing some of the search results within the thumbnails section without renewing all search results.
Wide walls means that the tool should easily be integrated with other tools if it helps increase the efficiency of the tool. The integration that I had in mind for this application was with search engines such as Google. Another useful feature that would include the wide walls principles would be to store user profiles for search pattern preferences if necessary. Other integrated tools that would include this principle would be automated filtering through search results within the thumbnail section based on user profiles.
Lesson
Project Brief
Our task for this assignment was to create a tool that would assist and facilitate creative professionals for developing their creative material and work. The tool can assist any type of creative profession, but needed to follow a reasonable argument and line of thinking as to exactly how it would benefit these professionals with the use of design principles and evaluation. We were also required to create three task or scenarios in which users would use our tool and provide visual demonstrations of certain features, including a breakdown chart for all tasks could be performed while using our tool.
Challenges
The timeline for conceptualizing this tool and building activity diagrams and task breakdown structures was limited to two weeks because it was the first assignment for our class. Therefore, polish and refinement was not a factor in this project, but the initial concepts for the class got us thinking about how to evaluate creative development tool features.
Reflection
Given more time for this project, I would have taken the feedback that my teaching assistant gave me for this project. He mentioned that certain features were not fully fleshed out, such as the renewing search results task and tasks like these might even make it harder for users to find search results that they want because it meant destroying the search result nodes that were adjacent to the designated search result node in lieu of new search result nodes.
To remedy this concern, I would revisit this feature of renewing search result nodes and explore different ways of create new search result nodes that doesn't interfere with other search result nodes. More time would also be spent on redesigning the toggle switches beneath the circular component so that advanced features are more practical and efficient to access.
Hierarchical Task Analysis
Hierarchical Task Analysis
I created a Hierarchal Task Analysis to visualize a breakdown of the features of LOCI. The features that were conceptualized were broken down into some basic tasks that users can perform and six advanced tasks. Four of these tasks build are demonstrated below as they act as the foundational interaction that would be used in this software. Task number three and four were merged into one task due to their similarities. The other two tasks, importing and algorithmic tasks, were some additional tasks that were not required. therefore, I spent less time developing the idea for those two tasks.
Design Mockups
Basic Interactions
0.1 - Basic Interactions
Four basic interactions include selecting, deselecting, destroying and scrolling. With these interactions the user would be able to navigate and filter search results content throughout the web using a visual medium of square tiles. These interactions make up the foundation for learning advanced interactions such as storing search results, renewing search results and reorganizing search results.
Scenarios & Use Cases
- Demonstration
- Activity Diagram
- Storyboard
0.2 - Storing Search Result Nodes
Using the right click button, users would be able to store search result nodes within a compilation. After doing so, they would be able to store and name these compilation groups for future access, reference and manipulation by pressing on the "store" button beside the compilation nodes.
- Demonstration
- Activity Diagram
- Storyboard
0.3 - Renewing Search Result Nodes
By toggling the switches beneath the circular component of the application, users are able to change the functionality for right and left mouse clicks. By changing the functionality for right mouse clicks into a new feature for renewing search result nodes, users are able to use this feature to right click on a designated search result node to reveal additional search result nodes adjacent to the node which correspond or relate more to the designated search result node.
The first right click hides the original search result nodes that were adjacent to the designated search result node, making it easier to for users to focus their attention on the designated node and to ensure that it is the correct search result node to reference for new adjacent search result node queries.
Two subsequent options that the user can take afterwards, would be to right click again to permanent change the adjacent search result nodes into the new related search result nodes or left click to revert the changes of the adjacent search result nodes if the new search results were unsatisfactory.
- Demonstration
- Activity Diagram
- Storyboard
0.4 - Reorganizing Search Result Nodes
By left clicking and dragging a marquee around multiple nodes, users are able to rearrange the placement of the search result nodes. Additionally, they would also be able to hold the Ctrl or Command button and click simultaneously to select non-adjacent search result nodes. This interaction is kept similar to desktop selection on purpose so that users would be familiar with this interaction, making it easier to learn.