wireframe-app-bar-actions

[ninabreznik]

@todo

• [ ] make a list of all available action icons for each screens context in the entire datdot app
• [x] on the "plan screen": the "navigation/action bar" on the bottom is great but:
  • should not "float", but rather expand or look like the initial "action bar" that has the search and plus button to start new plan. Maybe merge them together.
  • [x] also it should include all actions (back/forward/add button when e.g. in "data config" step while making another plan sub card)
• [x] "notify icon" in "action bar", which when clicked expands/collapses "activity log" instead now.
• [x] the "action bar" on the bottom can adapt based on context
  • [x] it can include "navigation" too like "cancel", "previous", "next" when in a wizard
  • [x] try out: to use "progress bar steps wizard" to naviagte and is included it in bottom nav bar
• [x] the "stop plan" icon could also be a " pause symbol maybe?
  • because completely stopping it is already "delete plan" i guess.
  • also to resume you have the > play button, so pause makes even more sense maybe :-)
  • see https://youtu.be/qO3JLZyJcNY?t=182
• [x] the activity log should not have a "back button", because you just click the notify icon again to collapse
  • [x] the settings/options icon on top can maybe move to the action bar on the bottom as well
  • [x] also maybe scrolling is enough so we don't need a timeline with (january and days)
  • see https://youtu.be/qO3JLZyJcNY?t=254
• [x] "next" button should be disabled while there are warnings.
• the little (edit/delete) buttons in the corner of data cards or next to input fields - but it is also a bit crowded.
  • [x] what do you think about click/touch to select a "data card" instead
  • [x] and then you can see "edit/delete/add/..." actions below in action bar.
  • [x] maybe action bar can get an additional row for more space when there are many actions?
  • [x] als the action bar should only display actions which make sense in the current screen and step
• [x] another example: when user clicks to select pending activity item, for as long as the pending activity item is selected, a cancel action button could be shown in action bar?
• [x] design action bar
• problem: some screens need mor actions then what fits into the action bar.
  • 
  • the picture above shows icon groups
  • the picture above shows active icons with a colored underline
  • the picture above shows little "pins" in the corner of icon groups
    • but even every single icon could have such a pin and maybe it could light up to show its active
  • the picture above shows the android icon menu in the center of the bottom menu
    • maybe such an icon in our app could open an "additional more action icons menu"
    • [ ] maybe we can activate or drag'n'drop or select such additional actions to customize our action bar
      • that kind of action icons menu would show only all the actions from the current screen
  • [x] some action icons can expand to show more related/sub action icons
  • [ ] some action icons in a group can be selected like radio buttons (only one of many)
  • [x] some action icons in a group can be selected like checkboxes (multiple or all of many)
  • [x] some action icons might expaned a form or additional action bar in a new line on top
  • the icons we have could be:
    • write transactions that cost (e.g. submit plan)
    • wizard form starting actions (e.g. edit/add plan)
    • filter/select actions to change what is shown in the current view
    • sort actions (to sort shown icons based on comparisons)
    • layout actions (to change the layou from "list" to "cards")
    • add/remove widgets actions (e.g. show only plan list, show activities too, show map chart too)
    • select whats shown by default (e.g. on plan list screen: map chart + plan list as cards)
    • show a little notification counter next to an item (how many triggered actions are pending)
    • show a little notification counter next to an item (how many unread notifications exist)
    • ....
• [ ] plan-screen-actions
  • [x] the tabs (performance, location) should probably be below, because now they are more "navigation bar")
  • [x] also it doesn't need to show "Plan1" in the map on the bottom left, because its already selected above
  • [x] maybe in the main plan screen action bar, the "play" button can change into "pause" when user clicks
  • [ ] also maybe the action bar already has two parts and it should improve grouping:
  • [ ] actions that change something like transactions (e.g. pause/play/delete/add_plan) icons
  • [ ] actions which just change the view (e.g. sort/filter/search/...) icons
  • [ ] plan-screen-activity
    • also on the activities screen
    • [ ] there are lots of icons, but sometimes i forget what they do, so maybe we need:
    • [x] a HELP icon?
    • [x] when you click HELP, you can then go into help mode and click any part of the screen
      • like other icons, etc..
      • [x] and when you click in HELP mode, it shows you a "info notification" to explain what it is
• [ ] alternative
  • [ ] maybe the action bar has a "..." (more) icon and when you click it, it shows a menu with other icons
  • [x] in that menu, icons have a text to show what the actions means
  • [x] and you can select/unselect them to add to the "action bar" as quick action icon

  • [x] so basically you can customize your action bar a bit

USER

Default

1. account action datdot-ui #47 Account action
2. activity
3. custom action bar datdot-ui #54 Custom action bar
4. help datdot-ui #29 notifications/help overlay box

Account information

1. account action datdot-ui #47 Account action
2. activity
3. line chart
4. treemap
5. transactions list
6. sort up
7. sort down(default)
8. filter
9. custom action bar datdot-ui #54 Custom action bar
10. help datdot-ui #29 notifications/help overlay box

PLANS

Default

1. activity datdot-ui #15 plan - activities
2. create new plan `datdot-ui #43 plan - add/edit - step: plan name
3. custom action bar datdot-ui #54 Custom action bar
4. help datdot-ui #29 notifications/help overlay box

Plans information

1. activity & counts datdot-ui #15 plan - activities
2. plans list datdot-ui #49 Plan - map
3. map datdot-ui #50 Plan - map
4. line chart datdot-ui #51 Plan - map
5. search datdot-ui #52` search action
6. sort up datdot-ui #55 Sort action
7. sort down (default) datdot-ui #55 Sort action
8. filter datdot-ui #53` filter action
9. play, pause, edit, delete for plan datdot-ui #29 notifications/help overlay box
10. create new plan `datdot-ui #43 plan - add/edit - step: plan name
11. custom action bar datdot-ui #54 Custom action bar
12. help datdot-ui #29 notifications/help overlay box

WORK

Default

1. account action
2. activity
3. create new job
4. custom action bar datdot-ui #54 Custom action bar
5. help datdot-ui #29 notifications/help overlay box

Work information

1. account action
2. activity
3. work list
4. line chart
5. bar chart
6. job activities
7. search
8. sort up
9. sort down (default)
10. filter
11. play, pause, remove, edit for job
12. create new job
13. custom action bar datdot-ui #54 Custom action bar
14. help datdot-ui #29 notifications/help overlay box

Custom action bar

Add action

Display or hide

Remove action

[ninabreznik]

by @serapath

telegram app example 1 with one message selected

telegram app example 2 with two message selected

action bar example 1

action bar example 2

action bar example 3

action bar example 4

action bar example 5

action bar example 6

action bar example 7

[ninabreznik]

by @serapath

@fionataeyang (see images in next comment above)

telegram app example 1 & 2

• they have an action bar that adapts based on the possible actions and i'm using many messengers
  • e.g. whatsapp, discord, signal, gitter, telegram, but also facebook and twitter messeges
  • => every time i use the telegram example i find it to be the most convenient and logical one

action bar example1:
maybe we could consider to make replace the search bar with a search button

• now you click on the search bar to give it focus so you can start typing
• then you click on the button to show an input field form with active focus so you can start typing Thats the same amount of clicks, so it could be fine :-)

action bar example2: what if it shows the same bar as example1, that bar already has a (+) button.
and then next/previous/cancel have to go into the same line as the progress circle bar, like:

[x]        [<]        (duration)-->(swarm)-->**(data config)**-->(publish)       [>]

action bar example3 nad example4: i love the icons add/edit/delete ... example1 already has add/search Maybe we can merge it and make the bar look like example1 but include the add/edit/delete actions?

action bar example6 and example6: great. the symbols with play and pause are good.

• [ ] only the gray background almost looks like the regular gray background around map and rest
  • so at first i didn't even notice it is part of the "action bar". (maybe background should be white?)

action bar example5: Maybe this can be changed. We have most general on bottom and more specific on top.

• [ ] So the "sub progress circle bar" might need to go on top of the first "progress circle bar"
• [ ] also the numbers (3.1,3.2,3.3,3.4) dont make much sense if there are no numbers on the first bar
• [ ] it still looks to messy, maybe instead of circles we can try something else, see below

---

some more inspiration

---

---

[ninabreznik]

by @fionataeyang

Latest

Steps

For plan

Sub steps

For user

Create new account

Import account

Actions

For default

For plan list

custom action bar

Activity

For plan

For user