project04-aysegul-fransiskus-shima
PROJECT REPORT: https://aysegul90.web582.com/dynamic/project04/project04-report.html
Task Ticker-Group Project: Living Report
Members: Aysegul Aksu, Fransiskus Aldo, Shima Deljavan Farshi
Project: Improving Shima's Project 03: Task Ticker
Selected Grading Method: Equal grading. Every piece of work was a team effort. We believe that the end product reflects our group's effort. Furthermore, when it comes to the users, they will not care who did what, but they will care about the end product. If the app is useful, working properly, and appealing to them.
This group work was a good exercise in terms of finding our feet working as a group in web design and programming, as well as supporting each other and developing better relations between students.
We say, "One for all, all for one. Go Team!"
Project Description
The "Task Ticker-Group Project is a collaborative effort undertaken by the team of Aysegul Aksu, Fransiskus Aldo, and Shima Deljavan Farshi as part of the Dynamic Web Programming course. This project involves the development of a web application designed to assist users in managing their tasks efficiently.
Project Objective Database Integration The primary objective of this project is to leverage relational database management techniques. The team has implemented two essential database tables, one for storing task data and the other for user information. This integration serves as a hands-on learning experience in the practical application of dynamic programming concepts.
Productivity Enhancement Beyond its educational purpose, the project aims to offer practical utility to its target audience. The web application empowers users to create and manage their to-do lists effortlessly. By providing a platform to list tasks and monitor progress, the project seeks to enhance user productivity. Target Audience Our target audience comprises individuals who utilize online to-do list applications as a means of staying organized and enhancing productivity. They are people who value efficient task management and effective time utilization. However, it's important to acknowledge that having an extensive list of tasks can sometimes lead to stress and overwhelm.
Design Choices and Considerations Our design choices were informed by the characteristics and preferences of our target audience and the social behaviour theories and principles.
We applied eye tracking pattern scanning findings,Gutenberg principles and the lawn mover pattern / zigzag pattern on our page design as much as possible.
F-Shaped Pattern: Research has shown that when people read text-heavy documents or webpages, their eye movements often follow an "F-shaped" pattern. This means they first scan horizontally across the top, move down slightly, and then scan horizontally again, creating an F-like shape. This pattern is why headlines, subheadings, and the first few lines of text are crucial for capturing users' attention. We kept in mind the recent controversies on the F-shaped pattern behaviour and adapted our approach.
Zigzag Pattern: For webpages with more visual content, like images, infographics, or advertisements, users tend to follow a zigzag pattern. They start at the top-left corner, move diagonally to the right, scan horizontally, and then move diagonally down to the left. This pattern allows users to take in both textual and visual information.While we prefered to take attention to forms on the log pages, we kept the image on the opposite side. We approached the short forms like images. That was one of the main reason for using distinctive yellow in the forms.
Vertical Scrolling: On mobile devices, the most common interaction is vertical scrolling. Users scroll down to see more content. It's important to prioritize information, keeping the most critical content at the top to capture users' attention quickly. We applied a design based on vertical scrolling behaviour on the mobile design
Thumb Zone: Mobile users primarily interact with touchscreen devices using their thumbs. Understanding the "thumb zone" is crucial for placing interactive elements (buttons, links) within easy reach. Elements at the top of the screen were easier to reach with the thumb, while those at the bottom may require more effort. However, the recent trend on mobile phones ( increased height of the phones), is changing this approach. That is why we added axtra padding on the nav menu at the bottom and kept all the links reachable with the thumb. Based on the feedback, when we changed the location of the add task button and removed the button from the desktop version from the nav menu, we still kept the add task button on the mobile nav menu. It was our concious choice to use the add task button twice on the mobile design.
Tapping and Swiping: Users tap to select items, click on links, and interact with buttons. They swipe horizontally to navigate through content or access menus. Our nav menu design based on these gestures. We made interactive elements touch-friendly and easy to distinguish by using different background color on the mobile nav menu.
Responsive Design: Given the variety of screen sizes on mobile devices, responsive design is essential. This means designing layouts and content that adapt to different screen sizes and orientations (portrait vs. landscape). Our design is compatable with the mobile phones as small as 280px-width as well as wide screen desktops 1600px
Mobile-First Design: We did use "mobile-first" approach, and prioritized designing for mobile devices first and then adapted the design for larger screens. This approach ensured a better experience for users on smaller screens.
Minimize Clutter for Mobile Design: Given the limited screen of the mobile phones, we simplified our design for mobiles and avoid cluttering the mobile interface with excessive elements. We kept the design clean and focus on essential features.
Minimize White Space for Desktop Design: Given the bigger screen size of the desktop, we added a side image to strengthen the branding, supporting design choices and creating a more balanced design between the white space and main content.We increased the number of columns on the task display page.
Readability: While it is a text heavy app, we had to make sure that the text is easily readable on all devices. We used appropriately sized fonts, line spacing and contrast to enhance readability.
Font Selection: We opted for fonts that strike a balance between structure and readability. The use of 'Montserrat' and 'Poppins' conveys a sense of organization while ensuring content is easily readable. The wider look of these fonts prevents the page from feeling cramped.
Color Palette: The color palette we selected consists of muted shades of yellow and green, with accents of red. These colors are strategically chosen to reflect different aspects of task management. Yellow signifies getting ready or preparing, green represents progress or completion (akin to a green light), and red serves as an alert or reminder. This combination creates a serene, yet alert environment.
Logo Styling: We incorporated retro bold styling into the logo to add a touch of fun and playfulness to the overall design. This complements the structured and organized aspects of the application, creating a balanced user experience.
Gender Demographics Research indicates that women are more likely to engage with note-taking, online calendars, and productivity apps compared to their male counterparts. Consequently, our target audience predominantly consists of women. To cater to this demographic, we incorporated design elements that resonate with feminine aesthetics.
Conclusion
The Task Ticker web application is thoughtfully designed to meet the needs of a predominantly female target audience. Our design choices, including layout, fonts, colors, and logo styling, aim to provide a structured yet visually appealing experience. We selected each element based on : Communication theories and social behaviour theories such as learning theories (behaviorism, cognitivism, connectivism, -cognitive behaviour theory, social learning, cognitive and emotional learning, natural selection etc. ) and industry reports ( UI-UX design trends , statistics on mobile screen sizes and choices , web design trends etc.). Each element on the page is selected and placed with a thought. By understanding the characteristics and preferences of our users, and applying communication and behaviour theories we ensure that Task Ticker is an efficient and stress-free tool for managing tasks and enhancing productivity.
Roles and Responsibilities Aysegul Aksu Aysegul's primary role in the login process, which includes the implementation of registration, login, and logout functionality. She also contributed to the project's visual identity by designing the logo and completing overall styling. Additionally, she worked on project reporting by creating wireframes, sitemap etc.
Fransiskus Aldo Fransiskus took charge of the main task page, focusing on tasks such as displaying and editing tasks. He was responsible for the database schema and played a crucial role in managing session data and debugging.
Shima Deljavan Farshi Shima's primary contribution was the creation of the "add new task" form, which inserts and displays task data. She added a dark mode option to the app.
Testing , Feedback and Adjustments We noticed console errors on the task form. Shima updated the task form and the task form was performing well on the last test.
We received feedback from Bruce regarding the position of the add task button on the task display page. We tried to apply eye tracking pattern scanning findings and Gutenberg principles on our page design as much as possible. However when we were repositioning the add task button on the page, it was not possible to use the gutenberg principle.
While the majority of the group decided to change the location of button,we changed the position of the add task button on the task display page. Add task button is moved under the heading of display page on the mobile and it is moved to the left corner of the task display heading section on the desktop version
Mobile users primarily interact with touchscreen devices using their thumbs. That is why based on the feedback even when we changed the location of the add task button and removed the button from the desktop version from the nav menu, we still kept the add task button on the mobile nav menu. It was our concious choice to use the add task button twice on the mobile design.
-- Progress Report The team has successfully completed all stages of the project and all objectives have been met. The team has effectively utilized dynamic programming concepts to create a practical web application. The database integration, user authentication, and task management features are fully functional. The team thoroughly discussed database options and executed the chosen approach successfully. A detailed database schema and sitemap were developed to guide the project's structure. Early sketches were transformed into a user-friendly and visually appealing design, with font choices that enhance the overall user experience.
Aysegul Aksu Completed: Created sql files for tables Completed: Login page completed and tested. Completed: Register page completed and tested. Completed: Logout page completed and tested Completed:Logo design completed Completed:Sketches, wireframe for login, register and logout pages completed. Partially Completed: Pseudo code summary for login, register, and logout pages are in the PHP and Js files. Completed styling login, register, task-form, task-display and logout pages Completed project reporting Completed adding github repository Updated the location of the add task button on the app-main task display page
Shima Deljavan Farshi Completed:Add new task page, completed and tested Completed:Dark mode for the task page
Fransiskus Aldo Completed; Task display page completed, added edit functionality to the task page Completed: Added login page session data function. Completed:Connected add new task page to the tasks table. Completed: Debugging. Completed:Database schema Project Stages and Documentation
The team thoroughly discussed database options and executed the chosen approach successfully. A detailed database schema and sitemap were developed to guide the project's structure. Early sketches were transformed into a user-friendly and visually appealing design, with font choices that enhance the overall user experience.
Final Design Elements Font-family: 'Montserrat', sans-serif Design Elements The team has achieved its goal of creating a user-friendly and efficient task management web application. This project serves as a testament to the team's understanding of dynamic programming principles and their ability to deliver a valuable product to its target audience.
Resources Gutenberg & Modern-Day UX Using Eye Movements To Evaluate The Cognitive Processes Involved In Text Comprehension The Lawn Mower Eyetracking Pattern For Scanning Comparison Tables Eye-Tracking In Mobile UX Research