This web app has 2 menus essentially, the one on the left hand side (3 items) and the the user profile menu also on the left (drop-down opens once you click on picture).
What would be the best way to display these on mobile? Hide both elements, move them around? Looking for the best practices for something like this. Thanks!
Not sure there's a 'best way', here's one idea to get you started though.
Related
I have a complex react app which I would like the user to be able to navigate through the focusable elements using the keyboard arrows. (Like the tab does)
I have been searching the web for hours to find a solution for this, but all answers solve it for a single component/list/grid, etc'. I want it to work in the entire app which is made of many big and small components. Any way to achieve this?
Please note that using the arrow keys wouldn't really help people using assistive technologies. One reason for that is e.g. in a screen reader users often navigate a page using the arrow keys within the so called browse mode. Though one can change from reading mode to focus mode so that the application will handle the arrow keys the authoring practices require an application to be navigable by tab. Also what should happen, if the user hits a grid with the arrow keys? I as blind user would expect that i navigate the grid with the arrow keys instead of being brought to another control. Please see also https://www.w3.org/TR/wai-aria-practices-1.1/
Currently we have side menu which when it opens, it makes the form slide in the corner too like in fb app. I wonder if we can slide the side menu on top of the form itself like in play store or many other app which is way cool.
That's a frequently asked feature and we hope to add it in the near future although we have a very deep pipeline of RFE's so I'm not sure when we will get around to doing it.
I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)
I'm building this website using bootstrap.
The problem is that i have nested drop downs. The dropdowns look nice and not cluttered in desktop version.
However this is how it looks in mobile:
They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.
I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.
Question:
I'm really not experienced in developing UI. Is my approach sufficient?
How should i solve this problem?
I use a sweet JS plugin that plays nicely with Bootstrap, called Snap.js. If you've ever used the Facebook iOS app, you'll be familiar with this layout. There are some great demos here.
I am creating a tablist for a website, and am looking to modify the experience on a mobile.
I am looking to create a select list for the navigation tab items.
Is is valid to keep arai roles such as role='tab' for option's
Thanks in advance
Ok im thinking that an accordion on mobile may be a better fit. That way i can use the same aria roles, similar markup and have a better ui on the mobile.
Anyone have anything to add?
EG.
http://test.cita.illinois.edu/aria/tabpanel/tabpanel2.php