# I suggest to replace the words on the mobile version with icons

**URL:** <https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491>\
**Category:** UX\
**Tags:** topic-map\
**Created:** [Outubro 20, 2017, 5:40pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491 "2017-10-20T17:40:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![11145](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/11145/32/119636_2.png) [@11145](https://meta.discourse.org/u/11145)\
**Post date:** [Outubro 20, 2017, 5:40pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/1 "2017-10-20T17:40:11Z")

</div>

In my opinion, the mobile version of the word is superfluous, and enough of some icons, for clarity I show an example.

**How does this block look now**

 ![6dmiA-P6704](https://global.discourse-cdn.com/meta/original/3X/4/a/4a1a66b69798ac17dcb0bea94280336e98ab2290.jpg)

**And how would he look**

 ![diskors](https://global.discourse-cdn.com/meta/original/3X/f/4/f427d98731c1cd90c4d8e24648fce46140de0488.jpg)

_I apologize for my English_

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Outubro 21, 2017, 2:34am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/2 "2017-10-21T02:34:49Z")

</div>

It is a very good idea, what do you think @awesomerobot?

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [Outubro 23, 2017, 2:07pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/3 "2017-10-23T14:07:30Z")

</div>

Yeah I think this is a great idea — I’d suggest keeping created/last reply as text though, I think they might lose too much meaning as icons only… I think everything else stays really clear.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [Outubro 27, 2017, 2:32pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/4 "2017-10-27T14:32:44Z")

</div>

How do people feel about doing something like this this on larger devices too?

icons

 ![52 AM](https://global.discourse-cdn.com/meta/original/3X/1/f/1f4b387a0053d67309947eb1ead4e7dc7076db32.png)

text (current)

 ![36 AM](https://global.discourse-cdn.com/meta/original/3X/1/1/11e386e32fb9303507019322d3e4867816426fa1.png)

---

<div class="post-metadata">

**Author:** ![11145](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/11145/32/119636_2.png) [@11145](https://meta.discourse.org/u/11145)\
**Post date:** [Outubro 27, 2017, 3:56pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/5 "2017-10-27T15:56:29Z")

</div>

> [@awesomerobot](#):
>
> Yeah I think this is a great idea — I’d suggest keeping created/last reply as text though, I think they might lose too much meaning as icons only… I think everything else stays really clear.

as it seems to me, everything is clear.

---

<div class="post-metadata">

**Author:** ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)\
**Post date:** [Outubro 27, 2017, 4:11pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/6 "2017-10-27T16:11:16Z")

</div>

Assuming there will be title elements where someone can hover and see what each icon means, I like it.

---

<div class="post-metadata">

**Author:** ![notriddle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/notriddle/32/133055_2.png) [@notriddle](https://meta.discourse.org/u/notriddle)\
**Post date:** [Outubro 27, 2017, 5:18pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/7 "2017-10-27T17:18:43Z")

</div>

You’re not hovering over anything on a touch screen.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Outubro 27, 2017, 5:20pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/8 "2017-10-27T17:20:15Z")

</div>

I vastly prefer the words on larger devices.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [Outubro 31, 2017, 4:01pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/9 "2017-10-31T16:01:34Z")

</div>

[https://github.com/discourse/discourse/pull/5278](https://github.com/discourse/discourse/pull/5278)

There are a lot of various cases to cover when it comes to number of actions, length of dates, viewport width, etc — I rebuilt the summary section of the topic map in flexbox in the process (on mobile only).

 ![39 AM](https://global.discourse-cdn.com/meta/original/3X/2/0/20094ffb10329c037aa86a54f1900b33ed0385fd.png) ![53 AM](https://global.discourse-cdn.com/meta/original/3X/8/e/8e0e0262d16d223118dbfcd04bb1b2c78b982a40.png) ![31 AM](https://global.discourse-cdn.com/meta/original/3X/4/1/4198c69bbac7440ab4ce8984e85535397154cae7.png) ![15 AM](https://global.discourse-cdn.com/meta/original/3X/e/c/ec47f8e55023fd6dde4ea4dd96eb71d48e4e4a1d.png)

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Outubro 31, 2017, 8:18pm UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/10 "2017-10-31T20:18:05Z")

</div>

It feels like the icons should be dimmer, like GitHub does it in their tabs?

![image](https://global.discourse-cdn.com/meta/original/3X/3/a/3a25feaee2c0b8b1aaa6d9ffe5534b44870f2040.png)

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [Novembro 1, 2017, 1:36am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/11 "2017-11-01T01:36:58Z")

</div>

updated; this actually gels with the existing part of the map better too; icons are the same color as “created”, numbers are the same color as the created date

 ![58 PM](https://global.discourse-cdn.com/meta/original/3X/9/0/9072f28de94b36a90952f0980bde35712b0a797b.png)

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Novembro 1, 2017, 4:04am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/12 "2017-11-01T04:04:02Z")

</div>

There is something about this I don’t like after seeing it in action ☹ can we try reducing the number of data points shown, by width maybe?

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [Novembro 1, 2017, 6:13am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/13 "2017-11-01T06:13:59Z")

</div>

Hmm maybe the big problem here is that “created” and “last reply” are words?

Maybe just omit “created” on mobile altogether which is available anyway at the top then “last reply” does not even need a word? (the words also make russian not work at all well with this above design - see OP)

Also keep in mind a large amount of topics will have zero links and less than threshold views, so that is 2 less icons, it can look a bit bare to have almost nothing in the box… not sure what the perfect fix here is

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Novembro 1, 2017, 6:41am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/14 "2017-11-01T06:41:10Z")

</div>

The colors were quite wrong, making these super dark black just highlighted them too much for me. How about this.. much better, less YELLING WITH **BLACK**

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/4/0438bd3fa19f9cf060c1d940c449f75c7653abc2.png)

Then the alignment bothers me. Why not align things the same way? (exact spacing not intended here, this is a quick and dirty mockup)

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/7/2705ebae15b3989cd916393e0b5381451a006f85.png)

Or flip bottom and top, like we do with the words, does not matter, in fact that might be more consistent?

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/7/171353cea5b91672ac9133bbf35cdf01a4a8f251.png)

Yeah I l like that better since it emphasizes the difference. Can we go with that @awesomerobot

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [Novembro 1, 2017, 6:57am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/15 "2017-11-01T06:57:30Z")

</div>

Trouble is that in russian the words are already like 50% of the width on mobile, there is not too much room left,

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/1/5103407f163412389a30e40dd719d48a5b8ce7dd.jpg)

I think the words are a big problem here in German / Russian etc.

Dropping “created” on mobile fixes that.

An alternative is floating “last reply” to the right and leaving created on left, then removing the words.

Much prefer your mockups here.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Novembro 1, 2017, 6:59am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/16 "2017-11-01T06:59:44Z")

</div>

What glyph can meaningly convey last reply or last poster?

I guess for last reply you could use ![image](https://global.discourse-cdn.com/meta/original/3X/b/9/b97387693c088cc12715970fe79ba49dde7294b9.png) but what about last poster? Oh I see they are using the clock ![image](https://global.discourse-cdn.com/meta/original/3X/9/f/9f30317522a0cdd28b128fa4f0b858f7781a3932.jpg)

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [Novembro 1, 2017, 7:02am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/17 "2017-11-01T07:02:22Z")

</div>

Maybe no glyph for created and the reply glyph for last poster, make last poster icon a bit smaller, OP a bit bigger?

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [Novembro 1, 2017, 7:03am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/18 "2017-11-01T07:03:49Z")

</div>

So like this?

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/2/c2c4400378633c8be33e98096c89efc8bb3779be.png)

I don’t think random size differences are going to read well, it’ll just feel screwed up. We could make them bigger

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/1/719a60e77dee02128a2f5637d233b5ec92efccc4.png)

There is a fair bit of room here so they could be bigger still. I guess go with the above ↑ @awesomerobot

No words = best TRANSLATIONS EVARRR

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [Novembro 1, 2017, 7:05am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/19 "2017-11-01T07:05:39Z")

</div>

I like the second mockup there I think it works really well on mobile.

---

<div class="post-metadata">

**Author:** ![schungx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/schungx/32/70989_2.png) [@schungx](https://meta.discourse.org/u/schungx)\
**Post date:** [Novembro 1, 2017, 10:28am UTC](https://meta.discourse.org/t/i-suggest-to-replace-the-words-on-the-mobile-version-with-icons/72491/20 "2017-11-01T10:28:29Z")

</div>

Move `last post date` to the end to highlight the fact that one is the start and one is the end?

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/9/e9e3bf86bed399c55ec42cc9e6f021e2308b42bb.jpg)
