B
B
bogette2018-10-30 06:04:04
Design
bogette, 2018-10-30 06:04:04

Can you talk about the cons of design and interactions with a blog post?

I am creating a theme for wordpress and have now stopped at creating posts.
Please give me some criticism . Tell us about the pros and cons, and most importantly, give directions for improving interaction with the page and content
______________________
The arrow increases the space and slightly centers the content. Click - it's more convenient
5bd7caa012bf2803350912.png

Answer the question

In order to leave comments, you need to log in

3 answer(s)
R
Roman Korobko, 2018-10-30
@bogette

The overall impression is really good - in the spirit of modern Eco-minimalism - pleasant, relaxed, non-provocative, subtle. I like the Publico Roman typeface - it goes well with both the described Eco-minimalism (a la Provence) and architectural hi-tech. Together, the two styles perfectly capture the concept of Grocery in a modern metropolis (if I understand the theme of the site correctly). Yes, be sure to talk about the conceptual problem you are solving. Form cannot be considered in isolation from the meaning it expresses.
The convention is not immediately grasped, when scrolling to the end, a link to the next post appears in the block on the left (central). After all, we all read left-to-right and top-to-bottom, and the appearance of such an element on the left for me at first meant a new title for a new block of content on the current page, then I realized that this was something that appeared only at the bottom of the page and, only after reading a small inscription, realized that this offer to visit the next post. I specifically describe meticulously so that you can trace the "unconscious logic" of an ordinary user, which you need to be aware of.
The arrow that allows you to expand the workspace is cool, but it was cool "yesterday". Creating a cool "feature" is not enough today. In fact, you know the solution, but you do not give it completely and force the user to play the game, solve the riddle and find this miracle function in the interface. If this was a digital agency site that demonstrates its creativity by getting the user into the game, then this is probably a good move. But for an ordinary user, this is superfluous, distracting him from the essence of the operation that you force him to do. Returning to today, I will answer - now the philosophy of "computer game" is extremely in demand - i.e. even smoother, simpler, more playful user experience. It is necessary that matters be resolved as if by themselves, at the behest of not only the thoughts of the user, his subconscious.itself , for example, when moving the mouse there or when starting to perform some action in which it would be better to have more space, for example, when clicking "comment".
About the "genre", i.e. about archetypal style. I see here two main approaches to the location of high-level graphics blocks ("main spots") that you have combined. I will name myself, I do not know the common names. These are: 1) flying on some fuul size background of the body. In this case, the main working area is made narrow for easy integration into various sizes and formats of the device and for fast intense perception of information in small doses (short lines). The background, in turn, plays a secondary role - it creates a general color, atmosphere, revealing the general theme of the site. 2) these are sites a la mac finder, consisting of several pages on one, arranged horizontally, where the left is the parent directory of the right. And it is this approach that is declared at the first attempt to scroll down.
My suggestion for testing (because I'm not absolutely sure of its applicability): leave on the right, after the white block, a small area of ​​the background. So that on a medium-sized monitor it would be about 2cm. This can better concentrate attention inside the text, as it will give the eye an opportunity to rest the eye from the edge sections of the image - these designs are very good for this: there seems to be nothing superfluous and at the same time there is no emptiness.
The second point is related to the logic of transition from page to page. You still offer to shift the entire layout to the left to the center with an arrow. I also support the author above - it would be better to shorten the lines a little.
If the transition from the main page to the post is cool (in that it is simple and with a twist - scrolls to the right are still perceived as a non-standard move), then the transition back (to the main one) does not continue the established logic, according to which the transition between pages is carried out by scrolling. Immediately you tear the template and offer to press the "Back" button. By the way, the animation of her appearance is a Kindergarten level Movie Maker. You do minimalism - your choice is "high simplicity". Make, for example, a light "doslide" (by 10 pixels) together with the appearance of opacity from right to left, which will slightly draw attention to itself and make it clear that it points to the left. I would leave the logic of scrolls, not clicks. Clicks - the action is more labor-intensive on the part of the user than scrolls, which can be done without paying much attention to the exact positioning of the cursor on the screen. And I would suggest switching back when scrolling in the background zones (building) and in the title / comments zone. To be honest, I had a slight dissonance when the page didn't go back.
The comment icon is located in a completely unspecified place (neither intuitively nor logically). Its location is more like an attempt to shout "Wait, I still have gingerbread!", To the lady who is leaving you. This is how its location near the functional leading "out" is read.
The appearance of comments on the site of the last block - I think it's more "creative" than destroying the logic of perception from left to right and well "saves" the space. However, it is extremely difficult at first glance to recognize whose comments belong to which avatar with a nickname. Why? Again - the notorious perception from left to right, which first catches that the dividing lines start from the edge, and the brain itself thinks out / completes it, believing that the bottom line is the same size as the long one: "after all, they are the same at the beginning and therefore the end will be the same," the brain thinks to itself. In general, why do we need a line separating an avatar with a nickname from a comment? I repeat - your credo, since you have already stated it - minimalism (functionalism is one side of it) - give up the unimportant and non-functional.
Indents in the text. I support the author above. The headline is the essence of the text - it's the super-short equivalent of text, if you will. This means that they must also be formally correlated, as related to each other, as equivalent. It is not clear from your layout whether the heading refers to the text above or the text below. Of course, any sapiens will figure out what's what, but your credo is minimalism - therefore, we make interaction with controls (including compositional elements organizing attention) with minimal user participation - as inconspicuous as possible. It is not necessary to force the user to suddenly start unconsciously choosing where to move (in the imagination) this block as if it is evilly hanging exactly in the center and causing a dilemma (Read R. Arnheim "Art and Visual Perception"). The choice is extremely difficult don't force the user to do it. You are valuable as a designer, that it was YOU who chose him for the user - that is what he pays you money for (indirectly). The user wants solutions, not tasks.
For some reason, the vk icon fell out of the general "silhouette" style and was made with a stroke. Choosing from two - in this case, choose the fill, because. your icons are small, and the outline at this size will create excessive detail and the desire to get a magnifying glass out of your grandmother's suitcase will simply create rippling noise.
Alignment - alignment again))
The title "Distributor United Natural Foods" is more right-aligned than the rest of the elements in the block. Here the notorious "visual compensation" (or as it is called) suggests itself. Technically, yes, the text starts the same way from the left, but due to the nature of the font, whose verticals start to the right, it feels like there is more indentation on the left. Because of this, it even seems that the tags are shifted a little to the left by 1-2 pixels. Referring again to R. Arnheim, if you want the initial and final elements of the block ("Briefly:" and tags with icons of social networks) to act as markers of the beginning and end, separating from the middle, then make it more obvious - shift more. Otherwise, they are visually attracted to the left edge, but something goes wrong - the look is tense, the subconscious is seething, the user is nervous.
Main page:
cool hamburger menu. It looks strange at first, but everything becomes clear when it shifts. It looks interesting and most importantly - new - I personally have not seen this; and with hamburgers as soon as they don’t show off. I am an indicator of how not a prof. designer, but rather closer to the average user.
The grid that appears with an offset when the menu is clicked also looks cool.
Especially cool - the Warmth logo on a so fkn cold background :-)
The Neto Serif KR font is interesting, although a bit from America in the 90s. But, what is not good - inconsistency, and the style of the main page, and the blog in general; and variety of fonts. Make a choice - do not shift this most difficult task onto the shoulders of a poor user, love him))
Good luck!

I
Ivan Bogachev, 2018-10-30
@sfi0zy

Talk about pros and cons

On the plus side - the idea is interesting, it looks nice.
Of the minuses (in the post itself):
The scroll lags a lot, so navigation is difficult to assess. There is no adaptability. Definitely worth thinking about scenarios of interaction with the site as a whole. If this is a blog, then it should definitely be there (people are used to this and are waiting for it):
etc.
Beautiful animations are already secondary, you need to start with interaction scenarios, otherwise it turns out beautiful, but not convenient.

E
Eugene, 2018-11-01
@D0c

Personally, I did not like it, and not because of some technical or visual flaws. But because design should solve the problems of visitors / customers, and not create them.
The back arrow is perceived as a back action, in turn, back appears only on hover. And the horizontal scroll on the first screen is absolutely not obvious.
And in order to perform a seemingly simple action, the visitor must look for a non-standard solution or look for the location of the element in a non-obvious place (the comment icon).
And while testing, somehow got this https://snag.gy/8irs4Q.jpg

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question