Comments (15)
Oh yes, I get it now. Changes are on their way.
from grouptodo.
Good job i like the tone and simplicity. I believe you will come out with the desktop version as well
from grouptodo.
This seems reasonable. Perhaps something like Google Inbox, where deleting an item creates a notification with an "Undo" button for a few seconds.
from grouptodo.
This is the first version of the app design. Grey scale only to keep our focus on information flow and user experience. I'm also working on creating some user stories, will post them later.
Comments and feedback welcome.
from grouptodo.
User Stories
As a user, I want to create a new ToDo:
- see the welcome screen
- click on New ToDo button
- screen changes to New ToDo screen
- type the new ToDo
- press enter or tap the 'plus' button
- ToDo is added to the list below
As a user, I want to add some information about a ToDo:
- select the ToDo by clicking or tapping
- screen changes to ToDo Options
- click or tap on 'add deadline', phone's native calendar app opens to select a date/time
- click or tap on 'add description', type a description of the ToDo
- click or tap on 'Save' to save
As a user, I want to make ToDo as completed:
- select the tick on the left of the ToDo by clicking or tapping
- tick becomes green, ToDo's becomes grey
- ToDo is automatically removed by the end of the day
As a user, I want to cancel or delete a ToDo:
- select the trash can icon on the right of the ToDo by clicking or tapping
- a confirmation message appears asking the user if s/he is really sure about deleting the ToDo
- user can respond 'Yes' or 'Undo/Cancel'
- if user responds with 'Yes', the ToDo is removed from the list and placed in the folder Deleted ToDos (accessible from the Main menu)
- deleted ToDos will be removed from the Deleted ToDos folder within 24 hours
- if user responds with 'Undo/Cancel', delete request is cancelled and ToDo remains in the list
As a user, I want to restore deleted ToDo from the Deleted ToDos folder
- click or tap on the hamburger menu button on the top right of the screen
- click or tap on the Deleted ToDos folder
- list of ToDos deleted in the last 24 hours is displayed
- click or tap on the ToDo to be restored
- ToDo is restored and displayed in the list of ToDos
As a user, I want to create a new Project
- see the welcome screen
- click on New Project button
- screen changes to New Project screen
- click or tap on 'add description' to add description of the project
- click or tap on 'Create' to create a new project
or
- see the welcome screen
- click or tap on the hamburger menu button on the top right of the screen
- click or tap on New Project
- screen changes to New Project screen
- click or tap on 'add description' to add description of the project
- click or tap on 'Create' to create a new project
As a user, I want to create a new group Project
- see the welcome screen
- click on New Project button
- screen changes to New Project screen
- click or tap on 'add description' to add description of the project
- click or tap on the 'email' input field to add an email of another user
- click or tap on the 'plus' button to add user
- repeat to add additional users
- click or tap on 'Create' to create a new project
As a user, I want to access the statistics of a group ToDo
- see the welcome screen
- click or tap on the hamburger menu button on the top right of the screen
- see a list of all available Projects
- select the project
- screen changes to the Project screen
- click or tap on the 'Statistics' button on the lower part of the screen
- statistics about the project is displayed
As a user, I want to access the information about a group ToDo
- see the welcome screen
- click or tap on the hamburger menu button on the top right of the screen
- see a list of all available Projects
- select the project
- screen changes to the Project screen
- click or tap on the 'Project Info' button on the lower part of the screen
- details about the project are displayed
As a user, I want to add new ToDo to a group ToDo
- see the welcome screen
- click or tap on the hamburger menu button on the top right of the screen
- see a list of all available Projects
- select the project
- screen changes to the Project screen
- click or tap on 'New ToDo'
- type the new ToDo
- press enter or tap the 'plus' button
- ToDo is added to the list below
As a user, I want to change details or add users to a group ToDo
- see the welcome screen
- click or tap on the hamburger menu button on the top right of the screen
- see a list of all available Projects
- select the project
- screen changes to the Project screen
- click or tap on the 'Project Info' button on the lower part of the screen
- lick or tap on the 'Edit' button
- screen changes to 'Edit Project' screen
- click or tap to edit description
- click or tap on the 'plus' button to add user
- click or tap the 'Save' button to save
As a user, I want to change user settings
- see the welcome screen
- click or tap on the hamburger menu button on the top right of the screen
- click or tap on 'Settings'
- screen changes to User Settings
- click or tap on 'Name' input field to add/change user name
- click or tap on 'Email' input field to add/change user email address
- click or tap on 'Twitter' input field to add/change user Twitter handle
- click or tap on 'Facebook' input field to add/change user Facebook name
- click or tap on 'Save' to save new settings
from grouptodo.
I have created a mock-up for the full screen version. The layout would be pretty much the same as on the mobile app, it would just be centered on the larger screen.
I have few possible colour palettes - they are just an example, I can use any other.
I'm also experimenting with background pattern for the top part of the app. I think it gives the website a little bit of texture. It's very subtle (last image).
We could also include a 'change your background' option to the desktop version at least, so that the users can select the colour pallet they like.
Finally, there would be some interactivity on the coded version, e.g. when pressing a button or hovering over the contact us/about us.
from grouptodo.
Really like these new concepts. Personally I prefer the plain colours and gradients but as you say this could be a user preference anyway. A lot of detail in the user stories too---they should provide guidance as we develop the app.
from grouptodo.
Thank you @thornecc . I also added another variation (last image), when the button will be the same colour as the background. That will be the same for the rest of the app as well, once we (or the user) decide on the colour, it will be consistent through the app.
I can start coding this up, if you're happy with it? Will give few more days to anyone else to comment on it first, though.
from grouptodo.
Cool design @zk433 , I like the colours and the simplicity.
I have concerns about the behaviour of toDo Tasks:
- According to the user stories, I understand if the user want to cancel a toDo, he will press the cross. Then a red stroke appear on the tasks that would be removed by the end of the day. For me I would prefer cancelled task should be vanished from the list or moved to a bin?
- Tick means the task is finished. But cross could refer to both delete or unfinished. Maybe replaced with a trash can as following?
from grouptodo.
Hi @owenip , thank you for the feedback.
Do you mean that once cancelled, the task should immediately dissapear? Or is it just about the icon?
I was thinking of leaving the task there (crossed) for the rest of the day in case the user decided to 'bring it back to life'. But it's definitely possible to remove straight away (in which case the 'trash can' icon would be more suitable.
We can also introduce a message that will ask the user for a confirmation, whether they really want to delete the todo.
from grouptodo.
I would prefer the task immediately disappear after cancelled. Perhaps cancelled tasks can be moved to bin (basically a project that being cleaned by the end of the day). So users could retrieve them if needed.
And yes, a confirmation before deleting would be helpful.
from grouptodo.
I can definitely implement this. I could add the Bin to the main menu and the confirmation message could include info like "deleted messages will be stored in the Bin for the 24 hours".
@thornecc , what do you think?
from grouptodo.
I'll change the icon to a trash can and add this to the user stories.
If there is a 'undo' button, then the confirmation message would be redundant, no?
from grouptodo.
The undo button is inside the confirmation. Like in Wittr when an updated service worker is waiting there was an update notification with Reload and Dismiss buttons.
from grouptodo.
Mockup has been updated with new trash can icon (see above) and the User Stories have been updated accordingly.
from grouptodo.
Related Issues (9)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grouptodo.