Comments (14)
AdamJ
commented on May 31, 2024
Here is the Discovery GitHub Issue related to this: DISCOVERY: Create a Link Between Work Items
from fabric8-ux.
Mgranfie
commented on May 31, 2024
@joshuawilson Links UI has been revised and is ready for development
from fabric8-ux.
Mgranfie
commented on May 31, 2024
@kwk @nimishamukherjee @mindreeper2420 @SMahil Hi All, I have created a quick, low fidelity pass at a solution for drilling down on Related Links on a WI. Take a look and lmk if you have any questions. This is a first pass to keep us from being blocked.
from fabric8-ux.
joshuawilson
commented on May 31, 2024
@harrybabu please take a look at the above design
from fabric8-ux.
kwk
commented on May 31, 2024
Hi Monica,
thanks for sharing this. I wonder if the original WI shall be selected in
the list all the time. If we have a "back" navigation link, what's the
benefit of having the original WI selected in the list instead of moving
the selection to "LinkA" or "LinkB"?
Thanks
Konrad
…On Wed, Nov 30, 2016 at 3:11 AM, Joshua Wilson ***@***.***> wrote:
@harrybabu <https://github.com/harrybabu> please take a look at the above
design
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#29 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AALzgFlLqpfN9vSGQEYOPsxV-RskVfZxks5rDNtKgaJpZM4KKL3s>
.
from fabric8-ux.
Mgranfie
commented on May 31, 2024
It's a bit quirky, as we are working to get a base solution in the product.
The idea being, that you retain your original context, so like in sketch 3,
if you have drilled down 3 levels of links, you can easily, in one click
get back to your original WI. I don't know if this is perfect, but I think
for now it is useable. Based on this, what are your thoughts and
impressions?....
On Wed, Nov 30, 2016 at 7:00 AM, Konrad Kleine <[email protected]>
wrote:
… Hi Monica,
thanks for sharing this. I wonder if the original WI shall be selected in
the list all the time. If we have a "back" navigation link, what's the
benefit of having the original WI selected in the list instead of moving
the selection to "LinkA" or "LinkB"?
Thanks
Konrad
On Wed, Nov 30, 2016 at 3:11 AM, Joshua Wilson ***@***.***>
wrote:
> @harrybabu <https://github.com/harrybabu> please take a look at the
above
> design
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#29
issuecomment-263762107>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-
auth/AALzgFlLqpfN9vSGQEYOPsxV-RskVfZxks5rDNtKgaJpZM4KKL3s>
> .
>
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#29 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ARTwq8VH38SjtAoJ6tZ2c9Vbpso_IjFRks5rDWV7gaJpZM4KKL3s>
.
from fabric8-ux.
kwk
commented on May 31, 2024
Hi Monica,
I suspected the quick "go back to first context" the reasons for the way
you sketched it out. I only worry about the discrepancy of having made a
selection and showing something differently. If we do so, we might have to
mark the selected item from the list in a different color (e.g. grey). So
whenever it is highlighted using the primary selection color (e.g. blue)
you should see what you have selected in the details view. But whenever
you've moved on, it should have a "secondary selection highlight".
As an alternative, but completely changing the way we operate right now,
here's an actual example of navigating through "related artists" in the
Spotify Web Player. I searched for Bob Dylan and selected the artist, then
I clicked on the related artist "Paul Simon", from there I clicked on the
related artist "Simon & Garfunkel". Notice how in the picture only the last
visited item is shown: "Paul Simon".
Once I click on the greyed out area to the left, I get back to "Paul Simon"
and it shows me the greyed out "Bob Dylan" section on the left, from where
I started:
I've been getting used to this and it works good for me. Have you/we
considered such an approach? I don't quite remember all ideas brought to
the table.
Regards,
Konrad
On Wed, Nov 30, 2016 at 2:50 PM, MonicaGran <[email protected]>
wrote:
…
It's a bit quirky, as we are working to get a base solution in the product.
The idea being, that you retain your original context, so like in sketch 3,
if you have drilled down 3 levels of links, you can easily, in one click
get back to your original WI. I don't know if this is perfect, but I think
for now it is useable. Based on this, what are your thoughts and
impressions?....
On Wed, Nov 30, 2016 at 7:00 AM, Konrad Kleine ***@***.***>
wrote:
> Hi Monica,
>
> thanks for sharing this. I wonder if the original WI shall be selected in
> the list all the time. If we have a "back" navigation link, what's the
> benefit of having the original WI selected in the list instead of moving
> the selection to "LinkA" or "LinkB"?
>
> Thanks
> Konrad
>
> On Wed, Nov 30, 2016 at 3:11 AM, Joshua Wilson ***@***.***
>
> wrote:
>
> > @harrybabu <https://github.com/harrybabu> please take a look at the
> above
> > design
> >
> > —
> > You are receiving this because you were mentioned.
> > Reply to this email directly, view it on GitHub
> > <#29
> issuecomment-263762107>,
> > or mute the thread
> > <https://github.com/notifications/unsubscribe-
> auth/AALzgFlLqpfN9vSGQEYOPsxV-RskVfZxks5rDNtKgaJpZM4KKL3s>
> > .
>
> >
>
> —
> You are receiving this because you authored the thread.
> Reply to this email directly, view it on GitHub
> <#29
issuecomment-263857027>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/
ARTwq8VH38SjtAoJ6tZ2c9Vbpso_IjFRks5rDWV7gaJpZM4KKL3s>
> .
>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#29 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AALzgLzNQw1nxXPWruOnwkuydRJKTtMgks5rDX8LgaJpZM4KKL3s>
.
from fabric8-ux.
Mgranfie
commented on May 31, 2024
@kwk Thanks for the ideas and examples!!
I like using the lightbox idea to give focus to the WI. However, the idea of leaving the list of WI's int he Backlog, an Iteration or an Agile Board column, exposed and accessible, is to allow users to switch between WI's, leaving the WI open, without having to navigate in and out of a UI, for easy context switching. The equivalent in SF might be a list of Genres on the left. But because SF is not a productivity tool, the use case scenarios are a little different and focused more on browsing and just the drill down activity and not switching Genres.
I was curious about your idea, so I mocked up the WI with a light box and the feedback was that the implied behavior when a lightbox is presented, is that clicking out of the WI would close the work item and that they would think they could not click between work items, to change context, limiting the ability to traverse WI's and leave the WI detail pane open.
This is the screen that I used to match the SF solution: Again, their use and intent is a little different than ours. But I think we still might be as cool as them!
To address your concern on how to keep the context and know you are in a different WI, a couple of us brainstormed a little and talked about including the original WI Title on par with the < Back button, here in this sketch, which confused people. We also considered breadcrumbs, but these will grow long and unusable.
In revisiting the goal of this solution, was to address a 2 - 5 drill down level in a simple and direct way, while keeping context and still allowing the user to traverse WI's in the list. I agree that this doesn't scale and moving forward may need additional thought, if we find that users are conducting deeper drill downs.
Based on these goals and functions, and your use of SF v.s the use cases here, any more thoughts or ideas that might still influence? If not am thinking for this pass, the we run with this as is, see how it feels in use and iterate from there? ....
from fabric8-ux.
kwk
commented on May 31, 2024
Hi Monica,
thank for exploring so many directions and for being open to feedback.
Maybe this annotated image shows what subtle change I had in mind when:
[image: Inline image 1]
Most of it has to do with the changed color of the selection.
If I understand you correctly, graying out the list of WIs will disturb the
user as she/he thinks no selection can be made in it, right?
As a visual hint, my change to a more subtle selection color shouldn't
change the user's way she/he thinks about the list. A selection can still
be made.
Regards
Konrad
…On Wed, Nov 30, 2016 at 8:01 PM, MonicaGran ***@***.***> wrote:
@kwk <https://github.com/kwk> Thanks for the ideas and examples!!
I like using the lightbox idea to give focus to the WI. However, the idea
of leaving the list of WI's int he Backlog, an Iteration or an Agile Board
column, exposed and accessible, is to allow users to switch between WI's,
leaving the WI open, without having to navigate in and out of a UI, for
easy context switching. The equivalent in SF might be a list of Genres on
the left. But because SF is not a productivity tool, the use case scenarios
are a little different and focused more on browsing and just the drill down
activity and not switching Genres.
I was curious about your idea, so I mocked up the WI with a light box and
the feedback was that the implied behavior when a lightbox is presented, is
that clicking out of the WI would close the work item and that they would
think they could not click between work items, to change context, limiting
the ability to traverse WI's and leave the WI detail pane open.
This is the screen that I used to match the SF solution: Again, their use
and intent is a little different than ours. But I think we still might be
as cool as them!
[image: wi_links_nav_a]
<https://cloud.githubusercontent.com/assets/18149547/20765996/a1dde904-b702-11e6-9880-29b58106dfbb.png>
To address your concern on how to keep the context and know you are in a
different WI, a couple of us brainstormed a little and talked about
including the original WI Title on par with the < Back button, here in this
sketch, which confused people. We also considered breadcrumbs, but these
will grow long and unusable.
[image: wi_links_nav_b]
<https://cloud.githubusercontent.com/assets/18149547/20766406/5f7dbd08-b704-11e6-98bb-2fcea1e149f4.png>
In revisiting the goal of this solution, was to address a 2 - 5 drill down
level in a simple and direct way, while keeping context and still allowing
the user to traverse WI's in the list. I agree that this doesn't scale and
moving forward may need additional thought, if we find that users are
conducting deeper drill downs.
Based on these goals and functions, and your use of SF v.s the use cases
here, any more thoughts or ideas that might still influence? If not am
thinking for this pass, the we run with this as is, see how it feels in use
and iterate from there? ....
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#29 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AALzgEzfRU_9jfVmwIh8a8IfUDMYD-voks5rDcgHgaJpZM4KKL3s>
.
from fabric8-ux.
Mgranfie
commented on May 31, 2024
@kwk am interested to see your idea, the image did not show up... can you post again?
from fabric8-ux.
kwk
commented on May 31, 2024
@Mgranfie Here's the image.
from fabric8-ux.
Mgranfie
commented on May 31, 2024
@kwk Ah OK, great picture! Remote design can be a challenge : ) Sure I am good with bumping down the highlight of the individual item... let's go for it and see how it feels!
from fabric8-ux.
kwk
commented on May 31, 2024
@almighty/ui is anyone willing to take this over to the actual frontend?
from fabric8-ux.
Mgranfie
commented on May 31, 2024
A screen was added to describe the behavior for creation of links in context. Only mocked up in the DT only version, but applies to the Mobile version as well.
https://redhat.invisionapp.com/share/M28SSTLRJ#/212315850_DesktopAddLink_09
from fabric8-ux.
Related Issues (20)
- Wireframes: Designs for email verification status HOT 3
- Code Quality: Update Stylelint to Match Code Guidelines HOT 1
- VISUAL DESIGN: User Settings HOT 1
- HTML/CSS: Space Dashboard Updates HOT 11
- DEV: OSO connect automatically, remove getting started page from flow HOT 2
- WIREFRAMES: Permissions wireframes HOT 3
- RESEARCH: Navigation A/B/C test script
- Prototype: Navigation #3 HOT 3
- TEMPLATE ADDITIONS: Add updated pages to the template
- Design: Deployments screen expansion behavior HOT 2
- Design: Reaching or over quota experiences HOT 1
- Copy: Getting started - overview tour HOT 1
- Dev: feature flags for dashboard HOT 1
- Verify Consistency of Modals vs Overlays HOT 2
- Dev: Create Workspaces Card HOT 1
- Dev: Space Dashboard HOT 3
- Update Planner to use CSS animations rather than Angular animations HOT 1
- DESIGN: UX Refinement of Spinner HOT 2
- Create template for user invitation e-mail HOT 4
- [UX issue] It's hard to follow the issue title in planner on item details page HOT 2
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 fabric8-ux.