Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

history/news viewer concept & design #86

Open
25 tasks
Tracked by #39
serapath opened this issue Apr 1, 2022 · 28 comments
Open
25 tasks
Tracked by #39

history/news viewer concept & design #86

serapath opened this issue Apr 1, 2022 · 28 comments
Assignees
@Helenphina

Comments

@serapath
Copy link
Member

serapath commented Apr 1, 2022 •
edited by Helenphina
Loading

@todo

@info

This has to do with everything about the History/News feed of Wizard Amigos from the past to present.
Creating a mobile App that can help users to easily navigate through whenever they are going through the History/News feed of Wizard Amigos. This mobile App, has basic features which includes :

  • Timeline :
    This is where History/News feed is being displayed. It contains all the necessary information about Wizard Amigos. Everything you need to know about Wizard Amigos both past and present is here.
  • Calendar :
    Using the calendar, one can easily set various todo's. And this set todo's (current) will be displayed. All Todo can also be viewed from here.
  • Todo :
    This is where all list of todo's is being displayed. User can find all his Todo here.
  • Events :
    This is where you can find all the events you engaged in. That is, any set Todo that is being completed moves to event for record purposes.
  • Notification :
    Upon subscription to History/News feed, the notification will appear here whenever there's a new timeline. Also anytime there is a reminder for a to-do, it will appear here.
  • Search :
    This is for easy assessment of any information a user is looking for, the user can easily type it out and search for it.
  • Filter :
    It is used to change whether you want to view things from past to current or from current to past.

Inspirations for this was gotten from :
Imgur , Hacker News , Reddit
This was referenced Apr 1, 2022
Open
Closed
Open
Closed
Closed
@serapath serapath mentioned this issue Jun 20, 2022
Closed
1 task
@Helenphina
Copy link

Helenphina commented Jun 24, 2022 •
edited
Loading

Worklog Video 4 2022.06.25 03:40AM

@serapath
Copy link
Member Author

serapath commented Jun 25, 2022 •
edited
Loading

feedback 2022.06.22

placeholder for feedback from discord about first wireframe explained in worklog video 3

@serapath
Copy link
Member Author

serapath commented Jun 25, 2022 •
edited by Helenphina
Loading

Worklog Video 3 2022.06.22 01:36AM

@serapath
Copy link
Member Author

serapath commented Jun 25, 2022 •
edited
Loading

feedback 2022.06.25

Worklog4 2022.06.25 03:40AM

  • Done Create slides, wireframes and markdown files

ok - first feedback - please fix the above worklog comments and outputs - more on discord - but otherwise, thx for the new worlkog.

alright, this is my feeedback for your worklog video 4 and the slide deck and wireframe output, see below:

The bottom menu has:

  1. timeline
  2. events
  3. notifications
  4. search
  5. filter

i noticed the wireframes do not highlight the bottom button that is currently shown or active in the wireframe so it is difficult to always exactly know what part am i looking at. would you mind highlighting the button that we are currently navigated to?

about timeline

  • it looks good. i see it is getting closer.
  • Regarding "timeline", here is an example of a timeline from another project we are working on and it is responsive too
  • your timeline reminds me of a blog post - i imagine a wireframe showing how to interact with the timline and where do spme parts start and end would be good to know - do i scroll?
    • maybe it would be good to take some examples from the real wizardamigos history to see how that would look like :-)

about calendar

  • i like how it looks is my first impression. thx :-)
  • i wonder again how do i navigate the calendar. do i click? swipe? scroll?
    • also how will the calendar look in detail once some real wizard amigos events are added?
  • the "current" list below the calendar looks good too, but i wonder also here, do i scroll? or swipe? how does it work?
  • view all click and you show the next wireframe view with the title To do ? is it todo? is it events?
    • is it the same list of ...events? ...that was shown before in the current section?
    • also - how do i get back from the full screen list to see the calendar again? ...i dont know how to navigate
  • also - in the list of todos, what is shown for any single todo in detail? a name? a date? a time? a status?
    • can i edit them? can i see details in a new screen or does it expand? can i rearrange them? does that affect calendar view?
  • also i can see in next to the title of a screen there is a back arrow < ...if there is a button on the screen to quickly bring me to any place in the app, then maybe we don't even need the back button. you didn't say how it works

about events

  • you say on minute 1:15 when the user clicks on "events" and that is in the top menu bar, but there is also events in the bottom menu? ...is that the same? if so i would click instead on events on the bottom - if it is not the same, it should have a different name maybe
  • now you say clicking on events will show the list of events.
    • does that mean the current on the calendar view are todos?
    • does it mean the "view all" means "show todos?" ...is that the same as the todo button in the top menu?
      • if so, maybe we should decide for one button?
  • menu bars: I think it is difficult to reach the menu bar on the bottom and on top with fingers on mobile.
    • I would prefer to have only a menu bar on the bottom and if we need to have it we can make a second menu bar right above the bottom menu bar to have additional buttons, so a user doesnt need to move the finger up and back down a lot :-)
    • maybe also this menu bar could highlight the currently active option, e.g. calendar, todo, events, ...?
  • for the events list it would be again - similar to the todo list - it would be good to know how this is meant to look in detail - like a single item

it would be cool if the next wireframe iteration could include more details, especially for each item in todo list, event list, notifications list, etc... at least a timestamp

about notifications

  • same as above, maybe to give a few examples of very specific kinds of notifications 🙂
  • you can use all the real wizardamigos history and the data we have to pick some example ideas
  • also maybe if the user is using the app and gets a single new notification, it should maybe show as a popup (from above?) or something similar to how phones always do it, but then going on the notifications list can show all the recent notifications list to the user

about search

  • i like the feature as such, but i think the search bar should be below the list and not above
  • also the buttons timeline, events, notifications somehow change the view
  • but the buttons search and filter are more features that could apply to any of the current view
  • so maybe we don't need them as buttons in the bottom menu, but rather
    1. have a search input field always visible on the bottom just above the menu bar on the bottom
    2. maybe next to the search bar on the bottom have the filter icon, so when it clicks the search bar expands to configure filters
    3. when the user searches, it will just filter or find or highlight the results in the current view and if the user switches the view from calendar to events or notifications, it will change where it searches or filters and show it there until the user clears and resets the search or filters

Again - i think we are on a good way and maybe we should start refining and showing mor details and use example data from the real wizardamigos history we have. ...we have so many past events and pictures and old websites and lessons and ...conference or video talks and so much more. we organized codecamps and in fact we will be organizing a wizardamigos code camp in england in september probably, so we can try to make the wireframe a bit more realistic with real data

It does not need to look pretty though - filling in some real wizardamigos data into the raw wireframes is ok.
we will still need to adapt it a lot, so lets make it pretty later 🙂

about filter

  • now the filter page i think is not the way i was thinking about it.
  • when a user searches or is on an existing view (e.g. events, calendar, notification)
    1. they can select specificy "types" of timeline entries, like events or todos or new blog posts or new published lessons or whatever or maybe specific times or time ranges to only show the timeline items that match those criteria, but we would not have a separate screen for filter

about slidedeck

First, he current wireframe is not very detailed, it is an interactive wireframe to click through the entire app and each click shows all the features with example content, where we can click and swipe and enter some text into the search and see the results and then select and go back and forth and so on to really "simulate" how everything works.

The current wireframe you made is more like a single rough picture of every screen and it is what i imagine the slide deck to be.

The slide deck you made describes with text a little summary of each part of the timline/history view component we are making. This is exactly what should be written in a hackmd/markdown file including for each section each button and element and what gestures the user can make and if the user can use hotkey keyboard shortcuts when they use the app on desktop, and so on - all the details of each page so we know how this component should behave.

So in summary:

  1. what is now the slide deck should become the hackmd/markdown file
  2. what is now the wireframe should become what the slide deck is - a quick overview over the main parts
  3. and the detailed simulation with real content is what the new wireframes should become :-)

@Helenphina
Copy link

  • The issue of buttons not highlighted noted, I will work on that
  • I will adjust the time in accordance to the formal websites (how they look)
  • The calendar can be clicked on and if the user should click on a particular day set for Todo, it will direct the user to a page that describes the full details of the set Todo.
    • The Current shows only the three latest Todo, if one choose to see more, the person will click on "View All"
    • For one to get back to calendar there's a " <" icon in the frame for that.
      Also there's a shape with calendar, Todo and events. Those shapes are clickable, you easily navigate to calendar, Todo .
    • what is shown in full details of Todo's are name, date and time. And it can be edited
    • The back icon < is basically for going back, you will notice that it's in all the wireframes.
    • The whole concept behind event is this : once the user clicks on the Event icon, There are three features in there which are calendar, Todo and events and each of them can be navigated too.
      If you click in each of these features it will direct you to their wireframes.
      And basically the "events" shows the list of completed todo's. It's a kind of history for all the todo's.
      If everything is to be on the button that means I will have different icons for calendar and Todo and place along with other buttons on the bottom
      Then I will remove the search and filter icons and place them the way you suggested
  • I thought I specify what notification is all about.
    It's where the user gets notified for any new timeline.
    The user can as well be notified about his Todo's there.
  • Lastly are you saying that the slide deck should contain the images of those wireframes I did ?

@Helenphina
Copy link

Helenphina commented Jul 5, 2022 •
edited
Loading

Worklog5 2022.07.05 10:12AM
Worklog6 2022.07.05 10:14AM

@serapath
Copy link
Member Author

serapath commented Jul 13, 2022 •
edited
Loading

feedback 2022.07.13

Worklog5 2022.07.05 10:12AM

Feedback about:

  1. timeline
  • one inspiration for the timeline is a discord announcement channel
  • a discord channel where you cannot write messages because it is "read only"
  • each timeline item will only have a link to more details which opens in a new tab
  • there is no "expand" option, only a clickable link to open a new tab
  • 👍 if that's what you mean by "read more..." thats great :-)
    • so you don't need a "details" screen for a timeline item. it just opens in the browser
  • still thinking, the "view more" should probably endless scroll like instagram or tiktok
    • which means we don't really need the "timeline view more" page either
  1. search/filter
  • 👍 cool to have it in the bottom action bar with filter
  • but the linked slide deck and wireframe still have separate search and filter screens
  • a user can always "search" on every screen (timeline, calendar, todo, events, ...)
  • so a user can always "filter" on every screen (timeline, calendar, todo, events, ...)
  • i think filter should be just an option together with search like you show
  • also clicking the "filter" icon next to the search bar should just expaned the input field similar to messengers where you select emojis or gifs, but offer filter options and then you can collapse the filter menu again instead of showing a separate screen like in your wireframe
  1. menubar
  • the timeline button is good
  • but could you add a list/calendar toggle button next to the search bar?
  • so when a user is on the timeline they can toggle the button to see
    • either the list view
    • or the calendar view
    • but the content stays the same, it is only presented differently
  1. calendar + Calendar Details
  • is only a view of the timeline. no events are being created here
  • the calendar itself should probably be on top or in the bottom screen section
  • the other half of the screen can show the entries for a particular calendar day or interval that has been selected
  • if the notifcations are activated calendar and list show notifications
  • if the notifcations are deactivated, calendar and list show timeline items
  • but clicking on a calendar day would show all entries for that day
    • could be notifcations
    • could be timeline items
  • but clicking on an entry or calendar day would not show a second details screen
    • instead clicking on an entry in the list for that calendar day
    • would open a new browser tab to show the content/details
  1. todo + Todo Details
  • should probably not have a separate page but just a type/color of a timeline item
  • i think thats what i mentioned in previous feedbacks already
  • so basically there is only a list that shows todos, events, etc... mixed
  • => so it means some items in the timeline should be todos
    • but we don't need todos in the menu
  • clicking on a todo is similar to a link
    • it opens the todo details in a new browser tab :-)
  1. events + Event Details
  • should probably not have a separate page but just a type/color of a timeline item
  • i think thats what i mentioned in previous feedbacks already
  • => so it means some items in the timeline should be events
    • but we don't need events in the menu
  1. notifications + Notification Details + Notification Pop up
  • 👍 thinking about this gave me some new inspiration
  • while user actions might create or change events and todos in the timeline
  • those todos and events are used by the system to create notifications
  • so the timeline shows items like (events, todos) ...maybe more
    • we have wizardamigos video interviews
    • we have launched websites and apps
    • we have people joining
    • we have different chapters opening
    • we have code published
    • ... and so on ...many types of news
  • but the new inspiration i got is that:
    • a user can send actions (to create events, todos, ...)
    • an app can send notifications (to inform about events, todos, ...)
  • a user might want to see the history of notifications, but also of his actions
  • but can we remove notification from the menubar too?
    • => instead we add a little 🔔 maybe next to the search bar?
    • => if user clicks it, it might just show the notification history below the timeline?
  • a notification in the notifications list can expand to show details, but should not show details on a new seperate screen

imagine the upper half of the screen was the timeline you showed instead of the browser
and the lower half of the screen would show the notification history instead of "beach vibes"
example

@serapath
Copy link
Member Author

feedback 2022.07.13

Worklog6 2022.07.05 10:14AM

  • Done Refined slidedeck, wireframes and Markdown files.

The slides are:

  • timeline
  • calendar
  • todo
  • events
  • notifications
  • search
  • filter
  1. I think the slide deck should only be done when all the wireframes and markdown notes are done to present the final output. Until then the slide deck has to change too much, so most of the work would be for nothing - so let's wait a bit for the next iteration :-)
  2. also, would you mind creating the next iteration of the slides for the slide deck with hackmd too?
    • hackmd can be used for notes or documents
    • but it can also be used to make slide decks
    • also, for the next iteration, a link to a markdown file should be added to each slide
      • of course only if necessary, because it contains details about the slide
      • the details are everything not visible in the slide itself
  • the markdown file you have has a short section for each slide
    • let's add that to the SPEAKER NOTES section when making the hackmd slides
    • once it becomes too much text for speaker notes, you can add an additional markdown document link to the speaker notes and all additional details will be stored there
    • but let's only do the next slide deck iteration when we are mostly done with the wireframe, because the slides should probably include screenshots of a "high fidelity" version of the wireframes :-)

@Helenphina
Copy link

Helenphina commented Jul 14, 2022 •
edited
Loading

  • Yeah, the Read more will lead to the link of that particular timeline where the user can read everything about that history.
  • Concerning the filter icon, are you saying that I should include a page that pops up which will have emoji or gifs
  • The toggle button for list/calendar, should it be included in the calendar screen alone or should it appear in all the screens ?
  • In the place you pointed out Calendar+calendar that when the user clicks on a calendar day, it will open a new broswer tab to show details/content. Am I to design the wireframe of this new broswer that will be opened

@Helenphina
Copy link

Helenphina commented Jul 14, 2022 •
edited
Loading

  • Okay...
    Are you saying that if I'm creating slides on the slide deck, I should as well create it in hackmd ?

@Helenphina
Copy link

Helenphina commented Jul 16, 2022 •
edited
Loading

Worklog72022.07.16 10:18

@serapath
Copy link
Member Author

feedback 2022.07.16

Worklog72022.07.16 10:18

Great, I love it. It was a good round of simplifying the timeline component :-)

Some additional feedback:

  1. there is no infinite scrolling as requested in the last feedback, it still says "View more..."
  2. the "Read more..." button to me feels like expand/collapse would happen, so maybe it needs more
  3. 👍 to the search bar and timeline button in the bottom. Thats perfect :-) thx
  4. 👍 for filter menu, but: i would still show search bar on top so user can click filter again to collapse it
  5. the calendar page does not need a "<" back button, because they can just navigate from the search bar below
    • otherwise, very good :-)
  6. :+100: i love how the notification icon is like a filter to show/hide notifications
  7. the "details" when clicking on an entry should just open the new browser tab, no overlay
    • if we feel a bit more information is necessary, maybe it can expand/collapse the entry
      • that way a bit more content can be shown
      • but not much, because otherwise it should just open the new browser tab
    • ...how it works (e.g. opening a new browser tab) can be explained in a hackmd that describes details in functionality for a given wireframe screen
  8. same or similar for the pop up notifications ... those will be shown outside the app
    • by android or whatever operating system a user uses
    • the notification bell icon can have a little facebook style number to indicate unread notifications
    • but if a user wants to read notification history inside the app, they can toggle the bell icon (=notification filter)
    • => no notification popup inside the app needed :-)
    • ...how it works (e.g. android notification) can be explained in a hackmd that describes details in functionality for a given wireframe screen

@Helenphina
Copy link

  • Should I remove the view more and put scroll ?
    • Or should I design a long page that shows that the page is scrollable ?
  • Should I remove the "Read more" and put "click on the this link to continue" ?
  • I don't actually get what you meant by there should be no overlay for the calendar details. Can you please send a screenshot of the overlay I included
  • Okay...so the pop up notification should be removed ??

@serapath
Copy link
Member Author

  • Should I remove the view more and put scroll ?

yeah, infinite scrolling, somehow :-)

  • Or should I design a long page that shows that the page is scrollable ?

isnt that the same. whatever works best, lets see.

  • Should I remove the "Read more" and put "click on the this link to continue" ?

or an icon that indicates it is openable?
how to other pages or apps do it?

  • I don't actually get what you meant by there should be no overlay for the calendar details. Can you please send a screenshot of the overlay I included

oh, its the last pages in the wireframes.
...but anyway, not important. never mind.

  • Okay...so the pop up notification should be removed ??

yes, because it is out of scope, because we will just trigger the standard android or browser notifications and they always look the same - no need to design them

@Helenphina
Copy link

Helenphina commented Jul 19, 2022 •
edited
Loading

or an icon that indicates it is openable?
how to other pages or apps do it?

Normally what I see in other apps is similar to clicking on the "Read more" and it will direct the user to the browser.
I haven't seen where an icon is being used for that unless it's a special feature you want us to input in the App

@Helenphina
Copy link

Helenphina commented Jul 22, 2022 •
edited
Loading

Worklog82022.07.22 01:55AM

@Helenphina
Copy link

Helenphina commented Jul 27, 2022 •
edited
Loading

Worklog9 2022.07.27 01:05AM

@Helenphina
Copy link

Helenphina commented Aug 3, 2022 •
edited
Loading

Worklog10 2022.08.03 02:05AM
Worklog112022.08.03 02:08AM

@Helenphina
Copy link

Helenphina commented Aug 6, 2022 •
edited
Loading

Worklog12 2022.08.06 07:50PM
Worklog13 2022.08.06 07:55PM

@Helenphina
Copy link

Helenphina commented Aug 10, 2022 •
edited
Loading

Worklog14 2022.08.10 08:55AM
Worklog15 2022.08.10 09:00AM
Worklog16 2022.08.10 09:05AM
Worklog17 2022.08.10 09:10AM

@serapath
Copy link
Member Author

serapath commented Aug 10, 2022 •
edited
Loading

feedback 2022.08.10

Worklog14 2022.08.10 08:55AM
Worklog15 2022.08.10 09:00AM
Worklog16 2022.08.10 09:05AM
Worklog17 2022.08.10 09:10AM

sweet. watched all the worklogs
watched all of it. great. pretty awesome.
I like the light theme and the dark theme

1. change filter & collapse/expand

i think i have two minor comments
timeline
filter

  1. on the first screen you see 5-6 types of different timeine entries, each has a different icon
  2. some of them are events, others are todos, ...but
  • on the filter screen, you can only select all or events or todos, but not the other ones
  • also - just from the filter names i don't exactly know which icon type it will filter for
  • so i think every time of timeline entry that has a different icon should also be available in filter
  • and the filter should not be radio box, but checkbox, because maybe if i have 5 types of timeline entries, i want to show all entryes of type1 and type4
  • so i want to select more than just a single filter type
    expand/collapse
    the other minor thing is the icon to expand/collapse
    the "x" icon to me feels like i would be removing or deleting the entry from the timeline
    so maybe we can find a better icon for expand/collapse

2. theme

task: can you now also add 2-3 themes where you use the crazy color palettes (maybe even with gradient) that you showed in your themes?

...just check the pictures in the links below for some inspiration for styles. Maybe we can try to make a few more themes, not just the dark and light theme that you did, but one for each theme shown in the pictures in the links below

and/or change to different but matching fonts
Next to it, we can also experiment with the different fonts :-)
Maybe some crazy new fonts that fit the above themes well?

Just to play a little bit how crazy we can go with this :-)
It is just a theme.

@Helenphina
Copy link

Okay....

  • So I should include filter for all the icons not just Events and Todo's ?
  • I should also remove the X Icon. But how exactly is this expand/collapse option going to work ? Is it when the user clicks on any notification it will expand, how then will it collapse back to it's original state without the user closing it back ? Or should I do it in such a way that it will collapse back after 5 minutes from the time the user expanded it ?
  • So concerning the background, are you saying that I should try out gradient as the background color instead of just light and dark mode ?

@serapath
Copy link
Member Author

for themes: if you can try to make the app somehow look in the style that those example links show, that would be cool :-) ...one after another

...basically: font, borders, backgrounds, etc... we could try that

...
not remove the xicon, but maybe replace it with something better.
did you google search for: "expand collapse icon" ? i just think there are better icons than an x

otherwise click to expand and click again to collapse is great

@Helenphina
Copy link

Helenphina commented Aug 16, 2022 •
edited
Loading

Worklog18 2022.08.16 02:00AM
Worklog19 2022.08.16 02:01AM
Worklog 20 2022.08.16 02:05AM
Worklog 212022.08.16 02:10AM

@serapath
Copy link
Member Author

feedback 2022.08.16

Nice. Love the gradients.
Love the new icon set, where each icon represents more the type of timeline entry. The subtle font changes are great too, so yet, we can finish this i think.
Overall I am very happy with the results :-)
Thanks.

@Helenphina
Copy link

Helenphina commented Aug 20, 2022 •
edited
Loading

Worklog 22 2022.08.20 01:19AM

@Helenphina
Copy link

Helenphina commented Aug 23, 2022 •
edited
Loading

Worklog 23 2022.08.20 12:50AM
Worklog 24 2022.08.20 12:05AM

@Helenphina
Copy link

Helenphina commented Aug 27, 2022 •
edited
Loading

Worklog 25 2022.08.27 02:10AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Helenphina Helenphina

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@serapath @Helenphina