Prototyping the main page of articles flamp.ru

    The task


    Redo the "Articles" page ( http://novosibirsk.flamp.ru/articles ). The result is a single layout in PNG. Objective: make the user want to stay on this page for as long as possible.




    Small lynch



    (the picture is clickable)


    Search for an idea - I think over a task and write out everything that comes to mind


    Scroll photos when hovering over a post over time, tiled interface? hierarchical? Display the main and hot on the right. Show recent posts and comments and scroll through them. Indicate in them a link to what the comment was on, show the number of reports per hour, the rating of articles. Show relevant articles - other articles. Show relevant reviews? Tags, post categories? Popular topics down under the "most talked about" and "most popular." Add the theme of the day. Achievements? Show the beginning of the text from the article. Make the appearance of a newspaper with stripes and the main theme. Topics in other cities below? Tag Cloud? To the post, show two similar lines. A few large blocks: The main thing, then the New (less active)? Most viewed (today, yesterday, week). Share it? Unusual news to attract attention. Little playful little men in design with tips and your opinion? It is necessary to make the material heterogeneous along the entire length of the page - then the user will be interested in scrolling and browsing it to find what really interests him. Once again, no one will poke a mouse. A special type of blocks for photo essays. The last post of the best most active writer of posts, top writers. Editor's Choice. The last post of the best most active writer of posts, top writers. Editor's Choice. The last post of the best most active writer of posts, top writers. Editor's Choice.

    Do not forget about why all people have come to this page. He wants to learn more about his living environment — which foods to eat and which not. Where is it better to hang out, where is the service sucky and so on. It is necessary not only to show him quick access to such requests, but also to be interested in similar problems that he could forget about, but if he sees such an article, then he will remember about it. Perhaps in the text of the articles it will be necessary to highlight the words so that they can be used to move to other articles.

    Making an application of modules





    Sketch No. 1


    We send the picture under the heading in the block, because the picture above the heading is used somewhat in other situations. Add the best in plain text. They will click on the best only because it is the best. Since the headings of the articles are quite short, you can play with the place and position of the best. We are thinking about making the most important news in the form of a large block, so far I do not like it. We add a section for the article because many people look at the section before reading the article. Add the name of the author of the article. A person should be proud that his name flaunts on the main one, because people generate content - you need loyalty. And people will throw links in the spirit of “look at my article” not only to a specific article, but also to the main page with articles. We are thinking about the conclusion next to the block of the best comments - often people go to the article to read the comments with the best rating, because most often they carry more useful information than the article itself. We add the beginning of the article, because being guided only by the image and the title, it is difficult to understand whether you need to read the article or not. It’s better to make a person “catch his eye” for the key words for him.

    image

    Sketch number 2


    We leave 7 articles in the main block, 3 with large pictures, and 4 less. We decide to leave comments for the first three blocks, remove the big main banner, take the best up, add the period of the best, add the “Flamp recommends”. Add a strip of random photos from articles. Such a strip fulfills several goals at once: visually divides the page into parts, makes the user click on the picture they like, make the user see more pictures by simply looking through them. A click on the image should send to the corresponding article.

    image

    Sketch No. 3


    We rearrange the blocks, see how it turns out. Too much text on top. All the same, we give the third column to the block, even if it has no comments, and in the fourth we write all kinds of additional information. Below, for each topic, we assign our own block; each block has its own highlight of the display. If the number of comments exceeds the conceivable and inconceivable limit, the affairs icon comments red.

    image

    Sketch No. 4


    We draw an approximate type of comments for the topic block, if there are no comments yet - put an invitation (you can also banner). Below we have large blocks for each topic, 3 pieces, and then themes under them, so that a kind of fractal is obtained. The blocks at the bottom of the page turned out to be too pattern-like, you need to somehow fix it. Most likely the Shopping blog will have to be changed a bit.

    image

    Summary page


    We remove the unnecessary, leave just enough so that a person could both consider and not feel that the page is empty. The upper part (before the photo) is more detailed, because the user carefully considers it, under the photos we add a couple of articles from each category, in the hope of “catching” the user with the article they like. The strip with photos serves as a visual separator for the user and allows him to look at random photos, thereby increasing the time spent on the page.
    Now there are two large visual parts, the upper (contains the squeeze) and the lower (details for each section).

    image
    image


    What do we have?


    In total, I spent 2 days on work and it is not finished. The next step is a survey of the focus group, and the transfer of the layout to the designer, so that the designer as close as possible to perfection.

    And what would keep you on the article page longer? (We don’t take Habr into account, his page appearance has been honed for centuries).

    PS This is a test task in 2gis for interface designers.
    PPS In order not to disappear good - I decided to put it on a geek magazine

    Also popular now: