We design the help centre for our product. We have an idea to put each long articles, instructions and the form to leave feedback to accordions. Will be it convenient for users? I think that if there are a lot of accordions with long articles, it will confuse the user.
Should it be a classical article on each page with a menu on left or right hand with breadcrumbs?
The mockup is the below
Its not uncommon that Help Centres or FAQs pages to have this style (long text in accordions). So users will likely be familiar with it.
However it doesn't mean that it is the right solution (for you). If there are alot of questions this can be come overwhelming and users will struggle to get to the information they need quickly.
There are alot of other help centre solutions out there that you could consider when designing this:
All of these break down the content into categories for users so it is easier to digest for them, in order for them to get to the information they need quicker. Im not saying these are the right solutions for your product but it may help when looking at this page.
When selecting a UI pattern, think about its specific advantages and disadvantages related to the content you're planning to display within that pattern.
The ideal case for an accordion-style UI is:
The last point is very important: if the accordion extends beyond the viewport, you can cause the user quite a bit of inconvenience: say they've expanded the first panel, which is a long text which pushes the second panel offscreen. They read that, then want to expand the second panel: the first one collapses while the second one expands, and the text they intended to read falls offscreen and they have to scroll up to find it again. (You can mitigate this somewhat by setting a maximum height for the entire accordion and making the individual panels scrollable, but interior scrolling panels can cause other UI issues where the user intends to scroll the page but scrolls the panel instead, or vice-versa.)
So with that said, even with your very brief description of the content you're considering putting in an accordion:
long articles, instructions and the form to leave feedback
...we can tell that at least three of of the four points above are not met: the user may very well want to search the article text or compare text across articles (point 1); the content panels are not at all related to one another -- you have articles, instructions, and a feedback form (point 3); and they won't all fit onscreen (point 4). Point 2 may or may not be met, we can't tell from this description whether the content is generally sequential.
Therefore: no, an accordion is not an appropriate user interface for this purpose.
The purpose of the Accordion UI pattern is to enable fast access to the content behind headlines while maintaining equally fast access to the other items in the list.
One of the best examples of the accordions with the variable content size I can remember is Google Inbox.
Actually, they implemented hierarchical accordions. In the given example I have opened the group of Finance tagged messages.
Let's check their solution against the first 7 Usability Heuristics.
Visibility of system status. This one is done perfectly on a desktop. You clearly see where you are inside the app.
Match between system and the real world. Material Design reflects qualities of the physical word to form a spatial model that is familiar to users and can be applied to convey elements/components hierarchy.
User control and freedom Again, you can access all necessary actions, previous or next items and close the content easily. Due to the limited space it is a bit more complicated on mobile.
Consistency and standards Solved well.
This point is probably is the most questionable in your case. How you are going to deal with similar cases in other part of the app or web site.
Error prevention This one is more about how fast the user can close the content if it is not what is needed. In case of Inbox app you can click on any element outside of the expanded area.
Recognition rather than recall The accordion pattern if it is consistently implemented is quite proliferated to be considered safe here.
Flexibility and efficiency of use This is basically why this UI pattern was invented.
Usability wise it is good to use. One can think that the accordion plays better if you have many items and the content length of these items is quite small so the user can jump to the next item right after after reading the open one. I think if the overall navigation is done right the accordion is also good for much longer articles as showing next items after the open article removes additional friction of going to separate menu or page to consume more content.
