32
IN TEXT WE TRUST October 2nd, 2013 Paulin Dementhon @popaulin Founder @drivy

UX and copywriting - Blend Conference

Embed Size (px)

Citation preview

Page 1: UX and copywriting - Blend Conference

IN TEXT WE TRUSTOctober 2nd, 2013

Paulin Dementhon@popaulin

Founder @drivy

Page 2: UX and copywriting - Blend Conference

homepage

activate

Page 3: UX and copywriting - Blend Conference
Page 4: UX and copywriting - Blend Conference
Page 5: UX and copywriting - Blend Conference
Page 6: UX and copywriting - Blend Conference
Page 7: UX and copywriting - Blend Conference

contextual content

convert

Page 8: UX and copywriting - Blend Conference

CONTEXTUAL CONTENT

form error messages

setflashes

confirmation popins

transactionnal emails

SMS

push

contextual help

hard to maintain... but powerful and hard to copy !

Page 9: UX and copywriting - Blend Conference

tone

Page 10: UX and copywriting - Blend Conference

TONE

Casual or Formal ? TU or VOUS ?

Anyway talk like a human, not like a machine

don’t dodge difficulties

Page 11: UX and copywriting - Blend Conference

quality

Page 12: UX and copywriting - Blend Conference
Page 13: UX and copywriting - Blend Conference
Page 14: UX and copywriting - Blend Conference

������������������� �������

�������� ������������

����� ��������������������

� ������ ������������������������������

� ����� ��� ������������������������������ � ���������

!�"����� ���� � ������

#����� � ���!�����������

������"��#��$�����

�$��%&$'�()*�*+��$*��%�#+!+%�*� "�$!��"��$�*%�!�()*

,$-(�+$*.�/%&*��$�*$,+$'�()*�)**&,0

"�!%#��� & ��'(�

��������� ���

����!%��%#)�***

1�������2 ���������

�#���%

0����3�������4

0�������������4

*�2�����������������4 *�2���������������������4

#�55�������6���7����

��������������������� ��� ��6��3��.���8

�������������9�:������

�������������������������������������� �����������������������

���������������������

�+��!�,�),�#-��#�� �+��!�%)����#��

� . � .

� . � .

*�2�����������������4 *�2���������������������4

/-�#0#���#)������00���!���,���%��,�),�#-��#��

/-�#0#�1�%��,��2#������)��!#���)�#3#��%��!�%)����#���4,������,5)�)�),#��)!

�-�%����#)�����,����67�8���#�0)�2��#)����#9�)������)#:����;����#����#<!����!�,��2#�7

"����1��#�,)��#=%��!���,5)�)��!�,��2#�7

/-�#0#�1�%��������=����#����!�%)����#��7� %%���)#���:)#��%���!2-�)��#9�)����>����;���

�!���������������!�%)����#��7��?����,��1�,���%�����@!����!����,���)���>�2;2�

�#��%%������,�-�����>�2;2���@#%��@�3#���!��)�A)#��4�6�)!��?!��,�������!�%)����#��7

��������� �������������������������������������������������������������������������� ����������������������������������������� �������������������������������������������������

�����

!�"�����

/�;���

+����" � ���BC������������������

#���� ������������,�D����5 ��� �5�

<�� ������������:������5 ��� �5�

#���������=� ����6��

(��3����� ���8�

�������!��� �������" #�������$�������������%������������������������&���!����������# ������������������������������������������!'��������#����

B���)!��#3�-4�6>������������� >��#�3������������>�������������������55���������������:��������>�;���.������5����?�:�����5��7�������������@

������7�B��,������%�����,)���=#%#�-��!�:-5#�!%��,�������%��%)���#)�����2@��3�3����%������#�!��������%@-����#�#�#�%>���%@5�!���#��#<!-���!������)�����>������%@��������)E�#%�2@��-�-

��2#�7�AB������������>��������#��>=�9����>�����������������������)!����)22���!���!�,�),�#-��#����!��#�����!��)���������%)���#)�>��)���%����%�!�����-��#%%-��

0#3!������!��%��,�3��5��,�F��GGG7��#:H7�)2��)�����9%)���#)�9:�5#�!%�9�����9,���#�!%#��>�����)!����)22���!������#:H��!��#���������)��#�#)���3-�-��%����!��#��7�B?�#�=#����)2,�#�

<!��%��5����;������������:�����������#��>=���� ���8�>����<!���#�A��������,�����,���%����)��#�#)����?���!�����>�%���-:���!�%%����-,����#)������)����)��%�2������2�

�5��3�7

��������5�!����������#�!�#)�� � �� ��� �5

C��@�@��?�?���;���9���2����������������>�;����D

�7� �

�7� �

�7� �

����������������� �����(�������"�����������)�����

4�!����#0�����>���.���I26

45)������=!����6

��H!���� �-��):#��!��� ��)#�� ��� 3�!�5�� ��H!���� �#%�� ���#D��� 3�!�5�

,����5)�����#D���F�=)!������,�#��!����-���5-����H!����!��%@���#D�����

%��,)�������#D���3�!�5����A)%#:�!���:������)#�����)22�3-

�%-(!$�,$�#&�#$�<+��#$��%�)!+%�

�%�.�����9���2����:�19:)!���)!��:-�#J-��:��������#3����K��)��22����#��-�#�!�>�=��������#���>�A�����>�,��!��K�

%&+.���=�������������������9�55�����

� � �

8��%)����#�����,�),�#-��#���4L6���,�H-��!�%)����#�����,�),�#-��#���4L6�%���)22���� �.��*+�����!�������������������,

8��%)����#�����,�),�#-��#���4L6���2���������#:H�����-3!%��#����%��%)���#)������-%-�5��3���������)�������!��%���#���4�����M2��%)���#)�M�N�M���:#����%#���M6

%&+.��>�;����������������2�.������������������������:����>�������:������5������"�

�O�F����#����>���H!���>��P�5����!��%����#D3��777

-������!�"���������������������������.���������������2�����>�;�������/�0����������1��"���

$�����!�1��"������23�)4�56�3�*���'"���6#3'6#������#'7#���������%�����0 �� ��)#3'6#,������8������� �

Page 15: UX and copywriting - Blend Conference
Page 16: UX and copywriting - Blend Conference

BLOG

No commercial exchange of content or links

Page 17: UX and copywriting - Blend Conference

quality text content builds TRUST and EMPATHY

highest ROI of the UI design process ?

Page 18: UX and copywriting - Blend Conference

copy writing process

Page 19: UX and copywriting - Blend Conference

wireframing

Page 20: UX and copywriting - Blend Conference
Page 21: UX and copywriting - Blend Conference
Page 22: UX and copywriting - Blend Conference

Using dummy content in the Web design process can result in products with unrealistic assumptions and design flaws.

DEATH TO LOREM IPSUM

Luke Wroblewski

Page 23: UX and copywriting - Blend Conference

We use Keynote Kung-Fu rather than paper or wireframing tools like Balsamiq or Mockflow

DEATH TO LOREM IPSUM

Page 24: UX and copywriting - Blend Conference

Option 1Option 2 Option 3

Label:

Yes

No

Option 1

Option 2

Button

Button

Please select...

Please Select

! Required Field!

JulyJulyJulyJulyJulyJulyJuly

S M T W T F S

1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 18 19 20 21 22 23

24 25 26 27 28 29 30

Label:

! Required Field!

Please Select

Button

Button

Yes

No

Option 1

Option 2

Option 1Option 2 Option 3

Please select...

Leave a comment:

JulyJulyJulyJulyJulyJulyJuly

S M T W T F S

1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 18 19 20 21 22 23

24 25 26 27 28 29 30

Leave a comment:

lfdmqùflùqs

Page 25: UX and copywriting - Blend Conference

# First name Last Name Language

1 Some One English

2 Joe Sixpack English

4 Stu Dent Code

1

Some value here

Disabled input here...carry on.

Profile Messages Settings ContactHome

Profile Messages Settings Contact DropdownHome

Home / Middle page / Another one / Your are here

← Previous 1 2 3 4 5 Next →

Page 26: UX and copywriting - Blend Conference

naming

Page 27: UX and copywriting - Blend Conference

NAMING

location vs autopartage

propriétaire vs loueur

demande de location vs réservation

voiture vs véhicule vs annonce

Page 28: UX and copywriting - Blend Conference

managing content

Page 29: UX and copywriting - Blend Conference

Architecture

• well structured code with all content in separate files (.yml)

all SMS / setflashes / .... in one place

• CMS for large chunks of content, like static pages

• Zendesk for help

Page 30: UX and copywriting - Blend Conference

Updating content

Skitch + github issues or github web editor

Page 31: UX and copywriting - Blend Conference

Next ?

PhraseApp or Locale to make editing easier for non-tech guys and make translation possible

Page 32: UX and copywriting - Blend Conference

THANKS

Paulin Dementhon@popaulin