Depending on if a user can go a to a previous step, having a "BACK" and "GO" button to navigate through each view doesn't give much insight, but it would be helpful to describe each "view" with a specific name. That way, you could name each "BACK" button the previous view, and each "GO" to the next view. If you give each view a name and display what category they are currently viewing, users will always know where they were previously, where they are currently, and what the next step will be. Then after they are all done, make the button describe what they will see when they submitted. (i.e. "VIEW REPORT", "SEND DATA") (Also, progress bars are extremely helpful to users to know how far they are along the sequence.)

There are a couple of ways to lay out such information, one factor that would certainly make a difference is what device are you designing this for - mobile /desktop or something else. For desktop web apps, common layout patterns that can solve this problem are: Accordion Layout : https://semantic-ui.com/modules/accordion.html#/examples Mater-Detail Layout : http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns Column View (this is what I see in your illustration): http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

I think you have the problem that the page is in view mode. Let the user switch to edit mode with a button (edit) on top. Pressing this button will make the fields editable as @Danielillo suggested.

Multiple CTAs is not good design The idea of a prominent CTA button is that the user knows exactly what to do next. If you provide multiple CTAs with the same prominence/weight, you offload it to the user which action is the most preferable. Ask yourself, what would 80% of your users like to do on this screen? Then style that button as the primary CTA and the rest as secondary. Alternatively, if there is no clear preference, you can also style your payment options as a selection (radiobuttons) with a call to action (Pay).

I am not sure for a specific and "correct" naming of this element but I would call it probably a card since I would be desperate to find a better naming for it. You could see if that fits your need.

Tell them with text, or show them with a control. I don't know what the rest of your UI looks like, but if you need to make it clear, you could try a couple of approaches. A: UI text can be small, and live above the table, telling them what's possible. B: Sort control, starting with your applications 'default' (a tricky word here, I know), can show them that a sort is possible. By using the control, the user can always go back to 'default' (meaning your applications algo sort), which might be helpful(?).

Because not everyone is working alone. Of course when you're the developer of your own design you don't need to sketch everything. I don't need to do it for my own app I'm developing either. But in a workplace where you are only the UX designer and not the developer, you do it as a handoff for the actual developer. And for that purpose Illustrator is absolutely horrendous. You don't see any font, color or margin information. In Figma you do, you can click into every object live in the file and check its properties. Check this link to see what I mean: https://help.figma.com/hc/en-us/articles/360055203533-Use-the-Inspect-panel (Aside from that Illustrator is not designed for layouting and thus is absolutely inefficient at it in comparison to Figma, see e.g. auto-layout)

It depends on the tradeoff you need to account for. It looks like in your case, you have a potentially complex form, that doesn't auto save. One thing you can do is to separate navigation from saving. You can group navigation together, and can keep save on its own. You can also add a visual indicator on the navigation buttons to emphasize the direction that the user is moving along in a linear process. This will make it easier at a glance to parse the difference between saving and navigating the form: This way save is more prominent (because the biggest frustration would be doing the work and not saving), whereas the navigation is together to its left. If you have conditional elements that depend on completing a sequence before navigation to the next stage, you can disable the save button until the user completes required fields.

Align the horizontal rules. Place the headlines and the text underneath the lines. Let the copy hang from the rules so to speak. That way you box the content regardless of how long the texts are.

I think in the past there were more differentiation between web components because there were very specific rules around how they were meant to be designed and implemented. However, in the modern minimalistic and flat design world we find that many components look and behave in a very similar way. So rather than trying to understand what the terms mean, think about the behaviour of the components. You've pointed out the use of arrows or touch points to trigger the expansion or collapse of the sections or contents that they wrap around, and then there's also whether you can have multiple sections expanded at the same time or if only one section is open at any time (I believe this is the classic behaviour of accordions). Another consideration is whether the heading or label for the component sits within the same container or outside of it. What you need to do if you want to use two different components for your design to allow progressive disclosure (i.e. let users decide how much they want to drill into the content) then you need to establish two components that have distinct visual and behavioural designs. My suggestion would be that you stick to one only, unless there is a good reason to have two. Here is one good reference about https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/ from Smashing Magazine that summarises the key points.

Without analyzing in-depth the classification procedure, something that only the person in charge of the project can understand 100%, a couple of suggestions come to mind after seeing the interface. Organization First, I would try to organize all the content by defining well-differentiated areas between action and information. After watching the video, knowing the user must go from top to bottom to insert data, I would avoid them doing it from left to right. I think there is enough space to set the action and info columns. This helps to: Clearly see the data and the interrelationship between them Perception: it's about teachers, and all teachers use the outer left margin of the page for side notes. Gamification Apparently, it's a somewhat tedious task: reading all the content is already a bit tiring, interpreting it, classifying it, etc. Consequently, I would try in the data to insert, if these respond to a clear pattern, for example numbers from 0 to 9, avoid forcing to incorporate it manually, and look for click-type options. There are several ways to achieve this, perhaps online sales platforms serve as an example to get ideas.

From where did you get putting dates in the same line is not correct? Nearly all travel websites have the dates arranged in a line, which, in addition to following the reading order from left to right in continuity with the rest of the information, perceptively helps to better interpret which is the beginning ← and which is the end →. What you can propose is placing the label on top:

Any real task is not 'settings mixing' but it is 'settings grouping'. Grouping doesn't take in mind visual appealing as the main goal. Good user experiense is the main goal. Suppose you have options which are cross-dependant. If you change 'Allow Option Two' in your form and 'Type of Option Choosen' become enabled is it usable to jump somewhere to edit it and then jump back to proceed with next setting whish is 'Allow Option Three'? If possible you may use another techniques to achieve your goal. But this depends on your real options.

There's an answer right in front of you. In the field for writing questions or answers in SE, when adding an image, the Add image button is grayed out (disabled) if there's no image placed: And gets enabled when there's a picture to add:

There are two ways to work on https://www.nngroup.com/articles/journey-mapping-approaches/ : assumptive, and research-based. In an assumptive journey map, you are working with a group of internal stakeholders and building the map based on all of the assumptions that they make about the persona on his or her journey. These assumptions can (and probably should) be validated with user research later. After you create the journey map as a group, you can use dot voting to identify pain points. The phase or action that receives the most votes would be your "lowest point" in the journey. In a research-based journey map, you would interview several users who represent your target persona, and ask them specific questions about each action and point in the process. At the end of learning about their process, you'd ask them to tell you which part of it needed the most improvement. You might receive a lot of different answers, so if you have a lot of "low points" without any really standing out, you might still want your stakeholders to come back and add additional votes to help make a decision.

Generally speaking there are a bunch of UX principles and best practices advocating for a minimalistic UI. This makes sense in terms of https://uxplanet.org/cognitive-psychology-in-ux-cd7afed87886 (viewing Attention as a finite resource), perception and memory, https://www.interaction-design.org/literature/topics/fitts-law#:%7E:text=Fitts%27%20law%20states%20that%20the,size%2C%20the%20longer%20it%20takes. (advocating for larger target areas, hence less items in a fixed real estate), https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users#:%7E:text=Hick%27s%20Law%20(or%20the%20Hick%2DHyman%20Law)%20states%20that,can%20be%20vital%20for%20safety. (less choice leads to quicker decisions), a UX technique called https://www.interaction-design.org/literature/topics/progressive-disclosure , which means that large amounts of information should be split into several steps, https://uxdesign.cc/jakob-nielsens-eighth-usability-heuristic-for-user-interface-design-62fbbe7aa734?gi=36bec78df153 , and many other guidelines. Taken together, these principles mean that we often aim to reduce the number of items on display for our main personas (target user audiences), deferring more advanced options to more remote locations. https://www.nngroup.com/articles/flexibility-efficiency-heuristic/ promotes the use of hidden shortcuts and other "power features" for more advanced users, without using up the real estate seen by all users. All of these decisions require a fine balance which is ultimately at the discretion of the designer - because displaying all of these actions for you also means providing a more cluttered and difficult interface for all users, including yourself whenever you don't need these options (which is probably 99% of the time). Ideally the exact point of equilibrium will be based on user research, but even then it won't fit all of the users all of the time. Specifically Apple is sometimes https://www.quora.com/With-Apple-being-so-rudely-paternalistic-against-its-customers-and-treating-them-like-little-children-why-are-adult-people-still-buying-their-products , and only supporting the lowest common denominator, or what they view as the main use case, making it difficult to do anything they treat as a non-standard way of doing things (AKA " http://edition.cnn.com/2010/TECH/mobile/06/25/iphone.problems.response/index.html#:%7E:text=You%27re%20holding%20it%20wrong.,e%2Dmails%20from%20customers%20himself. "). Microsoft typically adopts a "wider" approach, supporting more use-cases with more ease, at the price of making the main ones less well-tailored to the persona, because that's the tradeoff you get between a generic and a bespoke UX. I don't work at Apple, but I believe this is why they hide things in menus :). *EDIT As some commentators have pointed out, one of the most important UX principles is https://uxplanet.org/difference-between-findability-discoverability-in-less-than-2-minutes-baabfd06d988 , meaning that options need to be discoverable directly via the UI without involving additional means. In your case this principle is sacrificed in favor of others - here it is at odds with the Minimalism idea, because it requires more use of real estate. This is not uncommon, as many UX principles can contradict each other, and the gist of the whole domain is to manage these tradeoffs according to the relevant goals. Since we aren't aware of the business goals behind this decision I personally don't think we can state that this is necessarily "bad UX", and as others have also pointed out, some of Apple's business principles are to discourage the use of other vendors' devices with its OS - so this decision may have been made to serve that purpose.

The borders around buttons and call-to-actions provide a much clearer representation of the physical contact/touch point for the user, although generally the user interfaces on mobile is laid out in a much tighter space so it may not matter as much as when you are designer on a desktop for click interactions. The combobox is a term used for specific types of dropdown input control that can be combined with other features, such as a search or multiple selection rather than just a simple dropdown list from which you can select one item only. However, depending on the operating system or design framework you use it also might mean different things. I think you can keep the function of the dropdowns (or combobox) similar to the app you are trying to mimic, but in terms of the style you should probably consider whether you are also trying to mimic the app or doing something different, in which case the border around the controls might not suit your particular purpose.

I find it is useful to imagine what the options would be if they were numbers instead of words. Let's say your question is: "On a scale of 1-5, how likely are you to buy this product again?" Now, you would never even think to question which order to use. The answer would always be start with "1" on the left, and "5" on the right (assuming a left-to-right language). So the trick is, don't let "words" convince your that it should be any different. If I change the question: "How likely are you to buy this product again?" Imagine them as numbers. It would seem fairly obvious that "very low" should equal 1, and "very high" should equal 5. And there you have your answer. In addition, as a rule of thumb: if you can't see an obvious reason to chose one order over the other, then there is a good chance that the order doesn't matter anyway.

I think your basic idea is fine, I'd make these changes: More specific tag group labels like "Using these subjects", "Using these activities", "With these goals", etc. Make the screen narrower. The tag input fields might possibly be half their size. Maybe you could add a little more padding and white space around certain elements to see if that makes it breathe a bit more. The example looks good but to avoid "cards on cards" you could remove the elevation and just keep it as a flat box. If you want users to see more examples, perhaps it could act like a carousel and the user could click through examples using forward and backward buttons.

I think it's more of an aesthetic or fashion decision than something inherently functional. Anyway, here's an argument. Most of the components in an interface are framed within an orthogonal grid, such as the example in the question. In fact, the screen itself responds to Cartesian axes, we have not yet reached the oval or formally fluid screen. This image shows a basic layout grid with its respective items where both elements are clearly perceived: This type of layout not only emphasizes the structure but interferes with a clear perception by adding a third element: the gutter. The grid alone, while simple, is perceptually too complex: Sometimes the designer prefers to avoid the clear preponderance of the base grid or eliminate these gutters from the root to simulate a less structured, more natural design or simply give more relevance to the items. The extreme would be the item with a fully rounded frame or circle: By eliminating the edges of the shapes, the optical center becomes more visually relevant, each item is placed at the intersection of the axes of the structure lines (a). The gutter gets totally diluted. Perceptually it's much simpler: The orthogonal shapes with rounded corners try to weaken the marked Cartesian axis of the base structure. But, while the gutter is still clearly perceptible, the rigidity of the union between the curve and the side generates a new element: https://en.wikipedia.org/wiki/Grid_illusion . Smooth corners are an optical arrangement to simplify visual perception, trying to avoid the mismatches described without dispensing with the use of orthogonal shapes, replaced by circled squares: https://en.wikipedia.org/wiki/Squircle .