Comments (9)
Do we need a new design for this ? I can make it just not sticky...
from a4-opin.
@nicoladimarco What do you think? Maybe some small changes (smaller logo?) could already make it smaller?
from a4-opin.
I would suggest the material design approach on mobile:
- the logo appears only on the header on the landing page
- the logo disappears from the nav
- homepage shows only the hamburger icon (could eventually show also opin as page title)
- other pages show back icon, page title and when needed a contextual menu.
from a4-opin.
Hey @nicoladimarco thanks for the suggestion. I am a bit skeptical if a sticky header without any reference to OPIN will do the trick, as page titles mostly don’t fit in there and it then would be perceived as even more wasted space and it makes the design very generic. I would probably make the header less high or not sticky. If we remove the OPIN logo from the header, though, we should definitely include it in the menu once it is opened.
In general the question is, does jumping between the different sections of OPIN.me so important that it should always occupy 10–15 % of your screen. I would answer that with a “no”. Since we don’t have a very hierarchical navigation structure, I think the main way is navigating via links in the content. Maybe we should just have a little sticky “back to top” arrow in the bottom of the screen so that the jump to the menu/top of the page is easy?
from a4-opin.
Hey, @rittermo I am also quite skeptical about your opinions:
"page titles mostly don’t fit in there.
it then would be perceived as even more wasted space.
makes the design very generic.”
What I suggested is the most reasonable and widely adopted solution for mobile navigation. It is proposed in all major UX design guidelines including Google and Apple.
I agree that we can put the logo, not only on the homepage, but also inside the menu when it is open.
Sticking a 50px menu on the top and indicates the page title (i.e project detail, proposal detail, about etc.) is fundamental for mobile navigation especially in such a standard product.
“back to top” arrow is deprecated since a while and usually indicates a lack of decent information architecture. This is also why we introduced pagination for proposals and comments instead of infinite scrolling.
from a4-opin.
Hey @nicoladimarco,
I know that your suggestion comes from Google’s Material Design approach, which still heavily draws on app design principles not on web design. I think the two have some fundamental differences that Google has not always unified well. Using these sticky headers inside an app (i.e. the browser app on a smartphone), which already has sticky elements is often problematic, in my view. Also, page titles tend to be very long and often confusing (because of SEO, bad naming, long titles, etc.) and that’s why most apps and websites don’t show them prominently or not at all. Even major apps like Facebook or Instagram don’t rely on that concept of a sticky header anymore, but one that minimizes when a user scrolls (also a really big and problematic UX behavior).
By generic design I mean that the header looks like a Material design example without much connection to OPIN.
However, we can keep the sticky header. I just want to make sure we are aware of it‘s downsides. Personally, I think that in our case it distracts more than it helps, but that’s just my two cents.
from a4-opin.
Hey @nicoladimarco, do you have the design and concept ready for the material design header? @vellip wanted to implement it and as I said before, I think it‘s fine to keep a sticky header and use the material design approach.
from a4-opin.
@rittermo Hey Moritz, let me finish with the Admin Interface and I´ll provide a clearer concept tomorrow.
from a4-opin.
Will be dealt with in #310
from a4-opin.
Related Issues (20)
- Header Title in Manual Section Page is not centred
- In the Poll Blueprint we refer to the OPIN App HOT 2
- ensure info block works in all variations
- No arrow on dropdown select in community debat and possible elsewhere? HOT 2
- comments_async/comment/edit-menu: spacing div makes mobile design look a bit off HOT 1
- Icons brocken on poll HOT 1
- in project creation Richtext Picture upload picture is broken /weird HOT 4
- Info block horizontal Picture is to high HOT 6
- Message block in contact block not centered HOT 2
- MEGA thread - Opin problems to solve HOT 2
- Password reset attempt for non-existant user causes 500 and sentry error on DEV, unstyled response on STAGE/PROD
- OPIN Stage pictures in tiles are not sharp HOT 1
- Link in Notifaction leads not to comment HOT 2
- mobile stacking and padding on blocks
- Info message wrong in private or semi public project during rating phase HOT 4
- text and image not aligned in block rich text
- Opin Poll: Buttons look a bit off/ description are in a difficult contrast
- stop using deprecated properties from a4 HOT 1
- #7942 [OPIN] Stop the registration of new accounts
- Investigate profile names in the URL
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 a4-opin.